How to change Woocommerce default ajax loader icon in Cart and Checkout

This little snippet will going to change your loader icon in WooCommerce Cart and Checkout.

In Cart you should see this icon when you update Shipping.
In Checkout you see this when you update Shipping or Sending an Order.

You should first create a new gif icon you want to use.
I'm using this generator: PreLoaders.NET

This is our .gif which size is 128px*128px. WooCommerce default loader is only 16px*16px which is pretty small.

The following code will change the loader in Cart and Checkout. If you need it only on CheckOut, delete the is_cart from if syntax. Add the code to you themes functions.php file.

add_filter('woocommerce_ajax_loader_url', 'woo_custom_cart_loader');
function woo_custom_cart_loader() {
 
 global $woocommerce;
 
 if(is_checkout() || is_cart()){
  return __(get_template_directory_uri().'/images/loader-ajax-new.gif', 'woocommerce');
    }
 else
  return __(get_template_directory_uri().'/images/ajax-loader@2x.gif', 'woocommerce');
}

The second thing you need to do is to increase the size of the loader icon, we told that this icon is only 16px*16px. So after uploading image to the themes /images folder or your custom places head to these files:

To increase the Cart loader icon: /wp-content/plugins/woocommerce/assets/js/frontend/cart.min.js

To increase the CheckOut loader icon: /wp-content/plugins/woocommerce/assets/js/frontend/checkout.min.js

Search for 16px and change them to 128px. If you upgrade WooCommerce these changes are going to be lost :) so change them again! :)