WooCommerce Change AJAX Spinner Gif On Checkout

woocommerce-ajax-checkout-spinner.css

/* 
 * Custom AJAX spinner on WooCommerce checkout 
 * The class used to load the overlay is .blockUI .blockOverlay
 * The class used to load the spinner is .woocommerce .loader:before
 *
 */
.woocommerce .blockUI.blockOverlay:before,.woocommerce .loader:before {
    height: 3em;
    width: 3em;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -.5em;
    margin-top: -.5em;
    display: block;
    content: "";
    -webkit-animation: none;
    -moz-animation: none;
    animation: none;
    background: url('http://test-site.com/wp-content/themes/boss-child/images/spinning-logo.gif') center center;
    background-size: cover;
    line-height: 1;
    text-align: center;
    font-size: 2em;
}

Does anyone know how I would add a bit of text that says something like "Order Processing. Please allow a few moments and this page will redirect you to an order confirmation page" underneath the spinner. Currently my code reads:

/* Checkout page processing spinner */
.woocommerce-checkout.processing .blockUI.blockOverlay {
background-image:url('https://glareguard.com/wp-content/uploads/2021/02/Balls-1s-200px.gif') !important;
background-position: center 50% !important;
background-repeat: no-repeat !important;
position: fixed !important;
}

This definitely works. Also are these important tags necessary and how would one rewrite the entire code if it is not necessary?

Thanks!!

@djs5295 make sure your CSS loads last, that way it takes precedence over all your other CSS rules. Adding text could be accomplished using pseudo elements, you can read up on some examples here.

This was helpful. Thank you. I just want to say that in my case there was no need to do anything but center the default spinner vertically, so all I needed for CSS was "position:fixed".

for me, works only when i put the "!Importantt"
Tks!

for me, works only when i put the "!Importantt"
Tks!

You need to ensure your custom CSS is loaded last, it will then take precedence and "!important" is not required. Glad it works though :)

This adds the spinner to every overlay (when adding item to cart, removing it, etc.). How could I show it only after the "place order" button is clicked?

@ahac it's not possible due to the way WooCommerce uses the same CSS overlay. You'd need to write some JS in order to achieve what you wanted.

how does one trigger the spinner

@bajoski34 it gets triggered when a payment button has been clicked.

@ahac you can just add -

.woocommerce-checkout.processing before the .blockui class

I cannon add pseudo element. This is my code:

.woocommerce-checkout .blockUI.blockOverlay::before {
    background-image:url('https://media3.giphy.com/avatars/Packly/C4AvqGR2zXrN.gif') !important;
    background-position: center 50% !important;
    background-repeat: no-repeat !important;
    position: fixed !important;
}

Does anyone have solution for this?

@emmust47 think you just need to add

content: "";