Cart Overlay Buttons

[cori_tmc]

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.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

@media screen and (max-width: 767px) {
.product figure .cart-overlay .shop-actions {
    display: none !important;
}
}

Thanks
Mohammad

[cori_tmc]

Thank 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.

[Mohammad – SUPPORT]

Hi,
I am not able to replicate this issue. Just mark screenshot and attach here to indicate the issue exactly.
Thanks
Mohammad

[cori_tmc]

The 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.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.product figure .cart-overlay {
    opacity: 0 !important;
    display:none !important;
}

Thanks
Mohammad

[cori_tmc]

It looks like that worked! Thank you for your help!

[Mohammad – SUPPORT]

Hi,
Glad 🙂 to help you.
Thanks
Mohammad