Are you feeling frustrated while searching for a quick solution to hide the “Add to Cart” button on your WooCommerce store? Don’t worry; I’ll guide you through the process, and you’ll have it done in just a few minutes.
Firstly, you need to decide whether you want to hide the WooCommerce “Add to Cart” button by using a code snippet or by employing my ready-made solution, which I’ve developed to assist numerous store owners like you.
Code Snippet in Your Theme
The ideal way to hide the “Add to Cart” button is by adding a code snippet to your WooCommerce theme, preferably the child theme on your site.
If you don’t have a child theme yet, refer to this guide on how to create a WooCommerce child theme to get started quickly.
With the child theme in place, follow the steps below to successfully remove the “Add to Cart” button from your store on both the shop and single product pages.
Woocommerce Hide Add to Cart Button on Both Shop and Single Product
Add the following code snippet to your functions.php file in the child theme:
// Add code snippet to hide WooCommerce add to cart button
add_action('wp', 'hide_add_to_cart_button');
function hide_add_to_cart_button() {
// Replace YOUR_CUSTOM_CONDITION with the actual condition you want to use
if (YOUR_CUSTOM_CONDITION) {
remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10);
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30);
}
}
Explanation of the Code:
- add_action
('wp', 'hide_add_to_cart_button'):This hook ensures that the function hide_add_to_cart_button is executed when WordPress initializes. - function
hide_add_to_cart_button() { ... }:Defines the function to hide the “Add to Cart” button. - Inside the function:
- if
(YOUR_CUSTOM_CONDITION) { ... }:Checks the specified condition before proceeding with hiding the button.
remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10);: - Removes the “Add to Cart” button from the shop page remove_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_add_to_cart’, 30);: Removes the “Add to Cart” button from the single product page.
Why Use a WooCommerce Child Theme
Creating a child theme for your WooCommerce store is highly beneficial. Here are some compelling reasons why you should consider it:
- Preserve Your Customizations: A child theme ensures that your customizations remain intact, even when the parent theme is updated.
- Easy Maintenance: With a child theme, you can make changes and updates without affecting the main theme, making maintenance hassle-free.
- Theme Updates Won’t Override Your Changes: Any updates to the parent theme won’t override the modifications made in the child theme, providing stability to your customizations.
- Safe Testing Ground: Experiment with new features and modifications in a child theme without impacting your live site.
- Professionalism: Using a child theme is a recommended practice in web development, demonstrating a professional approach to theme customization.
Why Use the Code Snippet
- If you are new to editing the code on a WordPress site, you may break your site.
- If you have many changes, code snippets tend to be cumbersome to update since some may require an update with every WooCommerce software update. (If the hooks or filters you are using change, the code snippet may no longer work.)
- Code snippets may create vulnerability to your website security since they are from different sources (third-party developers).
- Code snippets are freely available and with no upfront costs.
- Code snippets can be quick to implement for experienced developers who can customize them further.
What is the Alternative Solution
While code snippets do great work and get the job done quickly, they have some drawbacks, and that's the reason plugins exist.
Plugins are ideally organized code snippets that are scalable, dependable, and professionally written to help you keep your site safe and customize it with ease.
To make your work easier, I have put together my 10+ years of experience into a highly useful WooCommerce product (Whideit) that is geared toward hiding all unwanted elements on your store without wasting time.
- Using Hideit is easy, and you can simply click a button to immediately disable the Add to Cart button along with the price and several other features you may want to hide from users.
- I specifically designed it to help with my day-to-day work on client projects. I found it very useful and decided to share it with the WooCommerce community.
- If you are interested, you can find it here. As one of my blog readers, do not forget to subscribe to my mailing list using the form below so that you can CLAIM your 20% OFF introductory discount for WHIDEIT.
- I also occasionally send important updates in WooCommerce to help you update or keep your site up and running effectively and safely. You can also reach out if you need any further customization or help with hiding any feature on your WooCommerce store.
Conclusion
To wrap this blog post, I shared the way to hide add to cart button on your WooCommerce store both on the single product page and the shop page. The code snippets I shared should be added to the child theme of your theme to avoid breaking your site or losing the changes when your theme is updated in the future.
If you enjoyed this article or found it useful, you will also like these other articles that are useful guides for customizing your WooCommerce store: