skip to Main Content

Woocommerce Hide Add To Cart Button

Welcome to another of my Woocommerce tutorials on Woocommerce Hide Add To Cart Button.

Some more slightly broken English to get us top of those search engine results and deliver you a solution to your problem.

Woocommerce hide add to cart button

There are a couple of scenarios where you might want to hide the add to cart button on your Woocommerce store.

The most common scenario is hiding the add to cart or add to basket buttons that display on your Shop page to match a trendy design style, or to work well with a coloured background.

You may wish visitors to click through to the product by just clicking on the product.

For example, we have a beautifully designed online store that utilises the add to basket buttons well.

Woocommerce hide add to cart button

Using your WordPress theme customizer to hide the buttons

Some themes provide an option within the customizer that will allow you to hide your add to cart button.

For instance, like below:

Woocommerce hide add to cart button

Look for Woocommerce > Shop within your theme customiser and you will be going in the right direction.

Remember these are buttons and they are attached to the product entry.

Using custom CSS for Woocommerce hide add to cart button fix

If you can’t find a specific option within your customiser, you’ll need to use some custom CSS to hide the buttons from your website.

You can do this by following the below steps:

  1. Locate the button class that you are trying to hide by right clicking on a button and clicking Inspect (using Google Chrome)
  2. To the right a little console box will pop up, copy and paste the first class at the top of the box as this the class you need to target with your CSS
  3. So the class I located is – .woocommerce ul.products li.product .button

We then to apply one line of simple code:

.woocommerce ul.products li.product .button {

display: none;


If this doesn’t work, try adding !important to your display:none; code.

.woocommerce ul.products li.product .button {

display: none !important;


If this doesn’t work you have likely selected the wrong class, or something is overriding your CSS from outputting. Or perhaps you need to be more specific with your CSS.

You may also like

Woocommerce Multiple Prices Per Product

How To Setup PayPal In Woocommerce

How To Build A Website The Ultimate Guide

Share this post

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email