Adding Loader/Spinner during WooCommerce Checkout

Hi @ismael, i’ve put the code bellow but nothing happens

/* spinning on checkout */
.checkout.woocommerce-checkout .woocommerce-NoticeGroup {
  z-index: 1000 !important;
}
.checkout.woocommerce-checkout.processing .woocommerce-NoticeGroup {
  background-image:url('https://d3hwc4hobpbxnl.cloudfront.net/wp-content/uploads/2017/10/31101105/preloader.gif') !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}
.checkout.woocommerce-checkout.processing .woocommerce-NoticeGroup ul {
  display: none !important;
}
/* spinning on checkout */

Hi @ismael, i’m using a child theme, there is the login and password.

Hello Ismael, this is something I’ve been searching for a solution to also as the blank delay time at processing after “place order” is clicked is very confusing for customers as there is no notice (my store page doesn’t even fade down when processing) so it appears “nothing is happening”. I’ve put the image into my library and changed the line in the code above and doesn’t appear to have an affect either. Did you get the example above working and if so what changed were done please? I would like to implement on my site as well. Thank you

Hello and thank you Ismael. I’m sorry but I want to clarify my understanding quickly. Are you saying to remove the entire large css from further above and replace with just this shorter CSS (with updated background image)? This will provide the checkout spinner while wait time?

Also, can I put this into the child theme css or better to go into Appearance > customize > Additional CSS ?

Thank you for explanation.

This works with WP 4.98, Enfold 4.4.1 (with Child Theme), and WC 3.4.4.

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
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) Copy the above code as you modified it into your WP Admin Enfold Quick CSS area all the way at the bottom of WP Admin Top Menu > Theme Options > General Styling
7) Click “Save all changes”
8) Give it a whirl!

Tip: Turn on WooCommerce > Settings > Payments > Check Payments for quick processing (although this may be considerably faster than credit card payments, so the preloader may not be onscreen very long). Don’t forget to turn off Check Payments when you’re done.
Tip: If you don’t see the preloader, try clearing your browser cache, then try again.
Tip: You may also need to temporarily disable Theme Options > Performance > CSS file merging and compression & Javascript file merging and compression

9) Once you have verified it’s working, remove the css from the Quick CSS (don’t forget to “save all changes,” and add it to your wp-content/themes/Enfold(-child)/style.css file.
10) Verify it’s still working.
11) Enjoy your preloader. :)

@PerfectWord

Thank you!

Your code worked perfect in regards to styling and etc!

I just made one simple change to make the snippet target a less specific line, as the one provided did not work.

I used only .blockUI.blockOverlay instead of .woocommerce-checkout.processing .blockUI.blockOverlay

Actually, I didn’t see that there was a space in the code, I am sure removing the space or even adding a comma such as .woocommerce-checkout.processing, .blockUI.blockOverlay would’ve worked.

But anyways, just as well, simply using .blockUI.blockOverlay works perfect, THANK YOU!

@perfectword that worked great! Thank you!