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:

Before

After

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;
}

Share This