Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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;
}
@tejasm-itpath
Copy link

tejasm-itpath commented Nov 15, 2017

Thank you so much
You saved my lots of time :)

@SahilMepani
Copy link

SahilMepani commented Dec 3, 2017

Thanks mate

@mjayee
Copy link

mjayee commented Dec 16, 2017

Thanks heaps... huge time saver and worked like a charm 💃

@DodgeThat
Copy link

DodgeThat commented Feb 15, 2018

That was the bomb!!! Thank you very much!!! :)

@rendhon07
Copy link

rendhon07 commented Aug 7, 2018

i am using this plugin for my store. and you can able to add beautiful loading spinners.
https://codecanyon.net/item/wooloader/22355988
check it out .

@ncamaa
Copy link

ncamaa commented Oct 3, 2018

thanks.

@EmptySD
Copy link

EmptySD commented Dec 10, 2018

Thanks, this saved a lot of time.
I will just suggest using fixed position due to page height.

@sandip12
Copy link

sandip12 commented Feb 3, 2019

Him how do i use it - if you could guide me, as in where do i add the css file and do i need to call it .. i am new to wordpress..

@sathesh95
Copy link

sathesh95 commented Apr 5, 2019

Awesome.Saved time.

@bamne123
Copy link

bamne123 commented Jul 18, 2019

Thank you very much, It worked.
In my case it just shows in small screen, as i am using multi-step checkout plugin.
All links are available for user if user places order. This is may not place order properly if user clicks on the other link.

How can you show full screen loading? It will be a great help.

Thanks again.

@eversionsystems
Copy link
Author

eversionsystems commented Jul 18, 2019

Thanks, this saved a lot of time.
I will just suggest using fixed position due to page height.

Good point, then it's relative to the html element and not affected by scrolling.

@eversionsystems
Copy link
Author

eversionsystems commented Jul 18, 2019

Him how do i use it - if you could guide me, as in where do i add the css file and do i need to call it .. i am new to wordpress..

Place the code in your child theme style.css file. Either there or your theme might have a custom CSS configuration option you copy and paste the code into.

@bamne123
Copy link

bamne123 commented Jul 18, 2019

Got it working. I was looking for css to show full screen loading.

.processing .blockOverlay { position:fixed !important; left:0 !important; right:0 !important; top:0 !important; text-align:center; z-index:999999 !important; background-image:url('IMAGE_URL'') !important; background-position: center 30% !important; background-repeat: no-repeat !important; opacity: 0.9 !important; background-size: 120px !important; }

@eversionsystems
Copy link
Author

eversionsystems commented Jul 18, 2019

Got it working.

.processing .blockOverlay { position:fixed !important; left:0 !important; right:0 !important; top:0 !important; text-align:center; z-index:999999 !important; background-image:url('IMAGE_URL'') !important; background-position: center 30% !important; background-repeat: no-repeat !important; opacity: 0.9 !important; background-size: 120px !important; }

Seems like an excessive amount of "!important" rules being used, I don't know how you are loading the custom CSS but overuse of the !important rule is poor practice. If you load the CSS after the multi-step plugin's CSS then you won't need them as the last rule loaded takes precedence.

@bamne123
Copy link

bamne123 commented Jul 18, 2019

I agree, I am adding these css into Additional CSS section. So they will be the last CSS applied on the Page. I will check with less important statement. But its working for me, hope this will help others.

@StefsterNYC
Copy link

StefsterNYC commented Aug 26, 2019

Is anyone having issue in mobile? @eversionsystems did you add the fixed position for mobile?

@eversionsystems
Copy link
Author

eversionsystems commented Oct 13, 2019

Is anyone having issue in mobile? @eversionsystems did you add the fixed position for mobile?

@StefsterNYC Haven't added any fixes yet. I need to customize the spinner for a client so I'll take a look at the code.

@StefsterNYC
Copy link

StefsterNYC commented Oct 13, 2019

@eversionsystem sounds good. I edited it for my needs and for it to center in mobile. I had to take out the existing loader css and that made the difference.

@eversionsystems
Copy link
Author

eversionsystems commented Oct 14, 2019

@StefsterNYC I used the existing code and it seemed to work fine on mobile. Glad it's working for you now :)

@StefsterNYC
Copy link

StefsterNYC commented Oct 14, 2019

@eversionsystem That's awesome. I had issues most likely due to the theme. It definitely conflicted. So I had to make changes to it and made it work.

@eversionsystems
Copy link
Author

eversionsystems commented Oct 14, 2019

@StefsterNYC that's always a potential issue. A lot of themes tend to override the template files for WooCommerce to style them in a different way so you'll encounter conflicts you're trying to customize things and finding it's not working as expected.

@sonu964
Copy link

sonu964 commented Dec 13, 2019

Thank you sir...

@Dubaidogfish
Copy link

Dubaidogfish commented Aug 21, 2020

I agree, I am adding these css into Additional CSS section. So they will be the last CSS applied on the Page. I will check with less important statement. But its working for me, hope this will help others.

This was the only way I could get it to show on Hestia Pro theme

@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

eversionsystems commented Oct 2, 2020

@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 commented Oct 3, 2020

@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

eversionsystems commented Feb 19, 2021

@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

skunkbad commented Jul 30, 2021

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

diogenesjup commented Sep 8, 2021

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

@eversionsystems
Copy link
Author

eversionsystems commented Sep 8, 2021

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?

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