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

7 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.

Leave a Reply