[Support request] how to make add to cart button display on desktop

[Nicholas]

how to make “add to cart” buttons display on desktop permanently like in the mobile version, please see video in private info section

thanks

[Fernando]

Hi Nicholas,

In Appearance > Customize > Additional CSS, you’ll find this code:

/* 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));
	}
}

If you remove this code, the Add to cart button should appear “permanently” on desktop and tablet as it does in mobile.

Hope this clarifies!

[Nicholas]

thanks a mill!

[Fernando]

You’re welcome Nicholas!

[Author]

Posts