WooCommerce Mobile Checkout: 3 Tactics To Increase Mobile Checkout Conversions
Tavleen Kaur
May 27, 2019
40% of all sales on Black Friday came via mobile in 2018 and yet several eCommerce stores' checkout pages are not optimized for mobile yet!
Recent data suggests that as many as 64% of internet users make purchases via their mobile devices, up from just 25% in 2012.
Mobile shoppers are often on-the-go and are trying to complete a task or even multiple tasks. The speed is the key here. And while surfing on mobile, they're using thumbs and fingers that have a wider margin of error.
In this post, I'll show you how to optimize the WooCommerce checkout page for mobile. Let's dive in.
Contents
According to a paper published by Comscore, called Mobile's Hierarchy of Needs, there are 4 specific reasons why mobile browsers don't actually make a purchase. Take a look:
Let's explore them in detail.
People are concerned about giving their credit card details- especially on the mobile phone. ConversionXL conducted a study to find out if trust badges had any impact on how people perceived the website. They found that some trust seals were considered more trustworthy compared to the others.
Google Trusted Stores was one seal that was remembered by most visitors. Here's a list of the seals in their order of priority:
The difference is actually not that much. But the presence of trust seals did make a difference and is so much better than having a simple 'lock' icon.
It's very obvious that before clicking on the place order button, people want to make sure that they're buying the right products. Mobile shoppers are usually in a hurry and on the go. Therefore you've got to let them double check the items and the order total on the checkout page before they place the order.
Here are a few concerns in the mind of a mobile shopper:
What if I have accidentally added the wrong item(s) to my cart?
Have I got the right size? I hope I didn't click on size 10?
What's my order total?
According to a survey published by Baymard Institute, 24% of people said they abandoned during the checkout because they couldn't see the order total up front. That's a biggie!
The real estate on the smartphone is way lesser than that on a desktop or laptop. It should be made easy to switch between steps - go to the next step, come back to the previous step etc. You may even make the logo at the top of your checkout page clickable - because if they want to go back on the homepage, they should have an option.
Most checkout pages close all the exit gates, forcing the user to close the tab if they want to go back or elsewhere on the site.
Here's an example of difficult navigation, I want to change the address that I added on the previous step, but I've only got two options- delete the address or add a new address.
There's no option to edit the address entered on the previous step!
That's actually quite disappointing, especially considering that I discovered their website through a Google ad.
That's not good navigation, at all!
Most mobile users hold their smartphones with just one hand- keep that in mind. You've got to make sure that everything lies within a comfortable reach of the user's thumb.
Take a look at this picture that highlights the easy and hard to reach areas on a smartphone:
Make things fast for them by vertically stacking them up without the need to pinch or zoom the page.
Alright, now that these reasons are known to you, let's jump into tactics. But first, let's look at a mobile-optimized WooCommerce checkout page that I've built using Aero Checkout:
Notice how all the information is vertically stacked up and fits the screen 100%. Users don't have to pinch and zoom to enter details. Also, we only have the most important fields on the checkout page - the user doesn't have to fill up any redundant pieces of information.
Next, here are my top 3 tactics to optimize your checkout page for mobile.
Place the most important information right at the top. Remind users what they're buying and let them double-check their order summary for satisfaction.
Many high converting stores keep the order summary section collapsible so that it doesn't take much space. The collapsible section will take up much less space.
The users will not have to scroll further down to get to the checkout form. It's above the fold.
A sticky CTA button is great to keep the user's attention on the button. They know what's exactly expected out of them.
It's always right in front of them and they can click it when they're ready. To make the CTA button sticky, click on the pencil icon right next to 'order summary' and go to Payment Button Styling:
The button should always be big and easy to tap. Also, notice the CTA button copy is super specific - there's no room for doubt. The users know what the next step is.
Also, here's the back button on step #2 of this checkout form that leads people back to the previous step:
You can add the contact details of the store right below the logo of your store. This will help you take care of their security concerns, right at the beginning.
To set this up, click on the pencil icon next to the logo and add the details in the contact information section:
Next, take a look at the trust badges on the checkout page:
This is a genius hack. Allow users to edit their order details while they are on the checkout page - and this is especially useful on the mobile. The user is in a hurry, he can easily make mistakes and may even change his mind in the last minute.
Make room for the errors. The cart section on the checkout page built by Aero allows users to change the quantity of item(s) they're purchasing, delete and recover deleted items.
Here's how it looks:
Configure this from the form section in Aero. Drag and drop the 'products' field into any section (wherever you'd like to display this editable cart).
There you go! Those were some super handy tips to optimize your WooCommerce checkout page for mobile.
Go to Aero Checkout and discover all its features in details. Also, leave a comment and lemme know your favourite tactic.