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

  • Author
    Posts
  • #118228

    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

    #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 read the available documentation and search the forums before posting.
    #118255

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

    #118257

    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

    #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 read the available documentation and search the forums before posting.
    #118342

    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!

Viewing 6 posts - 1 through 6 (of 6 total)

You need to log in to reply to this topic.