This week’s snippet is about the Cart Page (perfect timing, as in a few days I will run a free class on “How to Customize the WooCommerce Cart Page“).

Today we’ll focus on the “You may be interested In…” section, also called the “Cross-Sells” area. If a product that is in the cart has cross-sells (Edit Product > Product Data > Linked Products), this section will appear by default. Problem is – it is pretty ugly where it is now and distracts the user from identifying the “Proceed to Checkout” button, the most important CTA (Call To Action) of the Cart page.

So, how can me move it UNDER the Cart Totals, and make the design a little cleaner?

WooCommerce: move "You may be also interested in..." section under the Cart Totals
WooCommerce: move “You may be also interested in…” section under the Cart Totals

Full WooCommerce PHP Snippet: Move & Change Number of Cross-Sells Columns @ Cart Page


/**
* @snippet Move & Change Number of Cross-Sells @ WooCommerce Cart
* @how-to Get CustomizeWoo.com FREE
* @sourcecode https://businessbloomer.com/?p=20449
* @author Rodolfo Melogli
* @testedwith WooCommerce 2.6.2
*/


// ---------------------------------------------
// Remove Cross Sells From Default Position 

remove_action( 'woocommerce_cart_collaterals', 'woocommerce_cross_sell_display' );


// ---------------------------------------------
// Add them back UNDER the Cart Table

add_action( 'woocommerce_after_cart_table', 'woocommerce_cross_sell_display' );


// ---------------------------------------------
// Display Cross Sells on 3 columns instead of default 4

add_filter( 'woocommerce_cross_sells_columns', 'bbloomer_change_cross_sells_columns' );

function bbloomer_change_cross_sells_columns( $columns ) {
return 3;
}


// ---------------------------------------------
// Display Only 3 Cross Sells instead of default 4

add_filter( 'woocommerce_cross_sells_total', 'bbloomer_change_cross_sells_product_no' );
 
function bbloomer_change_cross_sells_product_no( $columns ) {
return 3;
}

WooCommerce PHP Snippet: Change Number of Cross-Sells Columns @ Cart Page


/**
* @snippet Change Number of Cross-Sells Columns @ WooCommerce Cart
* @how-to Get CustomizeWoo.com FREE
* @sourcecode https://businessbloomer.com/?p=20449
* @author Rodolfo Melogli
* @testedwith WooCommerce 2.6.2
*/


// ---------------------------------------------
// Display Cross Sells on 2 columns instead of default 4

add_filter( 'woocommerce_cross_sells_columns', 'change_cross_sells_columns' );

function change_cross_sells_columns( $columns ) {
return 2;
}

WooCommerce PHP Snippet: Change Number of Cross-Sells @ Cart Page


/**
* @snippet Change Number of Cross-Sells @ WooCommerce Cart
* @how-to Get CustomizeWoo.com FREE
* @sourcecode https://businessbloomer.com/?p=20449
* @author Rodolfo Melogli
* @testedwith WooCommerce 2.6.2
*/


// ---------------------------------------------
// Display Only 2 Cross Sells instead of default 4

add_filter( 'woocommerce_cross_sells_total', 'bbloomer_change_cross_sells_product_no' );
 
function bbloomer_change_cross_sells_product_no( $columns ) {
return 2;
}

Share:

Leave a Reply