Add a Preloader to WooCommerce Checkout

When a customer hits the “place order” button it’s not always obvious that the order is processing which can cause some customers to mash the button, causing double orders to happen! Adding this easy preloader will put an overlay and GIF spinner on WooCommerce checkout during processing so there is an indication to the customer to wait.

Requirements:

• CSS
• (click the preloader dots to download gif)
• More preloaders can be found here: https://icons8.com/preloaders/

CSS

Add this to your CSS stylesheet within your child theme folder, or directly into your custom CSS if you’re using a page builder.

/* Checkout page processing spinner */
.woocommerce-checkout.processing .blockUI.blockOverlay {
	background-image:url('/wp-content/uploads/2022/11/Fidget-spinner.gif') !important;
	background-position: center 50% !important;
	background-repeat: no-repeat !important;
	position: fixed !important;
}