Bigcommerce Design Studio

CSS to Show “Add to Cart” on Mobile & Tablet – BigCommerce Cornerstone Theme

—

by

Rawi Rai
in , , ,

To always show the “Add to Cart” button on tablet and mobile while keeping the hover effect on desktop, use the following CSS in your BigCommerce theme.

Copy and paste the CSS below at the last line of your theme.scss file. Use this guide: https://sumnima.studio/bigcommerce-how-to-edit-theme-scss/

@media (max-width: 801px) {
	.card-figcaption {
		position: static;
		display: block !important;
		Opacity: 1;
		.card-figcaption-body {
			transform: none;
			a[data-button-type="add-cart"] {
				display: block !important;
				Opacity: 1;
			}
			.quickview {
				display: none;
			}
		}
	}
}