Btukfyl

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

.woocommerce .blockUI.blockOverlay::before {

    height: 1em;

    width: 1em;

    display: block;

    position: absolute;

    top: 50%;

    left: 50%;

    margin-left: -.5em;

    margin-top: -.5em;

    content: '';

    -webkit-animation: spin 1s ease-in-out infinite;

    animation: spin 1s ease-in-out infinite;

    background: url(../images/icons/loader.svg) center center;

    background-size: cover;

    line-height: 1;

    text-align: center;

    font-size: 2em;

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

}

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

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:

You will use this icon for testing, that you will put in your active child theme under an "img" directory, renaming the file my_spinner.gif.

If you use a theme instead of a child theme, you will use get_template_directory_uri() function instead of get_stylesheet_directory_uri() in the code.

The code:

add_action('wp_head', 'custom_ajax_spinner', 1000 );

function custom_ajax_spinner() {

    ?>

    <style>

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

    }

    </style>

    <?php

}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

Try following code. Assuming your custom-loader.svg is at root of "uploads" directory.

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

function custom_loader_icon($str_replace) {

    $upload_dir = wp_upload_dir();

    $str_replace = $upload_dir['baseurl'].'/wp-content/uploads/custom-loader.svg'

    return $str_replace;

}

Hope this works.