How To Remove Add To Cart Button In WooCommerce

Remove the WooCommerce Add To Cart Button without useless plugins
eCommerce Page

WooCommerce is an amazing free plugin for WordPress! It is easily the #1 eCommerce plugin for for the platform and has so many free features that come out of the box. Although recently, I came across a problem while working on a project for a client. They wanted to have an item in their online store to not have the WooCommerce Add To Cart button. They sold these items through their dealers and did not want it to be available for purchase through their website. How to remove add to cart button in WooCommerce

I thought to myself, “No Problem! That seems like a no brainer!” So I went into the product’s back end and noticed that WooCommerce did not have an option to hide the Add To Cart button. The only way I could hide it was to not have a price for the product. But that wouldn’t work because I want to display the price but not the button. After trying multiple plugins that claimed to hide the button, none of them worked.

Finally I decided to fix the problem myself! And after tinkering with some CSS I have found a solution to hide the Add To Cart button on any product page.

 

What You Will Need

1. Find Class Tags

First we are going to have to  is find two things:

  1. The Class for the product page itself
  2. The Class for the Add To Cart Section

With the product page open in Google Chrome, right click anywhere on the page and select Inspect in the popup menu. To the right of the window the Inspect tool will appear. This is a great resource for any web developer to see all the code of any page. So let’s first find the product class for the page.

 

With the product page open in Google Chrome, right click anywhere on the page and select Inspect in the popup menu. To the right of the window the Inspect tool will appear. This is a great resource for any web developer to see all the code of any page. So let’s first find the product class for the page.

If you scroll to the top of the developer tool you will see the opening <body>tag. Within that tag you will see many different class attributes. The one we are interested in is the .postid class. Your’s will most likely be a different number but for this example it is .postid-2. Write down this postid somewhere, you will need it later.

Next, let’s get the CSS for our Add To Cart button.

Using the same Google Inspect Tool, click on the arrow icon on the top left hand corner. This is the Select An Element Tool and it is very useful. We will be able to locate the CSS for the element without scrolling through long code blocks.

With the tool selected, click on the Add To Cart button. Within the Google Inspect Tool you will see all of the code for the button. What we are interested in is the element that contains both the Quantity and the Add To Cart button. For this example the class is cart. Write this down as well because we will need it in the next step.


2. Add CSS To Plugin

To continue, you will need to install and activate the WP Add Custom Code Plugin

You can add this CSS code to the Custom CSS section of the Customize widget (Appearance -> Customize -> Custom CSS) , but I prefer to have the custom CSS on the Dashboard. To each their own!

With the WP Add Custom Code plugin open, enter the CSS that we grabbed in the first step. For this example it would look like this:

/* Removed Add To Cart Button: Grey Beanie*/
.postid-2 .cart {
display: none;
}


Adding the pseudo code within the /* */ is not required but it will help you stay organized. You will now know which CSS block is which.

Check the Products box for Available Post Types and click the Save button.

Refresh the product page you were working on and…voila! The Add To Cart Button is gone!

how to remove add to cart button in woocommerce

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email
Chris Erbstoesser
Chris Erbstoesser
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Table of Contents