For one of my recent WooCommerce projects, I started to see an increase of failed and abandoned orders.
With the help of Hotjar, a behaviour analytics and user feedback service, I was able to watch several users navigating through the site and I could see what their pain points were. The one that stood out as the main reason for my increase in failed orders was the checkout page. The UX of the page was well received by the visitors, but the lack of obvious feedback upon clicking the “Place Order” button was making users click the button twice or simply assuming the site was broken and exit.
If you use WooCommerce, you will be familiar with the checkout spinner which shows upon clicking “Place Order”. The spinner is used to stall the user whilst WooCommerce reached out to the relevant API to complete the transaction. There is a bit of a lag, probably a couple of seconds and although the spinner is on the page, it doesn’t provide enough feedback for the user to understand that the payment is being processed.
I wanted to improve the UI of the spinner page so that users understood that their order was being processed. The easier way was to simply add an overlay to the page and soon enough my failed orders were a thing of the past.
If you too need to make this step more prominent to your users, you can simply add the CSS below to your stylesheet and that should sort you out.
/*Checkout overlay*/
.blockUI.blockOverlay {
background-color: rgba(0,0,0,0.75) !important;
position: fixed !important;
}
