How to show download icon on Add to Cart Button in Woocommerce

Question

I want to show the download symbol on the "Add to Cart" button when the user clicks on it. Currently, on my site, when a user clicks a button, he does nothing for 2-4 seconds and shows a browse cart button.

I want to show the loading or turning icon for these 4 seconds. Is it possible? can anyone guide me

Link: http://www.myeatable.com/cnc-ongole/

Answer 1

To upload an image when added to the basket, I can suggest writing code in js, which is uploaded to this page.

jQuery('a.add_to_cart_button').click(function(){jQuery(this).append('<img src="http://smallenvelop.com/wp-content/uploads/2014/08/Preloader_3.gif" width="20px" height="20px"/>')});

, , , .

, , .

Answer 2

, .

WooCommerce "". .

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

, removeClass ,

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

WooCommerce WooCommerce

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();
};