[Support request] Add to Cart on Hover over Product Thumbnail

[Devin]

Loving the theme so far. Can you tell me how I can disable the “Add to Cart” button/link that appears when you over over a product thumbnail as the product price is hidden? I’m trying to disable this feature on all pages and make it where the product Price will stay visible when you hover over a product thumbnail.

Thanks,
Devin

[David]

Hi there,

the Site you imported uses some Additional CSS in the Customizer. These two parts are what changes the button to a link and creates the hover effect. Remove that code:

.woocommerce ul.products li.product a.button {
    padding: 5px 0;
    color: inherit;
    background-color: #ffffff;
    text-transform: uppercase;
}

/* Transform add to cart and pricing on hover */
@media (min-width: 768px) {

    .woocommerce ul.products li.product a.button {
        transform: translateY(0);
        width: 100%;
        opacity: 0;
        transition: all 0.4s;
    }

    .woocommerce ul.products li.product:hover a.button,
    .woocommerce ul.products li.product:hover .price {
        transform: translateY(calc(-100% - 10px));
        opacity: 1;
    }

    .woocommerce ul.products li.product .price {
        opacity: 1;
        transition: all 0.4s;
    }

    .woocommerce ul.products li.product:hover .price {
        opacity: 0;
        transform: translateY(calc(-100% - 10px));
    }
}

[Devin]

Perfect, thank you so much! I appreciate the quick reply. It worked great.

Devin

[David]

You’re welcome

[Author]

Posts