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

2 comments

1. I have a better solution, there is no need to append some image to the button.

   WooCommerce provides a class ‘loading’. Simply append this class to Add to Cart button and that’s it.

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

   And as soon as the product is added to cart you can use the removeClass function to remove the loader like

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

   And for adding a WooCommerce Loader to a particular section you can use these WooCommerce functions

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

   These two function block’s and unblocks a particular section by passing the specific id or class.

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

2. For the loading image on add to cart i might suggest to write a code in your js which loads on that 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"/>')});
   

   The link to image for loading is for example your can replace it with the one you want to.

   Further more before apply the code in a file try to add it in from the browser console.

Comments are closed.