How to add WooCommerce checkout loader or spinner

with some websites, when “place order” is clicked, the screen changes to a lighter opacity but nothing else happens until obviously the confirmation screen appears. communicating between your website and the credit card processor may take longer than anticipated, your customer may think the website has frozen and be tempted to hit the back button which could affect the order.

Many people ask Is there any way to replace the transparent white with a preloader/spinner of some sort to help indicate that the payment is still processing ?

here is the solution. now you can show loading spinner whilst WooCommerce order is processing.

This works with any WordPress site

Follow these steps

1) Choose a preloader from https://icons8.com/preloaders/ or https://www.idrive.com/images/ide_loading_new.gif

2) Download the preloader to your local computer

3) Upload it to WordPress or on your theme file

4) Copy the url to your preloader as it now appears in your WordPress install

5) Replace URL_TO_YOUR_PRELOADER in the following code with the url to your preloader

/* Checkout page processing spinner */
.woocommerce-checkout.processing .blockUI.blockOverlay {
	background-image:url('URL_TO_YOUR_PRELOADER') !important;
	background-position: center 50% !important;
	background-repeat: no-repeat !important;
	position: fixed !important;
}

6) In WordPress 4.7+, WordPress added a core way to add CSS to your site inside the Customizer which you can find in Customize > Additional CSS.

7) Click “Save all changes”

8) Enjoy your preloader. 🙂

Tip: If you don’t see the preloader, try clearing your browser cache, then try again.