In this tutorial, I'll show you how to hide/remove the Add to Cart button in WooCommerce.
There are two ways to do this, either we can use a custom code or a plugin to disable the button. We always strive to make your work easier, so, we'll be using a plugin to achieve this.
WooCommerce is the most used eCommerce platform and that lets us seamlessly create an online store whether that is to cater to B2C or B2B customers.
On This Page
Why Remove Add to Cart Button In WooCommerce?
There could be several reasons or situations when you might want to remove the Add to Cart button. It is one of the best ways to stop buyers from purchasing the product and take other action, such as sending a price quote, and more.
There are also multiple benefits of removing the Add to Cart button from your WooCommerce store. For instance, you can ask buyers to create an account on your eCommerce store to add the products to the shopping cart.
Besides, there could be many reasons. Have a look at each explanation below.
- The first reason could be when you are using WooCommerce only to build a product catalog.
- Another reason could be when your product runs out of stock or is not available to buy yet.
- The third reason could be when you want to restrict specific user roles from adding the products to the cart.
- The last reason could be when you want buyers to take specific actions such as booking a consultation call.
These are some instances when you might want to remove or hide the Add to Cart button from your WooCommerce store products. Your reason could also be different from the reason as mentioned above. Let's move to the next section and know the ways to hide or disable the Add to Cart button.
4 Ways to Remove Add to Cart Button
There are four ways to remove the Add to Cart button from your WooCommerce store. Request A Quote plugin by Woosuite can help you do the four things.
- Remove Add to Cart button based on User Roles
- Remove Add to Cart button based on Specific products
- Replace the Add the Cart button
- Hide Add to Cart button
These are the four ways to remove the Add to Cart button from your WooCommerce store products or product catalog. So, read the following section to figure out how to remove the Add to Cart button from your WooCommerce store.
How to Hide/Remove Add to Cart Button In WooCommerce
In this section, we will show you how to remove the Add to Cart button from your WooCommerce store. To carry out this whole tutorial, we will be using the Request A Quote Plugin by Woosuite. This plugin will help us remove the Add to Cart button from our WooCommerce store products in a few easy steps.
Step 1. Install and Activate the Request A Quote Plugin
Note: You can skip this step if you have already installed and activated the Request A Quote Plugin.
To install the Request A Quote Plugin, we will need to install the Woosuite Core plugin and activate the license. So, we have created a Quick Start Guide for you to figure out how to install and activate the Restriction Rules plugin. The Quick Start Guide will help you install and activate the plugin and its license. So, click here to check out the Quick Start Guide.
Step 2. Remove the Add to Cart Button
We will finally learn to remove the Add to Cart button in this section.
Search for the Woosuite option in the WordPress tool menu. Hover your mouse arrow to Woosuite and look for the Addons section. After that, click on the Addons option. search for the Request A Quote option in the Addons section and click on it. Now, it will redirect you to a new page and show some new options.
We will now start creating a new rule to remove the Add to Cart button. You will see a new button called Add New Rule on the next screen. In the All Rule section, click on Add New Rule.
After clicking on Add New Rule, you will see some new options on it. We will now start configuring them to hide the Add to Cart button.
2.1 Title: Write the title you want to give to your new rule in this field. This won’t be visible to visitors. So, name it according to you. In this tutorial, I want to hide the Add to Cart button for guest users. So, I’m calling it ‘Hide Add to Cart for Not Logged In Users.’
2.2 Rule Type: Select the option to Quote Rule for Guest User. I’m selecting this because I want to hide this button from guest users only.
2.3 Rule Priority: Set the Rule Priority to 10. The lower you will set the higher it will be prioritized.
2.4 Apply on All Products: If you want to apply this on all products, then click on the checkbox to enable it. Otherwise, choose the product manually on which you wish to apply this rule.
2.5 Hide Prices: I don’t want to hide prices, so I will choose No from the dropdown. If you want to hide prices along with the Add to Cart button, choose Yes from the menu.
2.6 Hide Price Text (Optional): If you have enabled the hide prices option, then this is for you. In this field, enter the text you want to show on the place of the price. You can enter what you want. You can enter text like ‘Price Is Hidden. Please Log In to See Prices.’
2.7 Hide Add to Cart Button: You will see four different options in the dropdown menu. I’ll select Replace Add to Cart Button with a Quote Button option from the dropdown menu. You can select according to your preferences.
2.8 Custom Button Label: If you have chosen the Replace Add to Cart Button with a Custom button, then this option is for you. In this text box, you can label your custom button.
After making all the changes, click on the Publish button.
Step 3. View and Approve the Submitted Quotes
Request A Quote plugin allows you to see and approve the received price quotes. You can quickly view and approve those requests with a few clicks. To do this, follow the given instructions.
Head over to your Request A Quote settings, and go to the Submitted Quotes section. In the Submitted Quotes section, you will see all the quotes submitted by users. You will also see the Customer Name, Customer Email, and the Date.
Step 4. Send Email to Users
We will figure out how to send an email when a user submits a price quote in this setting. It means, when a customer submits a quote, they will receive an email.
Head over to your Request a Quote plugin settings, and look for the Settings section.
In the Settings section, you will have different options. Let’s make some changes to them.
4.1 Quote Basket Placement: This option will add a new option called Mini Basket, by which your customers will be able to view their submitted quotes. If you want to enable this feature, you can select the menu type from the box.
4.2 Email Subject: After submitting a quote, users will receive an email. Here in this field, you can enter the subject title for the email.
4.3 Email Response Text: In this text area, enter the content the email will include.
4.4 Send Email to Customers: You can enable this if you want to send an email to a customer after submitting a Quote.
Remove Add to Cart Button Programmatically
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', 30 );
Remove Add to Cart Button via CSS
/* Remove add to cart on shop page*/
.add_to_cart_button {
display:none;
}
/* Remove add to cart on Product page*/
.single_add_to_cart_button {
display:none;
}Final Results
We have now saved all the settings, and it's time to check whether our settings are working fine or not. I have tried opening the Shop page as a guest user, and everything seems perfect. As you can see in the below image, the Add to Cart button is not there.
