Archived topic
Add to Cart on Hover over Product Thumbnail
3 replies · Started by Devin on October 10, 2019
Viewing posts 1–4 of 4
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
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));
}
}Perfect, thank you so much! I appreciate the quick reply. It worked great.
Devin
You're welcome
This archived topic is closed to new replies.
