Digital experiences for all disciplines
New Landing › How can we help? › Atelier › Cart Overlay Buttons
New Landing › How can we help? › Atelier › Cart Overlay Buttons
- This topic has 7 replies, 2 voices, and was last updated 8 years by Mohammad – SUPPORT.
-
Posted in: Atelier
-
July 26, 2016 at 8:19 pm #284072
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.July 27, 2016 at 7:35 am #284130Hi,
Please use this custom css code:-@media screen and (max-width: 767px) { .product figure .cart-overlay .shop-actions { display: none !important; } }
Thanks
MohammadJuly 27, 2016 at 9:07 pm #284391Thank you, Mohammad.
Unfortunately, that hasn’t resolved the issues I’m having. I removed the two snippets of code that I mentioned in my first message, and added the code you provided.
1. The cart overlay still appears over too much area of the product photos on smaller screens.
2. On larger screens when the cart does not appear, someone can still accidentally click in that area and add a product to the cart without meaning to.
Is there a way to get rid of the cart overlay buttons completely, and only use the add to cart button below the product? Is there a setting in the theme settings that allows me to turn it off, or any css code you can provide?
Thank you for your help.
July 28, 2016 at 3:30 am #284450Hi,
I am not able to replicate this issue. Just mark screenshot and attach here to indicate the issue exactly.
Thanks
MohammadJuly 28, 2016 at 10:34 pm #284698The exact issue is:
1. The cart overlay still appears over too much area of the product photos on some screens. (screenshot attached)
2. On other screens when the cart does not appear, someone can still accidentally click in that area and add a product to the cart without meaning to. (screenshot attached)
Is there a way to get rid of the cart overlay buttons completely, and only use the add to cart button below the product? Is there a setting in the theme settings that allows me to turn it off, or any css code you can provide?
Thank you,
Cori
Attachments:
You must be logged in to view attached files.July 29, 2016 at 11:30 am #284839Hi,
Please use this custom css code:-.product figure .cart-overlay { opacity: 0 !important; display:none !important; }
Thanks
MohammadJuly 29, 2016 at 8:16 pm #284986It looks like that worked! Thank you for your help!
July 30, 2016 at 3:54 am #285015Hi,
Glad 🙂 to help you.
Thanks
Mohammad -
Posted in: Atelier
You must be logged in and have valid license to reply to this topic.