Have to click Add to cart twice

clairebear
Tourist
5 0 1

Hi there, I'm using Broadcast theme for my site.

On mobile only, you have to press "Add to Cart" button twice to get the item into the cart. First press does nothing. I've noticed it's like this on the Broadcast demo too.

Any ideas how to fix? Thanks. 🙂

 

 

Replies 17 (17)

Wahab_Ahmad
Shopify Partner
773 114 200

Hello @clairebear,

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Chat on WhatsApp .
Feel free to contact me Email : wahabahmadghori@gmail.com |
Buy Me A Coffee
clairebear
Tourist
5 0 1

Www.everlyfaith.com

 

thank you! 🙂

clairebear
Tourist
5 0 1

Anyone?

BenediktS
Visitor
3 0 0

Same problem on my site 😞 I have Debut Theme. Please Help! 🙂

Philip86
Visitor
1 0 0

Seems its working now, how did you fix the problem? Because sometimes I have the same problem on mobile phone. Sometimes It works on clicking the first time, sometimes I have to double click on my add to cart button.. 

Kareema
Tourist
10 0 4

In responsive design concept there is actually no concept of hover in touch devices. So, if your button has hover and click both effects, some of the devices will interpret the hover as one click and next the click event. so the basic concept is , stop hover effect from touch devices. 

In my cases, I did not face the issue in android, but happened in IOS devices. 

RaveFXOfficial
Visitor
1 0 0

I’m having the same problem... Has this been solved? I’ve seen a huge tank in sales because of this. Please advise.

JohnFromJotting
Shopify Partner
665 94 132

@RaveFXOfficial 

depends on your button, please give me your url

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

wmiz
Shopify Partner
40 7 34
Click to expand...
I'm having this issue on the mobile version of my site as well.
Theme: Debut
URL: www.aposterioricoffee.com
Learn how to code Shopify sites: My YouTube channel

Weekly Shopify advice: ShopSavvy newsletter


Work with me: willmiswebdev@gmail.com
Kareema
Tourist
10 0 4

hey guys I was facing similar issues while browsing my shopify site in IOS devices. I was using debut theme. I could solve the issue via javascript. the code goes as below : 

<script>
  var mobileNoHoverState = function() {

var hoverClass = 'hover',
    $target = $("#ad2cart"),  // instead of #ad2cart put your add-to-cart button id or class
    preventMouseover = false;

function forTouchstart() {
    preventMouseover = true;
}

function forMouseover() {
    if (preventMouseover === false) {
        $(this).addClass(hoverClass);
    } else {
        preventMouseover = false;
    }
}

function forMouseout() {
    $(this).removeClass(hoverClass);
}

function init() {
    $target.on({
        touchstart  : forTouchstart,
        mouseover   : forMouseover,
        mouseout    : forMouseout
    });                
}

return {
    init: init
};
}();

mobileNoHoverState.init();
</script>
Ana_miclea
Tourist
6 0 3

Hi Kareema, 

 

Where does the code need to be added specifically, in which part? 

 

Many thanks in advance for your answer. 

Regards, ç

Ana 

joyce11
Excursionist
35 0 7

Thank you for this! Which file do I put the code in? 

vadrem
Visitor
2 0 0

This works, thank you. This should be added to the product page template after the ATC button.

levelondemand
Visitor
3 0 0

Hi thanks for this. I'm having the issue across my entire debut theme site (except for the home logo/button). Is there a script I can use globally like this? (and where would I put it?) - https://levelondemand.com

jaysonr
Visitor
2 0 0

In which file do i plug this into? And where would i find my add to card id/class?

 

Ana_miclea
Tourist
6 0 3

I have the same problem when I use an Iphone to navigate the website. Anyone has found a solution for this? 

 

Many thanks. 

Ana 

phgorvadia
Shopify Expert
3 0 0

I think by adding below css code it will work 
.product-form__cart-submit{z-index:999999;}

Hire me for shopify customization? contact me at phgorvadia@gmail.com If My post solved your problem? This is my Paypal too 🙂