Okay
  Public Ticket #1040468
Click Twice to Add To Cart on iOS devices
Closed

Comments

  •  2
    Nguy started the conversation
    January 29, 2017 at 9:24am

    Hello, I asked about this prior to purchasing on themeforest. I need to fix this so it only takes a regular 1 click on the add to cart button/text/icon whatever it is... as long as it takes 1 click, instead of forcing the customer to click the button twice to add to cart due to the link hover effect. This is only a problem on iOS devices... iphones and ipads.

    You said I could disable the + and go with simple "add to cart". This solves the issue because there's no hover effect on the simple "add to cart" but it overlays the product name.

    How would I go about removing the "add to cart" hover from the + button? That should fix the issue according to this post: 
    https://www.powderkegwebdesign.com/ever-wonder-links-mobile-browsers-require-click-twice/


    thanks much!

  • [deleted] replied
    January 30, 2017 at 2:19pm

    Hi Nguy,

    Can you please add this JS code in theme options > footer:

    <script>
jQuery( document ).ready( function( $ ) {
    	if ( typeof window.ontouchstart !== 'undefined' ) {
    		jQuery( '.add_to_cart_button' ).tooltip( 'destroy' );
        }
    } );
</script>

    This will disable tooltips on hover (touch devices) and thus only one click is required to add the product to cart.

    You can choose to use the + icon to use again.

  •  2
    Nguy replied
    February 3, 2017 at 8:26am

    This seems to do the trick!!

    Thanks so much!

  • [deleted] replied
    February 3, 2017 at 12:06pm

    You are welcome. Have a great day there.

  •  2
    Nguy replied
    February 3, 2017 at 9:35pm

    Quick follow up on this. It only works if I modify the core file footer.php. It does not work if I paste it in the theme options > footer > tracking code, even though I see it gets inserted into the website code.

    Is there a way I can hard code this into the child theme at least?

  • [deleted] replied
    February 6, 2017 at 2:42pm

    Hi,

    I have a modified version of that code:

    <script>
    var disableTooltipsMobile = function() {
    	if ( typeof window.ontouchstart !== 'undefined' ) {
    		jQuery( '.add_to_cart_button' ).tooltip( 'destroy' );
        }
    }

    jQuery( document ).ready( disableTooltipsMobile );
    jQuery( window ).load( disableTooltipsMobile );
    </script>

    It worked for me when I have tested on mobile device.

  •  2
    Nguy replied
    February 7, 2017 at 9:52am

    That seems to take care of it!

    I'm not sure if you guys have gotten a request for this before, but for me, this was the only pre-sale issue at the time.


    Thanks again.

  • [deleted] replied
    February 7, 2017 at 12:14pm

    Thats great!

    Yes, I saw that one of our team members has added this to todo list and will implement in the future updates.