Birdhouse Websites and Designs

Moving Your Business ONLINE?

Contact Us Today!


When a customer hits the “place order” button it’s now 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 the bottom of your CSS stylesheet. You may only need a few blocks of this code, but I am putting a few redundancies in here in case you need them.

/* Checkout Loader */
.blockUI.blockOverlay {
    background-image:url('https://yourwebsite.com/wp-content/uploads/.../preloader-bar.gif') !important;
    background-position: center 50% !important;
    background-repeat: no-repeat !important;
    position: fixed !important;
}
.processing .blockOverlay {
    background-image:url('https://yourwebsite.com/wp-content/uploads/.../preloader-bar.gif') !important;
    background-position: center 30% !important;
    background-repeat: no-repeat !important;
}
/* Checkout page processing spinner */
.woocommerce-checkout.processing .blockUI.blockOverlay {
    background-image:url('https://yourwebsite.com/wp-content/uploads/.../preloader-bar.gif') !important;
    background-position: center 50% !important;
    background-repeat: no-repeat !important;
    position: fixed !important;
}
%d bloggers like this: