WooCommerce: “Continue Shopping” Button @ Single Product Page
A freelance client hired me a while ago to display a “Continue Shopping” button on the Single Product Page, next to the Add to Cart. A simple way to send their users back to where they were coming from without clicking the “previous” button on the browser 🙂
Here’s how it’s done, featuring an awesome WordPress function called “wp_get_referer()”!
Continue Shopping button @ WooCommerce Single Product Page
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
67 thoughts on “WooCommerce: “Continue Shopping” Button @ Single Product Page”
Rob Phillips-Legge
This sort of works 🙂 It places an appropriate button on the product page ok, but it disappears if you press “Add to Cart”. Ideally for me that should be the other way around so that the button appears after pressing add to cart.. Even better if that can be placed in the success message.
Hi Sabrina, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
I’m loving this code, but would you know how to get it to go back to the category page for the last product added, instead of back to the product itself?
I can’t work it out – it would be super amazing if you could!
Do you think it is possible to have two separate buttons that do:
1) add to the cart without redirecting to the cashier (they continue in the catalog)
2) add to cart with automatic redirection to the cashier
Hey Gabriele, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi, I’m using Flatsome and Flatsome child-theme. All my products are with several variants. On my site this snippet won’t work, unfortunately.
Thanks for all the work you put into all the snippets. Returning to your site very often to make sure I didn’t miss anything fun.
Hi Jan, 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.
Hello! I want to use this code but with a different hook? I want the button to appear only after something has been added to the cart? Also, through messing around it seems if the user goes to cart and then uses the product link to go back to view product when you click the “continue shopping” button it will direct you back to the cart instead of the shop page!
Hello Jennifer, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
but returns the following error:
Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘bbloomer_continue_shopping_button’ not found or invalid function name in… /public_html/wp-includes/class-wp-hook.php on line 286
This is exactly what I’m trying to do but am a complete amateur when it comes to hooks. I’ve been struggling trying to figure out how to accomplish having the button display even after an item has been added to the cart… would you be willing to share with me how you modified the code? Thank you!
I can see the Continue Shopping button fine when hitting a single product page from the store front but if I just change the product name within the browser URL then it vanishes! Any ideas? The code is added to the child theme functions.php file.
Hey Wayne, thanks for your comment! If you type in the URL, that URL will be counted as first visit to the website, so there is no “previous” page. Hope this helps 🙂
Nice snippet! I just saw a friend’s website that had that option and remembered that I always thought it was a good idea! A little Google search and it brings me right back to your site. The best place for snippets!
Just wondering though (I’m not a developer)… I see bbloomer in the code. Can this be changed to anything we want? Can it be removed completely? My curiosity is wondering why it’s there 😀
hey Rodolfo thanks for the code. have been using a modified version to add two buttons once the product is added to the cart BUT the person im helping needs the buttons removed once you navigate away from the page of the product you just added to the cart; i.e. on any other page. Or maybe the correct term is on any single product page where that product does not appear in the cart? pleeeeease help asap- have spent hours and hours and i just dont know enough. THANK YOU!!!
Shane, 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
Cant you please point me in the right direction? What woocmmerce tag / function to use? Im not asking you to write it but maybe if I actually new what to search for I could make it work…?
Thank you for this post, it’s a great one for me. But I have a little problem. The Continue button is above Add button, can you help me to move it a little bit down ?
Eusebiu, thanks for your comment! Yes you can achieve that via CSS. Unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R
Hey Ilana, thanks for your comment! You will need to change “hook”. Instead of “woocommerce_single_product_summary” you should use one of the Cart hooks
hello
The ‘continue shopping’ button disappears when the view cart message is displayed.
How can we keep the button in place when view cart message is displayed?
thanks.
The reason why it was disappearing is because clicking on the add to cart button refreshes the page, and if the previous page was the same page you’re on,
This is great and exactly what I was looking for, however,
Button with continue shopping appears on single product screen but when the item gets added to the cart the page refreshes with the added to cart message and then continue shopping button disappears.
Mark, thanks for your comment! Maybe in that case you should add a condition that if “wp_get_referer();” is not available it should redirect to the default Shop page?
Hi Rodolfo,
Really it’s very nice way to CONTINUE SHIPPING option. But it’s redirect to previous click page only.
“Continue Shopping” button on the Single Product Page, In the previous code if you click Add to cart button after then click to continue shopping button it’s not working properly.
I had modified herf line.
add_action( 'woocommerce_single_product_summary', 'bbloomer_continue_shopping_button', 31 );
function bbloomer_continue_shopping_button() {
if ( wp_get_referer() ) echo '<a class="button continue" href="./shop">Continue Shopping</a>';
}
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!
This sort of works 🙂 It places an appropriate button on the product page ok, but it disappears if you press “Add to Cart”. Ideally for me that should be the other way around so that the button appears after pressing add to cart.. Even better if that can be placed in the success message.
I see, I guess I use it in combination with “Redirect to cart upon add to cart” so the problem is not happening in such case
This is not working now – is there an update to this snippet that will work with the latest version of WooCommerce? Thanks!
Hello Anji, was it working before for you?
Hi, it was working fine until I added a side bar and the “continue shopping” button no longer appears. can you help!?
I am using the free Astra theme.
Hi Sabrina, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
the same problem, “continue shopping” button no longer appears.
Same theme? Have you tried with a different one already?
Hi Rodolfo,
I have your snippet working.
I would like to display that button just at the right of “Add to cart”, instead of below it.
Thanks.
Just need some custom CSS there
If you are looking for a cart button redirecting to the last product included in the cart, check out this:
add_action( 'woocommerce_proceed_to_checkout', 'bbloomer_continue_shopping_button', 31 ); function bbloomer_continue_shopping_button() { $items = WC()->cart->get_cart(); $product_id = end($items)['data']->get_id(); echo '<a class="button continue" href="'.get_permalink($product_id).'">Continue Shopping</a>'; }You can thank me later 🙂
Thank you Chris!
Hey Chris,
I’m loving this code, but would you know how to get it to go back to the category page for the last product added, instead of back to the product itself?
I can’t work it out – it would be super amazing if you could!
Thanks 🙂
Hi Rodolfo, thanks for your helpful advice.
Do you think it is possible to have two separate buttons that do:
1) add to the cart without redirecting to the cashier (they continue in the catalog)
2) add to cart with automatic redirection to the cashier
Thanks for the help you can give me
Gabriele
Hey Gabriele, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Made some corrections 🙂
Now it goes back to previous page or after adding to cart to a shop page
add_action( 'woocommerce_single_product_summary', 'bbloomer_continue_shopping_button', 31 ); function bbloomer_continue_shopping_button() { if ( wp_get_referer() ) echo '<a href="' . wp_get_referer() . '" rel="nofollow">Continue Shopping</a>'; else echo '<a href="./shop" rel="nofollow">Continue Shopping</a>'; }Thanks!
Hi Rodolfo,
Thank you for this post. However, the code snippet dsplays only the text link. Is it possible to make it a css styled button ?
Cheers
Of course – just add a class to its HTML
Hi, I’m using Flatsome and Flatsome child-theme. All my products are with several variants. On my site this snippet won’t work, unfortunately.
Thanks for all the work you put into all the snippets. Returning to your site very often to make sure I didn’t miss anything fun.
Best regards
Jan-Ove Sweden
Hi Jan, 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!
R
Hello! I want to use this code but with a different hook? I want the button to appear only after something has been added to the cart? Also, through messing around it seems if the user goes to cart and then uses the product link to go back to view product when you click the “continue shopping” button it will direct you back to the cart instead of the shop page!
Hello Jennifer, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi Rodolfo
I have placed your code on my code snippet plugin, like this:
add_action( 'woocommerce_after_cart_table', 'bbloomer_continue_shopping_button', 31 ); function aby_continue_shopping_button() { if ( wp_get_referer() ) echo '<a href="' . wp_get_referer() . '" rel="nofollow">Continue Shopping</a>'; }but returns the following error:
Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘bbloomer_continue_shopping_button’ not found or invalid function name in… /public_html/wp-includes/class-wp-hook.php on line 286
Function name is wrong 🙂
Yeah, thank you, thank you!!!
I modified it removing the get_referrer part because I wanted it to show up even after the “View Cart” button appears.
Excellent!
This is exactly what I’m trying to do but am a complete amateur when it comes to hooks. I’ve been struggling trying to figure out how to accomplish having the button display even after an item has been added to the cart… would you be willing to share with me how you modified the code? Thank you!
I can see the Continue Shopping button fine when hitting a single product page from the store front but if I just change the product name within the browser URL then it vanishes! Any ideas? The code is added to the child theme functions.php file.
Hey Wayne, thanks for your comment! If you type in the URL, that URL will be counted as first visit to the website, so there is no “previous” page. Hope this helps 🙂
If you want to add continue buttons both on single porduct page and cart how do I do that?
It does not work to add these code in functions.php
add_action( 'woocommerce_single_product_summary', 'bbloomer_continue_shopping_button', 31 ); function bbloomer_continue_shopping_button() { if ( wp_get_referer() ) echo '<a class="button continue" href="./shop">Continue Shopping</a>'; } add_action( 'woocommerce_after_cart_table', 'bbloomer_continue_shopping_button', 31 ); function bbloomer_continue_shopping_button() { if ( wp_get_referer() ) echo '<a class="button continue" href="./shop">Continue Shopping</a>'; }Hey Pelle, thanks for your comment! you can’t re-declare a function with the same name, try changing that 🙂
How do you mean with change name on function, which parameter must I change?
You can’t use “bbloomer_continue_shopping_button” twice, rename the second one to something else 🙂
Thanks Rodolfo! it works fine!
🙂
Hi Rodolfo!
Nice snippet! I just saw a friend’s website that had that option and remembered that I always thought it was a good idea! A little Google search and it brings me right back to your site. The best place for snippets!
Just wondering though (I’m not a developer)… I see bbloomer in the code. Can this be changed to anything we want? Can it be removed completely? My curiosity is wondering why it’s there 😀
Hey Paul, thanks 🙂 Yes, that’s just the name I gave to the custom function, you can change it to anything you like.
hey Rodolfo thanks for the code. have been using a modified version to add two buttons once the product is added to the cart BUT the person im helping needs the buttons removed once you navigate away from the page of the product you just added to the cart; i.e. on any other page. Or maybe the correct term is on any single product page where that product does not appear in the cart? pleeeeease help asap- have spent hours and hours and i just dont know enough. THANK YOU!!!
Shane, 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
Cant you please point me in the right direction? What woocmmerce tag / function to use? Im not asking you to write it but maybe if I actually new what to search for I could make it work…?
I can’t, sorry 🙂
Hi there,
I’m a PHP newbie. Is there a way I can add this piece of code just under the “this product has been added to your cart” success message?
Thanks very much in advance!
Mick, thanks so much for your comment! This should help > https://businessbloomer.com/woocommerce-remove-product-successfully-added-cart-message/
Hi,
Thank you for this post, it’s a great one for me. But I have a little problem. The Continue button is above Add button, can you help me to move it a little bit down ?
Eusebiu, thanks for your comment! Yes you can achieve that via CSS. Unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R
How would I add the “continue shopping” button to the shopping cart page /shopping_cart/ ?
Hey Ilana, thanks for your comment! You will need to change “hook”. Instead of “woocommerce_single_product_summary” you should use one of the Cart hooks
Hello,
Thank you for sharing this. I was wondering if you could please share a snippet for adding this button to the thank you page?
I’m currently running a focused checkout to minimize distraction but unfortunately it doesn’t give the customer an option to keep shopping.
Thank you in advance
Hey Jonee, thanks for your comment! This tutorial will show you how to add content to the thank you page: https://businessbloomer.com/customize-woocommerce-thankyou-page-tutorial/. Hope this helps
hello
The ‘continue shopping’ button disappears when the view cart message is displayed.
How can we keep the button in place when view cart message is displayed?
thanks.
Phil, thanks for your comment! Not sure, can you provide a screenshot?
This happens to me as well. Once you click add to cart, the continue shopping button disappears. Any suggestions?
When you simply display single product page, button appears as it should. After adding product to basket, button is no longer added.
I fixed this by removing
and just going with
in the function.
The reason why it was disappearing is because clicking on the add to cart button refreshes the page, and if the previous page was the same page you’re on,
will return false.
Thank you so much! This works perfectly – LOVE it!
Thank you Lechelle 🙂
This is great and exactly what I was looking for, however,
Button with continue shopping appears on single product screen but when the item gets added to the cart the page refreshes with the added to cart message and then continue shopping button disappears.
any ideas, anyone else has that issue.
Mark, thanks for your comment! Maybe in that case you should add a condition that if “wp_get_referer();” is not available it should redirect to the default Shop page?
Great this is really help full
🙂
Hi Rodolfo,
Really it’s very nice way to CONTINUE SHIPPING option. But it’s redirect to previous click page only.
“Continue Shopping” button on the Single Product Page, In the previous code if you click Add to cart button after then click to continue shopping button it’s not working properly.
I had modified herf line.
add_action( 'woocommerce_single_product_summary', 'bbloomer_continue_shopping_button', 31 ); function bbloomer_continue_shopping_button() { if ( wp_get_referer() ) echo '<a class="button continue" href="./shop">Continue Shopping</a>'; }Continue Shopping button working good.
Thanks
Murthi
Thank you Murthi 🙂
Hi Murthi,
May I suggest to use
get_permalink( woocommerce_get_page_id( ‘shop’ )
instead a fixed permalink as ./shop
Greetings.
Cool!
Works like magic! Thanks.
Thank you so much Emmanuel 🙂