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 Watch tutorial @ https://businessbloomer.com/?p=19055
* @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 Watch tutorial @ https://businessbloomer.com/?p=19055
* @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 Watch tutorial @ https://businessbloomer.com/?p=19055
* @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 this snippet?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such files - if you need more guidance, please take a look at my free video tutorial "Where to Place WooCommerce Customization?"

Does this snippet (still) work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7+.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce Customization?

Check out these free video tutorials!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP

Rodolfo Melogli

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as a 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.

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

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

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

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

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

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

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

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

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

  7. 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;
      margin-top:20px!important;
      }
      
  8. Thanks for this! You saved me a lot of time today.

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

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

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

  11. 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? Support? Leave your Comment Now!
_____

If you are writing code, please wrap it between: [php]code_here[/php]. Failure to complying with this (as well as going off topic) will result in comment deletion. You should expect a reply in about a week - this is a popular blog but I need to get paid work done first. Please consider joining #BloomerArmada to ask me 1-to-1 WooCommerce questions. Thank you :)

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.