WooCommerce: Move & Change Number of Cross-Sells @ Cart Page

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?

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 tutoraspire.com FREE
* @sourcecode https://tutoraspire.com/?p=20449
* @author Tutor Aspire
* @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', 'tutoraspire_change_cross_sells_columns' );

function tutoraspire_change_cross_sells_columns( $columns ) {
return 3;
}


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

add_filter( 'woocommerce_cross_sells_total', 'tutoraspire_change_cross_sells_product_no' );
 
function tutoraspire_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 tutoraspire.com FREE
* @sourcecode https://tutoraspire.com/?p=20449
* @author Tutor Aspire
* @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 tutoraspire.com FREE
* @sourcecode https://tutoraspire.com/?p=20449
* @author Tutor Aspire
* @testedwith WooCommerce 2.6.2
*/


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

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