How to Remove Add to Cart Button in WooCommerce? (4 most efficient ways)

Are you looking to transform your WooCommerce store into a catalog-only showcase or manage out-of-stock products without confusing your customers? Removing the “Add to Cart” button can be a strategic move.

In a WooCommerce store, the Add to Cart button is frequently requested to be removed, disabled, or replaced. The requirement is extremely useful if you would like to change your store’s mode from catalog to maintenance mode, or if you would like to provide role-based access to your products.

Here, we will discuss how you can efficiently customize the Add to Cart button in WooCommerce. Choosing the right WooCommerce hosting can improve performance, enhance security, and increase the speed of your website.

Table of Contents

Why do We Need to Remove Add to Cart Button?

You can remove the “Add to Cart” button from your WooCommerce store for several strategic reasons. Here are a few reasons why you may want to consider removing the add to cart button:

Feature a catalog
If your WooCommerce store is primarily used as a product catalog without the intention of selling items directly online, removing the “Add to Cart” button can enhance the browsing experience. This approach is ideal for manufacturers, distributors, or businesses that want to display their product range without facilitating direct purchases.
Enable Pre-Orders or Backorders
In scenarios where products are not immediately available for purchase but will be available in the future, removing the “Add to Cart” button can prevent customers from attempting to buy items prematurely. This approach is often used for pre-orders or backorders, allowing you to generate interest without frustrating customers with unavailable products.
Highlight Out-of-Stock Items
For stores that have fluctuating inventory, removing the “Add to Cart” button for out-of-stock items can help manage customer expectations and avoid potential dissatisfaction. This method ensures that customers are aware of product availability and can make informed purchasing decisions.
Provide Custom Quotes
Businesses that deal in customized products or services often require personalized quotes instead of fixed pricing. By removing the “Add to Cart” button, you can encourage customers to contact you directly for a quote, facilitating a more personalized sales process.
Focus on Inquiries and Leads
If your business model revolves around generating inquiries and leads rather than direct online sales, removing the “Add to Cart” button can drive customers to use contact forms or request more information. This method is particularly useful for high-value or complex products that require detailed customer interactions.
Transition to a Different Sales Model
For businesses transitioning from an online sales model to a different strategy, such as in-person sales or a subscription-based model, removing the “Add to Cart” button can help guide customers toward the new approach. This adjustment can streamline the user experience and align it with your business objectives.

Leveraging a Code Snippet to Remove the Add to Cart Button

This method involves adding a code snippet to your theme’s functions.php file. While this approach offers precise control, it’s essential to have a child theme in place to avoid overriding core functionalities during theme updates. Let’s take a closer look at the code snippet for removing the Add to Cart button.

Add the following code snippet in the Theme Functions (function.php) file of your currently activated theme.

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 above code snippet will remove Add to Cart button on the shop page as well as the product pages.

Adding a code snippet is the most common method of removing the Add to Cart button completely, but it may not be the best solution since it would lead to an endpoint, which would negatively impact customer retention. Whenever you need to revert to the default state, you must remove the code snippet. Consider instead customizing the Add to Cart button to give your users a better shopping experience.

If you are looking for an easy option to hide the Add to Cart button, you can use the ELEX WooCommerce Catalog Mode plugin!

It is possible to do much more than just remove/hide the Add to Cart button completely from your store with the ELEX WooCommerce Catalog Mode, Wholesale & Role Based Pricing plugin, and ELEX WooCommerce Request a Quote plugin.

Let’s check it out!

4 Efficient Ways to Remove Add to Cart Button in WooCommerce

By employing ELEX WooCommerce Catalog Mode, Wholesale & Role-Based Pricing plugin and ELEX WooCommerce Request a Quote plugin you can customize the Add to Cart button as outlined below:

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 the Add to Cart button

Remove Add to Cart button based on User Roles

Implying this method, the Add to Cart button can be removed for certain user roles. By selecting the user roles where the button should not be displayed, you can hide the button for those roles.

The following image shows a screenshot of a demo store’s sample product page:

In this case, let’s say we want to remove the Add to Cart button for Editors and Subscribers. The settings for the plugin should be configured as follows:

As shown in the screenshot below, when the specified users login to your store, your interface will be updated accordingly:

Remove Add to Cart button based on Specific products

In some cases, you might want to remove the “Add to Cart” button for specific products in your WooCommerce store. This can be particularly useful if you have certain items that are only available for viewing, need special handling, or are not currently for sale. Therefore, you are able to remove the Add to Cart button only for specific items in such cases.

