How to show loading icon on Add to Cart Button in Woocommerce
Solution 1
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.
Solution 2
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();
};
Related videos on Youtube
Amar Ilindra
Fullstack Developer | Blogger | Freelancer I regularly blogs at Geek Dashboard and you can check my recent works at ikva eSolutions
Updated on June 04, 2022Comments
-
Amar Ilindra almost 2 years
I want to show a loading symbol on Add to Cart button when user clicks it. Currently in my site, when user clicks the button, it do nothing for 2-4 seconds and shows view cart button.
I want to show some loading or spinning icon during these 4 seconds. Is it possible? can someone guide me
-
Shashikant Chauhan almost 9 yearsYou have also some problem in this theme. After refreshing cart become zero. And check in plugin folder assets have [email protected] this image or not
-
-
Aman Dhanda almost 6 yearsI think you are saying to add 'loader' class, not 'loading'. Right? Also, it only shows the spinner. I want the little transparent overlay box also. Any idea, which class will be used for that?
-
Logan Young almost 6 yearsI've updated my answer.
-
developerme almost 6 yearsis this code is working ?
-
Rich over 5 yearsWorks great for me, thanks so much!
-
Bon Andre Opina over 4 yearshow do I know htat the product is loading or not?
-
Abdullah Adhami over 3 years@loganYoung , how can i add this code to snippet plugin in Wordpress ?
-
Abdullah Adhami over 3 yearshow can i add this code to my snippet in wordpress , or where i can i add this jquery code to my add to cart process , please advice