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! :)