WooCommerce change loading spinner icon

Active3 hr before
Viewed126 times

7 Answers


The following code css rules work in Woocommerce last version. I have embedded them in the wp_head hook as it's easy for testing:,IM trying to change the WooCommerce loading spinner icon. It's defined in the woocommerce.css:, Advertising Reach developers & technologists worldwide ,Try following code. Assuming your custom-loader.svg is at root of "uploads" directory.

The code:

add_action('wp_head', 'custom_ajax_spinner', 1000 );
function custom_ajax_spinner() {
    .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-image:url('<?php echo get_stylesheet_directory_uri() . "/img/my_spinner.gif"; ?>') !important;
        background-position: center center;
        background-size: cover;
        line-height: 1;
        text-align: center;
        font-size: 2em;
load more v

Woocommerce Responsive Loader Spinner,Has someone already made a Loader Spinner Responsive for Woocommerce?,Here is the code generated on the Loading moment:,@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.

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>');
 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>');

Here is the code generated on the Loading moment:

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

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

Unfortunately there is no special functionality for such cases. You can use your custom SVG. Replace your file with the file in the folder – woocommerce-products-filter\img\loading-master\ . Use the same file names there.,Support » Plugin: WOOF - Products Filter for WooCommerce » How I can change the custom loading icon?,WOOF - Products Filter for WooCommerce,Hey, I would like to override or add custom loading icon. Is there any trick with css or js so that I can do that?

I have done that via following css with the Option “Overlay skin : Default”

#woof_html_buffer {
   height: 201 px;
   width: 201 px;
   background - image: url(/wp-content/uploads / 2019 / 11 / loading - ox.gif);
   background - size: 50 % !important;
   background - color: transparent!important;
   color: transparent!important; -
   webkit - box - shadow: none!important; -
   moz - box - shadow: none!important;
   box - shadow: none!important;
   background - repeat: no - repeat!important;

IM trying to change the WooCommerce loading spinner icon. It's defined in the woocommerce.css:,But the loading spinner icon is still the same. What can I do to change it? I don't know what I should try now...,I've tried changing the loader.svg with a custom css:,First find the function involved in that count: woocommerce_result_count().

IM trying to change the WooCommerce loading spinner icon. It's defined in the woocommerce.css:

.woocommerce.blockUI.blockOverlay::before {
   height: 1 em;
   width: 1 em;
   display: block;
   position: absolute;
   top: 50 % ;
   left: 50 % ;
   margin - left: -.5 em;
   margin - top: -.5 em;
   content: ''; -
   webkit - animation: spin 1 s ease - in -out infinite;
   animation: spin 1 s ease - in -out infinite;
   background: url(.. / images / icons / loader.svg) center center;
   background - size: cover;
   line - height: 1;
   text - align: center;
   font - size: 2 em;
   color: rgba(0, 0, 0, .75);

I've tried changing the loader.svg with a custom css:

.woocommerce.blockUI.blockOverlay::before {
      background: url(http: //www.localhost.de/wp-content/uploads/custom-loader.svg) center center !important;

But the icon will not change. So I've googled a bit and found this here:

add_filter('woocommerce_ajax_loader_url', 'custom_loader_icon', 10, 1);

function custom_loader_icon() {
   return __(get_home_path().
      'wp-content/uploads/custom-loader.svg', 'woocommerce');
load more v

There’s plenty of websites out there, my favourite is preloaders.net and download the best preloader you can find.,To counteract this, there’s a simple little CSS hack you can use, add it into your stylesheet:,Hi there, I have exactly this problem, users are leaving my website before completing the conversion due to unsecurities caused by this insufficient checkout processing animation.,Nice and simple in my opinion, works well on the website! Obviously you can choose which ever one you want!

To counteract this, there’s a simple little CSS hack you can use, add it into your stylesheet:

.processing.blockOverlay {
   background - image: url('IMAGE_URL') !important;
   background - position: center 30 % !important;
   background - repeat: no - repeat!important;

How to activate the spinner in ShopIsle?,Based on that, the official StoreFront Theme for WooCommerce has a “spinner” after clicking on the purchase button.,When the button is clicked it is given a class of loading which doesn't appear to be handled. ,Connect and share knowledge within a single location that is structured and easy to search.

Let me know if that helps.

button.add_to_cart_button.loading: after {
   position: absolute;
   top: 0;
   left: 0;
   width: 100 % ;
   height: 100 % ;
   font - family: "Glyphicons Halflings";
   content: "\e031";
   background: rgba(255, 255, 255, 0.7);
   text - align: center;
   line - height: 34 px;

Many people ask Is there any way to replace the transparent white with a preloader/spinner of some sort to help indicate that the payment is still processing ?,with some websites, when “place order” is clicked, the screen changes to a lighter opacity but nothing else happens until obviously the confirmation screen appears. communicating between your website and the credit card processor may take longer than anticipated, your customer may think the website has frozen and be tempted to hit the back button which could affect the order.,here is the solution. now you can show loading spinner whilst WooCommerce order is processing.,4) Copy the url to your preloader as it now appears in your WordPress install

5) Replace URL_TO_YOUR_PRELOADER in the following code with the url to your preloader

/* Checkout page processing spinner */
.woocommerce - checkout.processing.blockUI.blockOverlay {
   background - image: url('URL_TO_YOUR_PRELOADER') !important;
   background - position: center 50 % !important;
   background - repeat: no - repeat!important;
   position: fixed!important;

Other "loading-change" queries related to "WooCommerce change loading spinner icon"