Hello,
I’m having an issue with the cart overlay button. On some devices it covers up too much of the product photo, so I tried using this code to remove it:
@media only screen and (max-width: 1024px) {
.product figure .cart-overlay {
opacity: 0;
}
}
That worked great to hide the button, but caused some confusion when people would click on the product if they clicked or touched on the transparent button. It still added the item to the cart, when all they wanted to do was open the product page.
I then found this snippet of code:
.cart-overlay .shop-actions {
display: none!important;
}
That worked to remove the icons from the desktop, but I’m still having the same issue of the cart button being hidden on mobile devices, and it accidentally getting touched and adding items to the cart. I’ve attached screenshots showing that the cart button is not visible at first, and another showing how it adds the item to the cart if you touch that spot.
I’d either like my shop configured in one of these ways:
1. The shop page across all devices has no cart overlay button at all, and just has the add to cart button below each product.
2. The shop page on laptop/desktop has the normal cart overlay buttons that appear on hover, but not the button below the product, and mobile screens only have the button below the product.
Thank you so much for your help!
Attachments:
You must be
logged in to view attached files.
.