Skip to content

Instantly share code, notes, and snippets.

@eversionsystems
Last active July 24, 2024 23:52
Show Gist options
  • Save eversionsystems/9c1845cc3a18209d4a6eb8ed5d5221a5 to your computer and use it in GitHub Desktop.
Save eversionsystems/9c1845cc3a18209d4a6eb8ed5d5221a5 to your computer and use it in GitHub Desktop.
WooCommerce Change AJAX Spinner Gif On Checkout
/*
* 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;
}
@PaulodoPorto
Copy link

PaulodoPorto commented Oct 1, 2020

Woocommerce Responsive Loader Spinner

Hi Guys Greetings!

  1. i don't know if it is possible to ask a question here based on this post.
  2. i use a Astra-Child theme and inclunding this peace of code inside style.css it didn't work for me.
  3. i needed to put this code inside a function and just works for me if i use it inside the functions.php file
    Question:

Has someone already made a Loader Spinner Responsive for Woocommerce?

1° I tried to use a 100% Pure CSS Loader, It works! But it's not responsive.
2° There is a JQuery function that generate the DIVs structure that loads the loader and after the spinner loads, then all desappears.

If i'm not wrong, this is the scriptblock on the library that generates the Loader:

 lyr2 = $('<div class="blockUI blockOverlay ui-widget-overlay" style="z-index:'+ (z++) +';display:none"></div>');
else
 lyr2 = $('<div class="blockUI blockOverlay" style="z-index:'+ (z++) +';display:flex; background:red;border:none;margin:0;padding:0;width:100%;height:100%;top:0;left:0"></div>');

This is the file path for the scriptblock \wp-content\plugins\woocommerce\assets\js\jquery-blockui\jquery.blockUI.js

Here is the code generated on the Loading moment:

<div class="blockUI" style="display:none"></div>

<div class="blockUI blockOverlay" style="
z-index: 1000;
border:none;
margin: 0px;
padding: 0px;
width: 100%;
height:100%;
top: 0px;
left: 0px;
background: rgb(255,255,255);
opacity: 0.6;
cursor: default;
position: absolute;">
</div>

But how can i get that Responsive? Could someone give a help please?

i hope that @eversionsystems got this issue done.

@eversionsystems
Copy link
Author

@PaulodoPorto it sounds like your custom CSS is not being loaded after the default WooCommerce styles. Try adding the custom CSS into the additional CSS section of your theme if that exists. Other users have had this same issue as you can see from the comments above.

@PaulodoPorto
Copy link

@PaulodoPorto it sounds like your custom CSS is not being loaded after the default WooCommerce styles. Try adding the custom CSS into the additional CSS section of your theme if that exists. Other users have had this same issue as you can see from the comments above.

Hi @eversionsystems,

This is my structure:

The first link belongs to the Parent Theme.
/wp-content/themes/astra/assets/css/minified/compatibility/woocommerce/woocommerce.min.css?ver=2.5.4

And this is the child's theme css file. The custom css file
/wp-content/themes/astra-child/assets/css/style.css

The parent theme css file (woocommerce.min.css?ver=2.5.4) is overriding every style that i put inside the custom css file (style.css)

"Try adding the custom CSS into the additional CSS section of your theme if that exists."

Which additional CSS section do you mean please? Is it the same that i am doing in this case?

Should i create a css section? How can i do that? maybe i know this "additional CSS section" with another name.
Thankyou!

@francescocortese
Copy link

francescocortese commented Nov 26, 2020

another solution in functions.php

add_action('wp_head', 'custom_ajax_spinner', 1000 );
function custom_ajax_spinner() {
    ?>
    <style>
    .woocommerce .blockUI.blockOverlay:before,
    .woocommerce .loader:before {
        height: 16px;
        width: 16px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -.5em;
        margin-top: -.5em;
        display: block;
        content: "";
        -webkit-animation: none;
        -moz-animation: none;
        animation: none;
        background-image:url('<?php echo get_stylesheet_directory_uri() . "/img/loader.gif"; ?>') !important;
        background-position: center center;
        background-size: cover;
        line-height: 1;
        text-align: center;
        font-size: 2em;
    }
    </style>
    <?php
}

@djs5295
Copy link

djs5295 commented Feb 18, 2021

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!!

@eversionsystems
Copy link
Author

@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.

@skunkbad
Copy link

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".

@diogenesjup
Copy link

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

@eversionsystems
Copy link
Author

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 :)

@ahac
Copy link

ahac commented Dec 29, 2021

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?

@eversionsystems
Copy link
Author

@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.

@bajoski34
Copy link

how does one trigger the spinner

@StefsterNYC
Copy link

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

@jsmusiker
Copy link

@ahac you can just add -

.woocommerce-checkout.processing before the .blockui class

@emmust47
Copy link

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?

@eversionsystems
Copy link
Author

@emmust47 think you just need to add

content: "";

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment