[JuewelsO]

Im using the Roseta theme (free version)
On my WooCommerce shop page and catergory pages, I would like to remove the hover over popup that shows for each
product. Currently when a users hovers over an image a slide up “Ad to Car” button appears. I would like to remove this on the products shown on the Shop page and the category pages.

Any help on this topic would be greatly appreciated. Thanks!
Here is a the page that we are working on
https://www.juliesamericancookies.com/winkel/

Website: www.juliesamericancookies.com/winkel

[Zed]

Hi,

That effect is applied by WooCommerce’s own styling. You can try to following CSS to remove it:

.post-type-archive-product .woocommerce ul.products li.product .woocommerce-thumbnail-container:hover a img {
    transform: none;
}
.post-type-archive-product .woocommerce-thumbnail-container:hover .woocommerce-buttons-container {
    transform: translateY(100%);
}

---

If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.

[JuewelsO]

Hi Zed,
Thank you so much for your very quick reply. Your code appears to work perfect.
I appreciate your help!

[JuewelsO]

Hello,
The CSS code worked great for the Shop page. 🙂
Would you by any chance know which CSS code to use to make the same change to the Category pages?
This is one of my category pages:

https://www.juliesamericancookies.com/product-category/cookies/

Thank you

[Zed]

Try adjusting the CSS to:

.post-type-archive-product ul.products li.product .woocommerce-thumbnail-container:hover a img,
.tax-product_cat ul.products li.product .woocommerce-thumbnail-container:hover a img {
    transform: none;
}
.post-type-archive-product .woocommerce-thumbnail-container:hover .woocommerce-buttons-container,
.tax-product_cat .woocommerce-thumbnail-container:hover .woocommerce-buttons-container {
    transform: translateY(100%);
}

---

If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.

[JuewelsO]

Thanks again Zed for your quick reaction and help. This appears to have done the trick. Now my shop page and category pages no longer show the hover over add to cart button. Thanks a million!

[Author]

Posts