WooCommerce: Change # of Upsells and Move Them Above Tabs

If you use a full page width on your product page you might want to change the number of upsells to 3 (or multiple). Also, a client of mine needed the upsells to be above the tabs, so there you go.

WooCommerce: move upsells on the single product page

PHP Snippet: Move Upsells on the Single Product Page – WooCommerce


/**
 * @snippet       Move Upsells @ Single Product Page - WooCommerce
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=172
 * @author        Rodolfo Melogli
 * @compatible    WC 2.6.14, WP 4.7.2, PHP 5.5.9
 */

// ---------------------------
// 1. Remove Upsells From Their Default Position
// NOTE: please make sure your theme is not already overriding this...
// ...for example, see specific Storefront Theme snippet below

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );

// ---------------------------
// 2. Echo Upsells In Another Position

add_action( 'woocommerce_after_single_product_summary', 'bbloomer_woocommerce_output_upsells', 5 );

function bbloomer_woocommerce_output_upsells() {
woocommerce_upsell_display( 3,3 ); // Display max 3 products, 3 per row
}
}

PHP Snippet for Storefront Theme: Move Upsells on the Single Product Page – WooCommerce


/**
 * @snippet       Move Upsells @ Single Product Page - WooCommerce & Storefront Theme
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=172
 * @author        Rodolfo Melogli
 * @compatible    WC 2.6.14, WP 4.7.2, PHP 5.5.9
 */

// ---------------------------
// 1. Remove Upsells From Their Position (specific to Storefront Theme)

add_action( 'init', 'bbloomer_remove_storefront_theme_upsells');

function bbloomer_remove_storefront_theme_upsells() {
remove_action( 'woocommerce_after_single_product_summary', 'storefront_upsell_display', 15 );
}

// ---------------------------
// 2. Echo Upsells In Another Position

add_action( 'woocommerce_after_single_product_summary', 'bbloomer_woocommerce_output_upsells', 5 );

function bbloomer_woocommerce_output_upsells() {
woocommerce_upsell_display( 3,3 ); // Display max 3 products, 3 per row
}

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.

22 thoughts on “WooCommerce: Change # of Upsells and Move Them Above Tabs

  1. Hi
    I got the same issue as mustafe. I get the Upsells display twice.
    Tried the ‘wp-head’ but same issue

    1. I see. Try using “wp” or “init” hooks instead

  2. Hello Rodolfo Melogli,
    When i am trying to moving up the upsells tabs so it is showing two times in my product page i think remove_action is not working. Please help me regarding this.

    1. Hey Mustafa, thanks for your comment! Try wrapping the remove_action into the wp_head hook: https://codex.wordpress.org/Function_Reference/remove_action#Example

  3. Thanks for your code! Do you know any plugin that does not require coding? I think it will help us a lot.

    1. You’re welcome ๐Ÿ™‚ Sorry but I don’t!

  4. Hi!
    How can i move upsells below the gallery thumbnails? (if possible)

    1. Hey there ๐Ÿ™‚ Try reading this and look for a different hook: https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

  5. Hi!
    Thank you for this code – is’t workl! But i have a little problem with position of block title… Can you help me by advice?

    1. Thank you Alex ๐Ÿ™‚ Sorry, but I can’t hep with custom work here in the blog comments!

  6. Hi,

    I tried the storefront snippet and it broke my site. When I looked at the snippet again it seems that there is an extra } at the bottom. When I copied the snippet again without that ‘extra’ } it worked.

    Thanks a lot,
    Annaliese

    1. Thank you so much Annaliese! Snippet is now indeed correct ๐Ÿ™‚ Thanks again!

  7. H i Rodolfo and thank you for your great work!

    I’m very familiar with WordPress & Woocommerce (created several websites by myself), but I don’t know how to code at all. With your great tutorials I was able, during only few hours, do things that were beyond my imagination even yesterday. So I am very greatfull for your work.

    Some of the snippets I’ve copied from this blog worked, others didn’t. This particular one works 50/50. It shows upsell products over the tabs but didn’t delete upsell products in their original positions (so they are doubled at a product page).

    There were many changes in WooCommerce since this post was published, so can you review it and see if it needs to be updated? Thanks a lot once again and keep up great work! ๐Ÿ™‚

    1. Hey Pawel, thanks so much for your comment!

      I updated the snippet as per your request, and added a NOTE to say that sometimes your theme overrides the upsells block (and this is the reason you can’t remove them, as I’m using the default WooCommerce PHP function). Besides, I added a specific snippet to Storefront Theme, which shows you what I mean.

      Also, I would LOVE to know what other snippets don’t work, so that I can update them – looking forward for your answer!

  8. Very useful code. Thank you

    1. You’re welcome Aurelien ๐Ÿ™‚

  9. Hi,

    How do I switch the cross sells and the shipping calculator? Meaning the shipping calculator and checkout button is on the left side of the screen and the crosssells and/or upsells are on the right? With our theme in mobile the crosssells would come after the calculator and checkout button.

    Thanks,

    1. Michael, thanks for your feedback! Just take a look at the Cart template and you will be able to see what gets called on the left and what gets called on the right. After that, remove those actions via hook and re-add them in the other position. Hope this helps a bit! R

  10. Hi,

    Need help. Inserted this code ans “broke” my website.

    1. Hi Jeremy, thanks so much for your feedback! This snippet worked on my website so maybe you pasted it in the wrong place or missed a punctuation sign or something like that. If you give me access to your website I’ll take a look immediately. Feel free to email me at INFOatBUSINESSBLOOMER.COM. Cheers, R

      1. I’ll email you R, thanks. Wasn’t sure on the punctuation…

        1. No problem! Hopefully I can help ๐Ÿ™‚

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.