WooCommerce-Remove-Add-to-Cart-Button-Banner

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

One of the most sought-after requirements store owners look for is to remove/disable/replace Add to Cart button in their WooCommerce store. This requirement is very useful if you are turning your store into catalog mode, want to provide role-based access to your products or are running your store into maintenance mode.

In this article, we will talk about different ways to efficiently customize the Add to Cart button in WooCommerce. Remember to use the best WooCommerce hosting to improve performance, enhance security and speed up your WooCommerce store. Now let’s talk about the Code snippet to remove Add to Cart button.

Code snippet to remove 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 the Add to Cart button in shop page as well as product pages.

But wait…

Adding a code snippet is the most common method for removing the Add to Cart button completely, and may not be an optimal solution as it would lead to an endpoint, hence affecting your customer retention. Also, you should remove the code snippet every time you need to roll back to its default state. Instead, you should rather consider customizing the Add the Cart button, giving a better shopping experience for your users.

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

Please check out the below video for more details:

With the ELEX WooCommerce Catalog Mode, Wholesale & Role Based Pricing plugin, and ELEX WooCommerce Request a Quote plugin, you can do a lot more than just removing/hiding the Add to Cart button completely from your store.

Let’s check it out.

4 Efficient ways to remove Add to Cart button in WooCommerce

With the ELEX WooCommerce Catalog Mode, Wholesale & Role Based Pricing plugin, and ELEX WooCommerce Request a Quote Plugin, you can customize the Add to Cart button in the following ways:

  1. Remove Add to Cart button based on User Roles
  2. Remove Add to Cart button based on Specific products
  3. Replace the Add the Cart button
  4. Hide Add to Cart button

1. Remove Add to Cart button based on User Roles

With this method, you can remove Add to Cart button for specified user roles. In the plugin settings, you should select user roles for which you choose to hide the button.

Following is a screenshot of the sample product page of a demo store.

WooCommerce Remove Add to Cart | Default Add to Cart button setting

Default Add to Cart button setting

 

Let us say, we want to remove Add to Cart button for Editor and Subscriber user roles.

Here’s how you should configure the plugin settings:

  • Go to Role-Based Pricing tab.
  • The very first setting is to Remove Add to Cart button. Select the user role(s) for which you want to remove the Add to Cart button. In our case, Editor and Subscriber.
  • Additionally, you can enter a placeholder text as shown in the screenshot below.
WooCommerce Remove Add to Cart | Remove Add to Cart button settings

Remove Add to Cart button settings

  • When the specified users login to your store, the updated interface will be as shown in the below screenshot.
WooCommerce Remove Add to Cart | Add to Cart button removed

Add to Cart button removed for Editor and Subscriber

2. Remove Add to Cart button based on Specific products

Ever faced a situation where you need to show the products on your store but do not want to accept orders for them? The product in question may have an issue and is out of stock. Hence, in such cases, you can remove the Add to Cart button for only specific products.

Following is a screenshot of the shop page of a demo store.

WooCommerce Remove Add to Cart | Add to Cart for Specific product

Add to Cart for Specific product

Let us remove Add to Cart button for the product – ‘Woo Hoodie’.

Here’s how you should configure the plugin settings:

  • Open the product page to edit.
  • Scroll down to product data metabox and click on Role-Based Pricing tab.
  • The plugin offers two options for removing the Add to Cart button at product level:
    • For Unregistered users (Guests)
    • Based on user role
  • For demonstration purpose, let us enable both of these options. That is, I am removing the Add to Cart button for unregistered users and Editor user role, as shown in the screenshot below.
WooCommerce Remove Add to Cart | Add to Cart for Specific product settings

Add to Cart for Specific product settings

  • When an unregistered user or an editor logs into the demo store, the shop page will be displayed as shown in the below screenshot.
WooCommerce Remove Add to Cart | Remove Add to Cart for Specific product

Remove Add to Cart for Specific product

3. Replace the Add the Cart button

