Archived topic
'Add to cart' button behaviour
3 replies · Started by Alexandra on December 5, 2022
Hi,
I have been trying to change the 'add to cart' button behaviour on my product pages so it shows all the time (currently it only appears when the user hovers over).
https://www.businessanalyststoolkit.com/product-category/all-products
I would like the button and price to show all of the time.
My theme is based off the "niche" them in the site library.
When can I go to change the settings for the button behaviour please?
Thanks,
Sam
Hi there,
Go to Additional CSS field in the customizer and remove this block of CSS:
/* Transform add to cart and pricing on hover */
@media (min-width: 769px) {
.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));
}
}
Let me know if this helps :)
Thank you, it worked! That was easy :)
No problem :)