How to hide/remove add to cart button on category and product pages using CSS in woocommerce?

In this tutorial we’ll learn how to hide add to cart button on category and single product page in woocommerce. Wocommerce assign dynamic categories on category page dives. We can find those categories and then by using inheritance we can hide child element i.e. add to cart button.

Lets have an example here, I’ve added two categories and assigned some products to them.


Here is what a category page look like by default:


Now go to each category page, on each category page right click and then click on the inspect element. Find the div having id=”post-area” before the div having id=”woo-content” and note the category specific class for this category.


In my case which is “product-cat-category-2″ and write an inherited rule like this.

.product-cat-category-2 .add_to_cart_button{ display: none !important; }

It will remove add to cart button only from that specific category page.


The default screen for products will look like this:


Now, to remove add to cart button from single product page of a specific category.

Add the following rule inherited by category same as above.

.product-cat-category-2 .single_add_to_cart_button{ display: none !important; }

It will remove add to cart button from products in specified category.


Editorial Staff

ThemeLocation Provides Wordpress & Woocommerce development & Customization services. Have a Project? Contact To discuss

Leave a Reply

Your email address will not be published. Required fields are marked *