WooCommerce is known as one of the most popular eCommerce solutions for WordPress. But most of the time, site owners don’t know how to remove add to cart button WooCommerce. For this reason, they cannot provide the product to their client which is out of stock or they don’t want to show.
There are millions of articles available in the internet with the title “how to remove add to cart button in WooCommerce” but none of them are fully worthy of applying. Therefore I have decided to share the best possible ways of how to remove add to cart button in WooCommerce and additionally how to customize Add to cart option.
Hope after reading this post you will be able to disable add to cart button WooCommerce for your site on your own.
Process to Remove Add to Cart Button WooCommerce
There are several ways to remove add to cart button WooCommerce from your site. You can do it using two lines of code, via plugin or by using the Elementor page builder. Let’s do it and hide add to cart button WooCommerce.
Using code
This is the most simplest procedure to disable add to cart button WooCommerce from your site.
- Open file manager from your cPanel and navigate to /public_html/**site_name**/wp-content/themes/**theme_name**
- Now add the following code to the function.php file.
remove_action('WooCommerce_after_shop_loop_item', 'WooCommerce_template_loop_add_to_cart');
remove_action('WooCommerce_single_product_summary', 'WooCommerce_template_single_add_to_cart', 20);
- The snippet above will remove add to cart button WooCommerce from your site in shop pages as well as product pages.
Wait… Is it the solution you have been looking for?
By using a code snippet to hide add to cart button WooCommerce is the most common method, but it might not be the optimal solution. It will completely remove the button forever, and to roll back to the default state you need to remove code every time.
This can be a serious pain to ass. Instead of adding code you can try plugins to customize or disable add to cart button WooCommerce on specific items.
Using Plugins
There are several plugins available in the plugins directory to set options like “WooCommerce disable cart and checkout”, “WooCommerce remove add to cart button”, etc. Amon those plugins, “ELEX WooCommerce Catalog Mode, Wholesale & Role Based Pricing” plugin and “Remove Add to Cart WooCommerce” plugin is very much popular.
I am providing a guide to use these plugins.
ELEX WooCommerce Catalog Mode, Wholesale & Role Based Pricing Plugin
Elex plugin allows you to customize add to cart button in three different ways.
1. Remove Add to Cart Button WooCommerce Based on User Roles: With this method, you can remove add to cart button WooCommerce for specific user groups. Let’s assume you want to hide add to cart button WooCommerce for “Subscriber” and “Editor” user groups.
- Go to the Plugin settings.
- Navigate to the Role-Based Pricing tab.
- The very first setting you will notice is Remove add to cart button Woocommerce. Select user groups for which you want to remove or hide add to cart button WooCommerce. In my case, Subscriber and editor.
- Additionally, you can add placeholder text.
- Now the specified user groups will not see the add to cart button.
2. Disable Add to Cart Button WooCommerce Based on Specific Products: Have you ever faced the situation where you need to show products but don’t want to accept orders for them? The product for which you don’t want to accept order may have an issue or out of the stock. In such cases you can disable add to cart button for specific products.
To do it
- Go to the Plugin settings.
- Scroll down to the product data metabox and select “Role Based Pricing”.
- This plugin offers you two options – for unregistered users and based on user role.
- Now I am removing Add to cart button for both unregistered users and Editors.
- Now whenever a unregistered user or editor enters the demo store, the page will be shown as below.
3. Replace Add to Cart Button: Posit you want to sell specific product from an external website. What you will do?
The Elex plugin will allow you to replace the add to cart button text and allow you to set external link for the product.
To do this
- Navigate to Plugin settings > Role Based Pricing tab.
- Scroll down and select “Replace Add to cart” settings.
- Select the user group for which you want to configure this setup.
- In the “Replace Button Text (Product Page)” field place your text. I have entered “Buy Now!”.
- In the “Replace Button Text (Shop Page)” enter the external URL that you want to place.
- Moving the shop page and updating the text will display as below.
- When a product from your site is viewed the updated text for Add to Cart button will show as below.
If you have misjudged something, then check out the video below.
Remove Add to Cart WooCommerce Plugin
Using this plugin is very simple. To remove add to cart button WooCommerce with Remove add to cart WooCommerce plugins,
- Install plugin from WordPress plugin directory and activate it.
- Now navigate to Products and click on the edit button of the item for which you want to remove add to cart button.
- Scroll down and click on “Remove Cart Button”.
- From Alter Add to Cart Button, select “Remove Button”.
And your button will be removed. If you need to visualize then check the video below.
Using Elementor Page Builder
If you want more customizability and all in one solution then you can use Elementor page builder. To remove add to cart button WooCommerce, you need to have WooCommerce and Elementor pro version in your WordPress website. To remove or hide add to cart button WooCommerce
- First, open your product page created with WooCommerce and elementor.
- On the below of your products add element named “add to cart button”.
- Now remove “add to cart button” from the products, for which you want to hide add to cart button.
Optionally you can fully customize the button in the way you want like rename “Add to Cart” text to “ Buy Now” or something else that you prefer.
Just customize in the way you want from the element setting located on the left. If you wish you can entirely change your product page by adding an additional plugin called Widgetkit. It will not only help you with your WooCommerce page but also help you build your entire site.
Preferred Way
So I think now you are a bit confused to choose the right tool for you. Am I right? Let’s clear confusion. If you have no previous idea then it is best to choose Elex plugin as it provides an easy solution. And if you are using any page builder plugin then go for Elementor
Conclusion
Let me ask you a question, do you need to search with the term “ how to remove add to cart button in WooCommerce” anymore? Hope not. If you face any problem or have any queries as freely in the comment box. I will be happy to answer.
