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 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;
}
Your code does add cross-sells section below the check-out, but it also shows at the old position, which means it now shows twice.
Do you have another solution?
Thanks 🙂
What theme are you on?
This isn’t working for me. Is it not possible to show more than 2 now?
add_filter( 'woocommerce_cross_sells_total', 'bbloomer_change_cross_sells_product_no' ); function bbloomer_change_cross_sells_product_no( $columns ) { return 2; }f course it is. Maybe it’s only a CSS problem. Try with a different theme and see if it works there, in such case your theme may need some CSS fix
Thanks everyone,
Here another simple code to move “cross sells” bloc to top of woocommerce cart (before cart) :
Cool
This is great! For me woocommerce_after_cart worked, in place of woocommerce_after_cart_table.
My question is, it possible to control how many columns per row are displayed for desktop vs. mobile? When I select to show 4 columns through the php code above, they look nice on desktop but on mobile it’ compressed and show very tall and narrow columns. I don’t think php can detect devices so must be css code. Do you know if it’s the “product” class properties, such as grid layout that can be tweaked in css to achieve that?
Yes WordPress PHP can detect mobile vs desktop: https://developer.wordpress.org/reference/functions/wp_is_mobile/
Sorry, this code to move the cross sells under the Proceed to Checkout button did not work on MOBILE. It does work on desktop! How would it work on mobile?? Otherwise I have to delete the whole cross sells as it is hiding the Totals and Proceed to checkout butto on mobile and most my customers are on mobile. Many thanks for any help in advance! R.
Hi Bexter, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom CSS work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
For me the solution was:
Cool
Hi, I just want to say “Thank you.” Your website has been a great resource and tremendous help to me in my day job and client work. Majority codes work perfectly. Again, thanks a lot.
Awesome!
Would be awesome if the move and change number code would be updated! Does not work for me. Especially on mobile it is stupid to have them above the continue to checkout page.
Rob, thanks for your comment! I just tested this again with Storefront theme and it works perfectly. Maybe your theme (or another plugin) is messing/conflicting with my snippet?
To troubleshoot, disable all plugins but WooCommerce and also switch temporarily to “Twentyseventeen” theme (load the snippet there in functions.php) – does it work? If yes, you have a problem with your current theme or one of the plugins.
Hope this helps!
R
Seems not to work anymore unfortunately..
In fact it makes the design worse; but this could also be due to my Salient template.
It may be. Try the snippet on 2017 theme and see if it works there; in case it does then the snippet needs to be customized specifically to your theme
works like a charm, thx for this masterpiece!
Storefront 2.3.3 with:
WP 4.9.7
WC 3.4.3
PHP 7.2.7
Awesome 🙂
Hello Rodolfo.
Tell me please, is it possible in the cart to do so after each item reflected only his cross sell?
For example, one product, under it only its cross sell, below the second product and under it only its cross sell and so for all goods in the cart.
Hello Dmitri, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R
Hello Rodolfo. Thank you very much for all your valuable information and snippets.
In my case, I do not know why, but cross sells show in cart as intended, but without the add to cat button. Is there a quick code that you know of for adding the button?
My website is still in development and I am using a simple child theme and none of the Woocommerce templates are customized. Everything is still original. I am using WC v3.2.6 and WP v4.9
I appreciate any light you can shed on this.
Richard
Hey Richard, thanks for your comment! Uhm, are those cross-sells out of stock maybe? I don’t think this is related to my snippet to be honest 🙂
Well, this code won’t work for me. I’m using flatsome theme.
In mobile view, the cross sell products still located above the “Proceed to Checkout”
Any custom code to use for Flatsome, Rodolfo?
Thanks
Yoky, thanks so much for your comment! Please ask Flatsome support.
Is there a way to only move the cross sells below the cart totals and shipping calculator on mobile (and keep it default on desktop)?
Hey Reuben, thanks for your comment! There is a way for sure, but it’s not via PHP, as PHP cannot detect the device size. Hope this helps 🙂
I have .99 cent products, so I would like the “you may be interested in” to be the first thing people see on the cart page, above the cart, rather than below it as suggested here.
Could you suggest a code for that scenario?
Johnny, thanks for your comment! I suggest you take a look at my “Visual Hook Guide” for the Cart: https://businessbloomer.com/woocommerce-visual-hook-guide-cart-page/
You just need to change the “hook” in my function and change the position where cross-sells show 🙂
This seems not to be working after 3.0.x, namely the removal in the first instance. Any ideas why? I have the Avada theme but so far as I can tell it uses the normal containers for this. I tried all of the following and nothing took the original cross_sell_display out.
Great site BTW. The post on the visual cart page was a great tool. But, I suspect there is something about 3.0.x I haven’t yet learned.
Hey Richard, thanks for your comment! Are you sure this is not because of Avada? Can you switch theme for a moment and see if the above work?
Hi! I had the same issue with Avada. Fought about 4 hours with all the nested php templates, hooks and functions, just to find out, that solving this via CSS is the easiest solution. So you do not have to mess with any php file, just add the following CSS code to your custom css:
/* cart page change order of divs with flexbox */ .cart-collaterals .coupon{ -webkit-order: 2!important; -ms-flex-order: 2!important; order: 2!important; } .cart-collaterals .cart_totals{ -webkit-order: 3!important; -ms-flex-order: 3!important; order: 3!important; } .cart-collaterals .cross-sells{ -webkit-order: 4!important; -ms-flex-order: 4!important; order: 4!important; margin-top:20px!important; }Thank you Matt 🙂
Thanks for this! You saved me a lot of time today.
And thanks so much for your feedback Chris! Made my day 🙂
Hello, I tried your code snippet to put the up sell section below the cart and it did not work because Woocommerce reconfigured things yet again but I was able to move it by calling woocommerce_after_cart instead of woocommerce_after_cart_table and that did the trick!
Just wanted to pass it along.
Bill, excellent, thanks a lot for your feedback and input!
Thanks Bill. I had the same issue. Your fix sorted it though.
Hi there and thanks for the snippets.
Andy makes a good point. I moved the cross-sells columns from below the checkout button to above it (and below the cart table) using woocommerce_after_cart_table instead of woocommerce_after_cart. The logic works better this way in my mind: these are the items in your cart, you may also be interested in these, proceed to checkout if not.
But I’m having trouble changing the number of cross-sell columns. I want to show 4 and I change the return to 4, but the snippet from this post isn’t working. I’m thinking I need to define how many products should be showing in addition in how many columns. Any thoughts on this?
You’re right Peter! There is another filter (woocommerce_cross_sells_total) that handles the number of products in the cross-sells. I’ve just updated the blog post with the full snippet and also the 2 mini-snippets for managing columns or product number.
Let me know 🙂
Beautiful, thanks!
You’re very welcome Peter!
I agree that the default layout isn’t the best, but moving them below the Proceed to Checkout button may have an impact on how many times they’re clicked on. Ideally, you’d want them before the button or they may be missed altogether.
In an ideal world the default layout would be full width and you could add them to woocommerce_cart_totals_after_order_total or woocommerce_proceed_to_checkout but in reality you’d need to edit the template file in the theme to achieve that.
Thanks for your comment Andy! I would LOVE to see a few stats re cross-sells. I personally dislike them as I believe shoppers have made their mind by the time they get to the Cart page 🙂 Maybe an OTO pop-up (One Time Offer) instead of a static cross-sell section would be more effective?
Having said that, your point makes total sense and I thank you infinitely for adding great value to this post! Talk soon 🙂