Woocommerce Change Loading Spinner Icon

WooCommerce change loading spinner icon

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.

Starting and stoping Ajax Overlay spinner in Woocommerce

Woocommerce Uses jQuery BlockUI Plugin to make a blocking overlay with an animate spinner on some jQuery events and on specific pages.

Here below is an example on the checkout page, that will activate woocommerce spinners after a delay of 2 seconds once page is loaded and will stop them after 3 seconds:

add_action('wp_footer', 'spinners_example_on_checkout_jquery_script');
function spinners_example_on_checkout_jquery_script() {
    if ( is_checkout() && ! is_wc_endpoint_url() ) :
    ?>
    <script type="text/javascript">
    jQuery( function($){
        // Targeting checkout checkout payment and Review order table like Woocommerce does.
        var a = '.woocommerce-checkout-payment, .woocommerce-checkout-review-order-table';

        // Starting spinners with a delay of 2 seconds
        setTimeout(function() {
            // Starting spinners
            $(a).block({
                message: null,
                overlayCSS: {
                    background: "#fff",
                    opacity: .6
                }
            });

            console.log('start');

            // Stop spinners after 3 seconds
            setTimeout(function() {
                // Stop spinners
                $(a).unblock();

                console.log('stop');
            }, 5000);
        }, 2000);
    });
    </script>
    <?php
    endif;
}

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

The jQuery BlockUI Plugin official documentation.

Related Topics