Cannot remove add to cart icon from category pages

[arecibo2]

Hi, I have been searching the forums and the knowledgebase to figure out how to remove the Add to Cart icon from the thumbnails on category pages.

I found three custom CSS solutions offered by support in the forum that I thought would work, but do not work for me:

Remove add to cart button:

.product .cart-overlay .shop-actions{
display: none;
}

Second option:

.tax-product_cat .add-to-cart-wrap {
display: none!important;
}

Third option:

.product figure:hover .cart-overlay {
opacity: 0;
}

Can you help? I would much appreciate it.

David

[arecibo2]

Hi. I have resolved this for full-size screens using the third option above. However, the cart icon still shows up on mobile devices.

[David Martin – Support]

You can disable those: Theme Options => Mobile Header Options => Show cart

[arecibo2]

Hi, David. I appreciate the tip, but I am not trying to remove the cart button from the header. It’s the add cart icon that shows on the thumbnails I’m trying to remove.

In other words, when you are on a mobile device browsing through a category page, each product thumbnail shows an add to cart icon. I don’t want that icon on the category pages. I want people to click on the thumbnail to see the product page; from the product page, they can add items to the cart.

Thanks,
David

[David Martin – Support]

Hi,

Thanks for clarifying, that changes everything. You would want this if using the standard product layout:

@media only screen and (max-width: 479px) {
.archive .product figure .cart-overlay .shop-actions > .add-to-cart-wrap {
    display: none;
}
}

Clear your two plugin/minification caches after adding.