How to Remove hover over Add to Cart slide up button WooCommerce products

Forums » WordPress » Roseta » How To

  • Author
    Posts
  • May 22nd, 2021 at 14:48 #118228
    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

    May 22nd, 2021 at 23:27 #118246
    Zed
    Cryout Creations mastermind

    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.
    May 23rd, 2021 at 12:51 #118255
    JuewelsO

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

    May 23rd, 2021 at 19:11 #118257
    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

    May 23rd, 2021 at 22:52 #118281
    Zed
    Cryout Creations mastermind

    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.
    May 26th, 2021 at 17:18 #118342
    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
Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘How to Remove hover over Add to Cart slide up button WooCommerce products’ is closed to new replies.