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

How to Remove Add to Cart Button in WooCommerce? (3 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.

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.

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

Let’s check it out.

3 Efficient ways to remove Add to Cart button in WooCommerce

With the ELEX WooCommerce Catalog Mode, Wholesale & Role Based Pricing plugin, you can customize the Add to Cart button in the following three 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

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.

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.

2 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 pagefunction 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 Nayeem
      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!

Leave a Reply

WordPress Image Lightbox Plugin