Here is a screenshot of the demo store’s shop page:

Let us remove Add to Cart button for the product

Configuring the plugin settings is as follows:

Click on the product page to edit it.
You can click the Role-Based Pricing tab by scrolling down to the product data metabox.
There are two ways to remove the Add to Cart button at the product level with the plugin:
- For Unregistered users (Guests)
- Based on the user role
Let’s enable both of these options for demonstration purposes. As shown in the screenshot below, unregistered users and the editor role no longer have the Add to Cart button.

When an unregistered user or an editor logs into the demo store, the shop page will be displayed as shown in the below screenshot:

Replace the Add the Cart button

Let’s say you have a website that sells product ‘X’, and you also sell the same product on Amazon.com. Your website can offer your customers the option to purchase the product from the same website (link on the product page) or from an external website (link on the shop page).

By using the ELEX WooCommerce Catalog Mode, Wholesale & Role Based Pricing plugin, you can customize the Add to Cart button text on product and shop pages. A redirection to an external website would be made to the product’s shop page.

Below is a screenshot showing our demo store’s default shop interface:

Here’s how you should configure the plugin settings:

Go to the Role-Based Pricing tab.
Find the Replace Add to Cart settings by scrolling down.
Choose the user roles you want to apply this setup to. For this example, I selected the Customer user role.
In the Replace Button Text (Product Page) setting, type “Buy Now!”. Clicking this button will add the product to the cart.
In the Replace Button Text (Shop Page) setting, type “Buy from Sample Store” and enter the external URL of the product in the Replace URL (Shop Page) setting. This will redirect to the same product in the Sample Store. Below are the plugin settings to be configured.

Moving to the shop page, the updated Add to Cart text for all products will be displayed as shown in the screenshot below:

When a product is viewed, the updated text for the Add to Cart button is shown in the below screenshot:

Hide Add to Cart Button with ELEX WooCommerce Request a Quote Plugin

You can use the ELEX WooCommerce Request a Quote Plugin to hide the ‘Add to Cart’ button for specific products and user roles. This plugin allows you to add a ‘Request a Quote’ option alongside the ‘Add to Cart’ button on your store, making it convenient for both customers and retailers or wholesalers.

After installing and activating the plugin, navigate to the ‘Hide Add to Cart’ tab. From there, you can choose to hide the ‘Add to Cart’ option from the product pages and shop page separately. If you’ve hidden the ‘Add to Cart’ option for all products in your store, you can still display the ‘Add to Cart’ button for specific products based on their category, name, and tags. Additionally, you can specify user roles that can access the ‘Add to Cart’ button.

Check the below screenshot:

Check a screenshot of the shop page which hides ‘Add to Cart’ for selected products:

Last Shot

Removing the “Add to Cart” button in your WooCommerce store is a relatively simple task that can be customized to fit your specific requirements. You have several options to achieve this, including using a plugin, implementing custom code, modifying theme settings, or applying CSS styles.

Modifying theme settings is also a viable option for removing the “Add to Cart” button. Many WooCommerce themes provide built-in options to control the display of buttons and other elements, making it relatively straightforward to make the desired adjustments without delving into code or installing additional plugins.

Furthermore, applying CSS styles can be an effective way to hide or modify the appearance of the “Add to Cart” button. By targeting the specific elements of the button through CSS, you can achieve a tailored look and feel that aligns with your store’s branding and design.

You can also watch the below video to enable WooCommerce Catalog Mode with our ELEX WooCommerce Catalog Mode Plugin.

You can also check out other WooCommerce and WordPress plugins in ELEX.

FAQ’S

Is it possible to hide the ‘Add to Cart’ button on a product page?
If you enable the plugin settings, you will be able to hide the ‘Add to Cart’ button from the product page.
Should some User Roles have different prices?
You can assign individual prices to products based on the user roles in the plugin settings. When you edit product settings, you’ll be given the option to enter a different price for each role.
Can certain user roles hide prices in a certain category?
It’s possible to hide the price per product for user roles, but not per category.
Does this plugin allow me to add/remove user roles?
Yes, you can create new User Roles and remove existing User Roles. But you should not remove default roles such as admin, shop manager, etc.
Is it possible to hide/show tax based on User Roles?
Yes, you can hide/show tax based on the user role, or you can exclude tax from certain user roles. In the plugin’s Tax option settings, you must create a zero tax class and assign it to the user role.