How to add a loading spinner to WooCommerce Checkout page

A client of mine wanted to have a loading spinner on WooCommerce checkout page.

It appears that some of their clients did think that the page was not processing and got actually 2 times the charge from the cart.

There is a custom way to do this but is a bit complicated. The best part is that WooCommerce has already integrated this. You just need to add a piece of code in your style.css file from the current theme.

.woocommerce .blockUI.blockOverlay:before,.woocommerce .loader:before {
   height: 3em;
   width: 3em;
  position: absolute;
  top: 90%;
  left: 50%;
  margin-left: -.5em;
  margin-top: -.5em;
  display: block;
  content: "";
  -webkit-animation: none;
  -moz-animation: none;
  animation: none;
  background: url('') center center;//path to the spinner
   background-size: cover;
   line-height: 1;
   text-align: center;
   font-size: 2em;

This works great and will make your customers wait until their credit card is processed

2 thoughts on “How to add a loading spinner to WooCommerce Checkout page

  • August 5, 2020 at 1:35 am


    I like your post but would like something just a bit different. I know you did this a long time ago but hopefully your code can be easily modified for my needs (or point me in the right direction).
    I redirect directly to Checkout page on my site when a customer adds to cart. Since there is a 3-4 second delay before the Checkout page is displayed with no spinner/preloader many customers will repeat clicking Add to Cart and enter multile orders.
    Can your code be used in this scenerio?

    Thanks in advance!


Leave a Reply

Your email address will not be published. Required fields are marked *