Suppose you have a website in which you sell a product ‘X’, and you sell the same product in a third-party website like amazon.com as well. You can give options to customers to purchase the product from the same website (link from the product page) or from an external website (link from shop page).

The ELEX WooCommerce Catalog Mode, Wholesale & Role Based Pricing plugin allows you to replace the Add to Cart button text on the product page and shop page. And redirect the shop page link of the product to an external website.

The default shop interface of our demo store is as shown in the screenshot below.

WooCommerce Remove Add to Cart | Replace Add to Cart - Default Shop Page

Replace Add to Cart – Default Shop Page

Here’s how you should configure the plugin settings:

  • Go to Role-Based Pricing tab.
  • Scroll down to find Replace Add to Cart settings.
  • Select the user roles for which you want to configure this setup. For our example, I have chosen Customers user role.
  • Next, in the Replace Button Text (Product Page) setting, I have entered the text “Buy Now!”, which when clicked, the product will be added to the cart.
  • In the next setting – Replace Button Text (Shop Page), I have entered the text “Buy from Sample Store” and entered an external URL of the product in the Replace URL (Shop Page) setting which redirects to the same product in the Sample Store.

Below are the plugin settings to be configured.

WooCommerce Remove Add to Cart | Replace Add to Cart plugin settings

Replace Add to Cart plugin settings

  • Moving to the shop page, the updated Add to Cart text for all products will be displayed as shown in the screenshot below.
WooCommerce Remove Add to Cart | Replace Add to Cart in Shop page

Replace Add to Cart in Shop page

  • When a product is viewed, the updated text for Add to Cart button is as shown in the below screenshot.
WooCommerce Remove Add to Cart | Replace Add to Cart text in Product page

Replace Add to Cart text in the Product page

Therefore, in this way, you can remove/customize/replace the Add to Cart button in WooCommerce.

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

You can hide the ‘Add to Cart’ button for the selected products and user roles using ELEX WooCommerce Request a Quote Plugin. Basically, this plugin lets you add a ‘Request a Quote’ option along with the ‘Add to Cart’ button in your store for providing a single platform for both customers and retailers or wholesalers. To know more about this plugin, and its features, refer to an article: The Best Request a Quote Plugin for WooCommerce.

To know how how to configure it, and its various tabs and settings, refer to an article: How to set up ELEX WooCommerce Request a Quote plugin?

After installing and activating, go to the Hide Add to Cart tab. Here, you can hide the ‘Add to Cart’ option from the product pages and shop page separately.

You can display the ‘Add to Cart’ button for specific products based on their category, name, and tags if you have enabled hide the ‘Add to Cart’ option for all products in your store. If you want to include specific user roles for the availability of ‘Add to Cart’, select the user roles accordingly. Check the below screenshot.Request-a-Quote-Hide-add-to-cart

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

hide add-to-cart You can choose the products and user roles accordingly to exclude them from hiding the ‘Add to Cart’ button.

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

 

 

Related reading:

 


To explore more details about the plugins, go check out ELEX WooCommerce Catalog Mode, Wholesale & Role Based Pricing plugin.

Read the product setting up article to understand the plugin, in detail. Or check out the product documentation section for more related articles.

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

4 Comments

  1. jameskendy6
    I am having an unexpected error while removing add to cart button on my product page. I am using this tutorial for my reference code https://wpitech.com/hide-disable-add-to-cart-button-in-woocommerce-store/ . Is there any other way to hide add to cart button. This is the code that I am using to hide add to cart button on my product page function flav() { 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'); return WooCommerce::instance();
    • Azhar
      Hi James, The article which you are referencing does not define the function "flav()", hence the code snippet wouldn't work at all. The methods explained in our article should work fine. Are you facing any issues? Do share it with us!
    • ELEXtensions
      Hello, Using these ways you will be able to remove the Add to Cart button in you WooCommerce store. Could you elaborate on your query a bit? Are you looking to remove the Add to cart button for particular vendors?

Leave a Reply

WordPress Image Lightbox Plugin