Prevent Add To Cart button from Double Click

Hi,

How can i make the ADD TO CART button not clickable anymore after the first click?
It caused many customers to add the same products few times.

Thank you very much,

Hello,

You can try “Sold individually” option https://prnt.sc/ov23fo this option allows one of this item to be bought in a single order. Edit a product and find the option in the Inventory tab.

Best Regards

Thanks, but this is not the solution im looking for.
Some of my products sold with minimum of 2 pieces.

Im just looking for some code that disable the ATC once it clicked. Or to add any Spiner.

Hello,

Unfortunately, Woocommerce does not provide such option by default. Our theme does not influence the Woocommerce functions. Perhaps, you can try searching for a plugin.

Best Regards

Hi,

I actually try 2 codes. I will appreciate if you can help me here and tell me why they are not working for me

Thanks.

This is the first option:

$( '.add_to_cart_button' ).on( 'click', function(){
	$(this).addClass('loading');
});

$(this).removeClass('loading');

block( $( 'div.summary.entry-summary' ) );
unblock( $( 'div.summary.entry-summary' ) );

var is_blocked = function( $node ) {
    return $node.is( '.processing' ) || $node.parents( '.processing' ).length;
};

var block = function( $node ) {
    if ( ! is_blocked( $node ) ) {
        $node.addClass( 'processing' ).block( {
            message: null,
            overlayCSS: {
                background: '#fff',
                opacity: 0.6
            }
        } );
    }
};

var unblock = function( $node ) {
    $node.removeClass( 'processing' ).unblock();
};

Second options:

add_action( 'wp_footer', 'custom_trigger_ajax_add_to_cart' );
function custom_trigger_ajax_add_to_cart() {
    ?>
        <script type="text/javascript">
            (function($){
                $('body').on( 'added_to_cart', function(){
                    jQuery('a.add_to_cart_button').click(function(){
    jQuery(this).append('<img src="/spinner.gif" width="20px" height="20px"/>')});
                });
            })(jQuery);
        </script>
    <?php
}

Sorry, but such customizations are out of our theme support scope and we don’t know how your code is supposed to work.

Do you have anyone to recommend me about for those customization i need?

Thanks

We can suggest you to hire our partners to do this job https://wpkraken.io/?ref=xtemos.studio

[Author]

Posts