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        Get CustomizeWoo.com FREE
 * @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        Get CustomizeWoo.com FREE
 * @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 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 Visual Hook Guide: Single Product Page
    Here’s a visual hook guide for the WooCommerce Single Product Page. This is part of my “Visual Hook Guide Series“, through which you can find WooCommerce hooks quickly and easily by seeing their actual locations (and you can copy/paste). If you like this guide and it’s helpful to you, let me know in the comments! […]
  • WooCommerce: Disable Variable Product Price Range $$$-$$$
    You may want to disable the WooCommerce variable product price range which usually looks like $100-$999 when variations have different prices (min $100 and max $999 in this case). With this snippet you will be able to hide the highest price, and add a “From: ” prefix in front of the minimum price. At the […]
  • WooCommerce: Hide Price & Add to Cart for Logged Out Users
    You may want to force users to login in order to see prices and add products to cart. That means you must hide add to cart buttons and prices on the Shop and Single Product pages when a user is logged out. All you need is pasting the following code in your functions.php (please note: […]
  • WooCommerce: Add Custom Field to Product Variations
    Adding and displaying custom fields on WooCommerce products is quite simple. For example, you can add a “RRP/MSRP” field to a product, or maybe use ACF and display its value on the single product page. Easy, yes. Unfortunately, the above only applies to “simple” products without variations (or the parent product if it’s a variable […]
  • WooCommerce: Show Number Of Products Sold @ Product Page
    WooCommerce database already stores the number of products sold for you. Therefore, you may want to show such number on the product page, close to the Add To Cart button. As we’ve seen in my book Ecommerce and Beyond, showing the number of sales for each product can increase your sales conversion rate. All you […]

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

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

  1. This code still works on 3 of my websites in the near 2023.

  2. Hi – I am trying to add this to my single product page – which is working – yay! Thanks.

    However, what I am trying to do is show it above the woocommerce_after_single_variation element. My plan is to then use it for out of stock items, so I can ‘push’ clients to the replacement items. At the moment I have placed it, as per your snippet, in woocommerce_after_single_product_summary. I have tried replacing the woocommerce_after_single_product_summary for woocommerce_after_single_variation but that doesn’t work.

    How do I make it do that?

    Thanks in advance.

    1. So, this will only show on variable products if you use the new hook. Pick another from here maybe: https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

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

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

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

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

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

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

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

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

  10. Very useful code. Thank you

    1. You’re welcome Aurelien ๐Ÿ™‚

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


    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

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