How to Turn Off the Annoying “Return to Shop” Button in WooCommerce
Alright, you’ve got your WooCommerce store up and running. Awesome! But maybe you’ve noticed a little button lurking around, the “Return to Shop” button, that’s just not working for you. Maybe it’s confusing your customers, leading them away from checkout, or clashing with Discover insights on How To Hide Price Range In Woocommerce your carefully curated design. Whatever the reason, you want it gone.
This guide will walk you through how to turn off that “Return to Shop” button in WooCommerce. Don’t worry, it’s easier than you think! We’ll explore a couple of methods, so you can choose the one that fits your comfort level. No coding experience is absolutely necessary for one of the methods, but we’ll also show you how to do it with code if you’re feeling adventurous.
Why Turn Off the “Return to Shop” Button?
Before we dive in, let’s quickly understand why you might want to do this. The “Return to Shop” button is usually displayed on:
- Empty Cart Page: When a customer’s cart is empty.
- Order Received Page: After a successful order has been placed.
- Customer Confusion: On the Order Received page, customers might think they need to go back to the shop to *complete* their order, even though it’s already been placed. Like receiving a confirmation email and then being told to check your inbox again! It doesn’t make sense.
- Conversion Optimization: After placing an order, you might prefer to direct customers to related products, thank you pages, or loyalty programs, rather than just sending them back to the general shop page. Think about it: you’ve captured their interest, why not offer them more of what they love?
- Design Check out this post: How To Write Woocommerce Plugin Aesthetics: Maybe the button simply clashes with your overall website design, and you prefer a cleaner look. Think of it like wearing a belt with suspenders, you don’t want to overdo it.
Here’s why some store owners find it less than ideal:
Method 1: Using a Plugin (The Easiest Way)
The simplest and most newbie-friendly way to remove the “Return to Shop” button is using a plugin. There are several free plugins available that can do this for you. We’ll use a popular and lightweight one called “WooCommerce Cart Abandonment Recovery”.
Here’s how:
1. Install and Activate the Plugin: Go to your WordPress dashboard, then `Plugins` -> `Add New`. Search for “WooCommerce Cart Abandonment Recovery”. Install and activate the plugin by CartFlows.
2. Configure the Plugin: After activation, you’ll see “CartFlows” in your wordpress menu.
3. Go to CartFlows -> Settings: The plugin has many great features, but for our current purpose, navigate to its settings panel.
4. Disable Return to Shop Button: Find the setting labelled “Remove Return to Shop button”. Toggle the option to disable.
5. Save Changes: Click on ‘Save Changes’.
That’s it! Now check your empty cart page and order received page. The “Return to Shop” button should be gone. This plugin offers several other useful features for cart abandonment recovery, so feel free to explore those as well!
Real-Life Example: Imagine you sell custom t-shirts. After a customer places an order, you might want to direct them to a page showcasing other custom designs they might like, encouraging them to order again. Removing the “Return to Shop” button and redirecting them allows you to control that flow.
Method 2: Using Code (For the Adventurous)
If you’re comfortable adding code snippets to your website, you can remove the “Return to Shop” button using a filter. This method is slightly more advanced, but it offers greater flexibility.
Important: Before making any changes to your theme’s functions.php file, it’s highly recommended to create a child theme. This ensures that your customizations won’t be overwritten when your theme is updated.
Here’s how to do it:
1. Access Your Theme’s `functions.php` File: You can access this file via FTP or through the WordPress theme editor (Appearance -> Theme File Editor, then select “Theme Functions” from the right-hand menu).
2. Add the Following Code: Paste the following code snippet at the end of your `functions.php` file:
/**
add_filter( ‘woocommerce_return_to_shop_redirect’, ‘bbloomer_hide_return_shop_url’ );
function bbloomer_hide_return_shop_url() {
return home_url();
}
3. Save Changes: Save the `functions.php` file.
Explanation:
- `remove_action( ‘woocommerce_cart_is_empty’, ‘woocommerce_output_content_wrapper_start’, 10 );` and `remove_action( ‘woocommerce_cart_is_empty’, ‘woocommerce_output_content_wrapper_end’, 10 );`: These lines remove the default WooCommerce content wrapper.
- `remove_action( ‘woocommerce_cart_is_empty’, ‘woocommerce_maybe_show_known_coupons’, 20 );`: This line prevents showing any known coupons on empty cart.
- `remove_action( ‘woocommerce_cart_is_empty’, ‘woocommerce_cart_reset_template’, 30 );`: Removes the content of the empty cart, including the ‘Return to Shop’ button.
- `add_filter( ‘woocommerce_return_to_shop_redirect’, ‘bbloomer_hide_return_shop_url’ );`: This uses a filter to change the URL to the home page.
Customization:
- You can change `home_url()` to any URL you want the customer to be redirected to. For example, you could redirect them to a specific category page: `return get_permalink( get_page_by_path( ‘your-category-slug’ ) );` Replace `”your-category-slug”` with the actual slug of your desired category page.
Real-Life Example: If you sell handmade jewelry, you might want to redirect customers from the empty cart to a page showcasing your latest collection. Using the code method, you could precisely control where they’re sent.
Method 3: CSS (Hiding the Button)
While not technically *removing* the button, CSS can effectively hide it from view. This is a good option if you want a quick and easy fix without modifying core functionality.
1. Access Your Theme’s Custom CSS or `style.css`: Most themes have a section in the Customizer (Appearance -> Customize) where you can add custom CSS. Alternatively, you can edit your theme’s `style.css` file (again, using a child theme is recommended!).
2. Add the Following CSS: Add the following code to your CSS:
.woocommerce-cart .return-to-shop {
display: none !important;
}
.woocommerce-order-details .return-to-shop {
display: none !important;
}
3. Save Changes: Save your CSS changes.
Explanation:
- `display: none !important;`: This CSS property hides the element with the class `return-to-shop`. The `!important` ensures that this rule overrides any other conflicting CSS rules.
Real-Life Example: If you sell digital downloads, the “Return to Shop” button might be less relevant, as customers are unlikely to browse for more products immediately after purchase. Hiding the button with CSS provides a cleaner, more focused user experience.
Testing Your Changes
After implementing any of these methods, be sure to test your changes thoroughly. Check the following pages:
- Empty Cart Page
- Order Received Page
Make sure the “Return to Shop” button is gone, and that customers are being redirected to the correct location (if you’re using the code method with a custom redirect).
Conclusion
Removing the “Return to Shop” button in WooCommerce can be a simple but Read more about How To Make Woocommerce Shop Page Full Width effective way to improve your customer experience and optimize your conversion rates. Choose the method that best suits your technical comfort level and your specific business needs. Whether it’s a plugin, a code snippet, or a bit of CSS, you can customize your WooCommerce store to perfectly reflect your brand and goals. Happy selling!
