Spinners and loading animations built into WooCommerce

WooCommerce is a big plugin that ships with several JavaScript loading animations. There is no reason to roll your own when you need one.

This week, I am hacking on WooCommerce to convert “Add to Cart” buttons to prevent redirecting users to different pages. Here’s a great tutorial I used to accomplish this goal. Without page loads, users benefit from loading animations in understanding that something is happening that they otherwise cannot see.


Adding a loading class to buttons dims the button and shows a white spinning gear inside the button to the right of its label.




WooCommerce also provides JavaScript to block and dim a whole content container because it ships with BlockUI. BlockUI is a jQuery plugin that WooCommerce uses to obscure the user interface while executing synchronous JavaScript. You can see how it’s used by WooCommerce core when removing an item from the shopping cart on the cart page.



The default message is “Please Wait…” but you can provide your own text in the options array.

jQuery('.product').block({message:'Updating cart...'});

There are more examples on the plugin’s demos page.


2 responses to “Spinners and loading animations built into WooCommerce”

  1. How can I get the loading spinner to work on the checkout button in the mini cart? I’ve tried this jQuery(‘button.checkout’).addClass(‘loading’); but nothing happens

  2. Hi Mitchell, the “loading” class should be added automatically in recent WooCommerce versions, but there is no (more) default animation.