Disable hover effect

I am using the newest product archive product style “buttons on hover”. When you hover over a product, the add to cart/compare/quick view buttons slides up from the bottom and are shown. I want to disable this completely. I want nothing to happen when you hover over a product. Can this be achieved with css?

Hello,

Try to disable it with the help of the below code, define the code in Theme Settings -> Custom CSS -> Desktop CSS area.

.product-grid-item.wd-hover-buttons-on-hover:not(:is(.quick-shop-shown,.wd-loading)):is(:hover,.wd-variation-active) .wd-product-footer {
    opacity: 0;
    visibility: hidden;
}

.product-grid-item.wd-hover-buttons-on-hover:not(:is(.quick-shop-shown,.wd-loading)):is(:hover,.wd-variation-active) :is(.product-element-bottom,.wd-product-grid-slider-pagin) {
    transform: none;
}

.product-grid-item.wd-hover-buttons-on-hover:not(:is(.quick-shop-shown,.wd-loading)):is(:hover,.wd-variation-active) .product-element-top {
    clip-path: unset;
}

Kind Regards

[Author]

Posts