Skip to main content

Show loading spinner whilst WooCommerce order is processing

WooCommerce is a fantastic plugin for WordPress, it allows anyone to sell their own products quickly and is reasonably easy to set up with a theme, or a bit more complex when you’re creating your own theme.

I was setting up a client’s website the other day and noticed that WooCommerce doesn’t have (unless I’m mistaken) a loader/spinner animation show when you click on the “place order” button.

On the current website i’m working on, when “place order” is clicked, the screen changes to a lighter opacity but nothing else happens until obviously the confirmation screen appears. With some websites, communicating between your website and the credit card processor may take longer than anticipated, your customer may think the website has frozen and be tempted to hit the back button which could affect the order.

Find an awesome preloader

There’s plenty of websites out there, my favourite is preloaders.net¬†and download the best preloader you can find.

Add CSS code

To counteract this, there’s a simple little CSS hack you can use, add it into your stylesheet:

.processing .blockOverlay {
    background-image:url('IMAGE_URL') !important;
    background-position: center 30% !important;
    background-repeat: no-repeat !important;
}

The preloader I chose

Nice and simple in my opinion, works well on the website! Obviously you can choose which ever one you want!

This little snippet currently works and tested on WooCommerce 2.5.5

preloader

10 thoughts to “Show loading spinner whilst WooCommerce order is processing”

  1. Hi there, I have exactly this problem, users are leaving my website before completing the conversion due to unsecurities caused by this insufficient checkout processing animation.

    Unfortunately your custom css did not provoke any changes on my website. Has anything changed?

    Is there maybe a way to scroll to the middle of the form where the animatino is being displayed at least?

  2. Exactly what I was looking for, thanks a lot!!
    I just changed: “background-position: center 30%” to “background-position: center bottom 30% ” so i could see the spinner without scrolling.

  3. Hello! It was such problem on my webstore and any proposed methods do not working on my site. So, I find another loading spinner in CSS(it was spinner for slider) and I compose next code:

    .checkout.woocommerce-checkout.processing {
    overflow: hidden;
    background-image: url(images/loader.gif);
    background-repeat: no-repeat;
    background-position: center center;}

    Then input this code to style.css .And its work nice )

    You can try it if another metodos doesn’t work. Also, you can try to set your own gif. picture by changing url string.
    I hope this metod will help you )

  4. How can we loading animation after successful payment in checkout. As you will see after payment it redirects and my users thing it stuck, I want to show animation between “after payment” and “redirect to another page”

Leave a Reply