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



Please enter your comment!
Please enter your name here