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?

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;

Where to add custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

  • WooCommerce: How to Fix the “Cart is Empty” Issue
    For some reason, sometimes you add products to cart but the cart page stays empty (even if you can clearly see the cart widget has products in it for example). But don’t worry – it may just be a simple cache issue (and if you don’t know what cache is that’s no problem either) or […]
  • WooCommerce: “You Only Need $$$ to Get Free Shipping!” @ Cart
    This is a very cool snippet that many of you should use to increase your average order value. Ecommerce customers who are near the “free shipping” threshold will try to add more products to the cart in order to qualify for free shipping. It’s pure psychology. Here’s how we show a simple message on the […]
  • WooCommerce: Cart and Checkout on the Same Page
    This is your ultimate guide – complete with shortcodes, snippets and workarounds – to completely skip the Cart page and have both cart table and checkout form on the same (Checkout) page. But first… why’d you want to do this? Well, if you sell high ticket products (i.e. on average, you sell no more than […]
  • WooCommerce: Weight-Based Shipping Methods
    With WooCommerce you get 3 default shipping methods: Flat Rate, Free Shipping, Local Pickup. For each one you can define a cost, however there is no way to set up some “weight” restrictions. So, what if you want to display a rate for orders below 10 kg, and another shipping rate for orders above that […]
  • WooCommerce: Hide Shipping Method If Shipping Class Is In The Cart
    Our goal is to check if a Product with a specific Shipping Class is in the Cart, and consequently disabling a shipping rate such as Free Shipping if this is true. This is super useful when there are multiple items in the cart and you don’t want to give free shipping for certain orders for […]

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

45 thoughts on “WooCommerce: Move & Change Number of Cross-Sells @ Cart Page

  1. 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 πŸ™‚

  2. 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;
    1. 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

  3. Thanks everyone,
    Here another simple code to move “cross sells” bloc to top of woocommerce cart (before cart) :

    remove_action( 'woocommerce_cart_collaterals', 'woocommerce_cross_sell_display' );
    add_action( 'woocommerce_before_cart', 'woocommerce_cross_sell_display');
  4. 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?

    1. Yes WordPress PHP can detect mobile vs desktop: https://developer.wordpress.org/reference/functions/wp_is_mobile/

  5. 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.

    1. 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!

      1. For me the solution was:

        remove_action( 'woocommerce_cart_collaterals', 'woocommerce_cross_sell_display' );
        add_action( 'woocommerce_cart_collaterals', 'woocommerce_cross_sell_display', 15);
        1. Cool

  6. 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.

    1. Awesome!

  7. 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.

    1. 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!


  8. Seems not to work anymore unfortunately..
    In fact it makes the design worse; but this could also be due to my Salient template.

    1. 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

  9. 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

    1. Awesome πŸ™‚

  10. 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.

    1. 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

  11. 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.


    1. 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 πŸ™‚

  12. 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?


    1. Yoky, thanks so much for your comment! Please ask Flatsome support.

  13. 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)?

    1. 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 πŸ™‚

  14. 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?

    1. 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 πŸ™‚

  15. 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.

    //remove_action( 'woocommerce_before_cart', 'woocommerce_cross_sell_display' );
    //remove_action( 'woocommerce_before_cart_table', 'woocommerce_cross_sell_display' );
    //remove_action( 'woocommerce_before_cart_contents', 'woocommerce_cross_sell_display' );
    remove_action( 'woocommerce_cart_collaterals', 'woocommerce_cross_sell_display' );
    //remove_action( 'woocommerce_cart_contents', 'woocommerce_cross_sell_display' );
    //remove_action( 'woocommerce_cart_coupon', 'woocommerce_cross_sell_display' );
    //remove_action( 'woocommerce_after_cart_contents', 'woocommerce_cross_sell_display' );
    //remove_action( 'woocommerce_after_cart_table', 'woocommerce_cross_sell_display' );
    //remove_action( 'woocommerce_cart_collaterals', 'woocommerce_cross_sell_display' );
    //remove_action( 'woocommerce_before_cart_totals', 'woocommerce_cross_sell_display' );

    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.

    1. 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?

    2. 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;
      1. Thank you Matt πŸ™‚

  16. Thanks for this! You saved me a lot of time today.

    1. And thanks so much for your feedback Chris! Made my day πŸ™‚

  17. 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.

    1. Bill, excellent, thanks a lot for your feedback and input!

    2. Thanks Bill. I had the same issue. Your fix sorted it though.

  18. 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?

    1. 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 πŸ™‚

      1. Beautiful, thanks!

        1. You’re very welcome Peter!

  19. 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.

    1. 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 πŸ™‚

Questions? Feedback? Customization? Leave your comment now!

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

Your email address will not be published. Required fields are marked *