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.
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
}
This code still works on 3 of my websites in the near 2023.
Thank you
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.
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/
Hi
I got the same issue as mustafe. I get the Upsells display twice.
Tried the ‘wp-head’ but same issue
I see. Try using “wp” or “init” hooks instead
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.
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
Thanks for your code! Do you know any plugin that does not require coding? I think it will help us a lot.
You’re welcome 🙂 Sorry but I don’t!
Hi!
How can i move upsells below the gallery thumbnails? (if possible)
Hey there 🙂 Try reading this and look for a different hook: https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/
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?
Thank you Alex 🙂 Sorry, but I can’t hep with custom work here in the blog comments!
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
Thank you so much Annaliese! Snippet is now indeed correct 🙂 Thanks again!
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! 🙂
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!
Very useful code. Thank you
You’re welcome Aurelien 🙂
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,
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
Hi,
Need help. Inserted this code ans “broke” my website.
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
I’ll email you R, thanks. Wasn’t sure on the punctuation…
No problem! Hopefully I can help 🙂