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.

Buttons

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

Usage

jQuery('button.single_add_to_cart_button').addClass('loading');
jQuery('button.single_add_to_cart_button').removeClass('loading');

Containers

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.

Usage

jQuery.blockUI();
jQuery('.product').block();
jQuery('.product').unblock();

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.