[Resolved] ‘Add to cart’ button behaviour

[Alexandra]

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

[Leo]

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 🙂

[Alexandra]

Thank you, it worked! That was easy 🙂

[Leo]

No problem 🙂

[Author]

Posts