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
Just what I was looking for ! Thanks a lot.
Why is this not working for me… I run WooCommerce version 2.6.6
Has anything changed since then ?
Hi Eric,
What Theme are you using? what’s your website, Ill take a quick look
Dear Admin,
Do you know what is problem loading spinner never endless when checkout in woocommerce ?
I get something trouble with this.
mybe you could see the screenshoot ini this page http://prnt.sc/e3sa8x
Thanks before
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?
Hi. This is not working for me. I would really appreciate it if you could help me out.
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.
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 )
I love you
Like magic, thanks a lot !!
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”