In this #TrainingTuesday, we’re talking about the anatomy of WooCommerce checkout page that converts. If the default checkout page isn’t working for you, don’t worry- it’s not working for a lot of store owners.
The native WooCommerce checkout page is only designed to capture payments – it is not designed to pacify the anxiety of shoppers and turn them into confident buyers.
It’s not designed to answer their questions and cinch the deal with trust.
Therefore in this post, I’ll show you how to win the trust of your shoppers by customizing your WooCommerce checkout page.
First, watch this value-loaded & instructional video training:
P.S: If you like our video on how to customize WooCommerce checkout page, do consider subscribing to the channel. It’s free!
- The Anatomy of a Conversion-Focussed WooCommerce Checkout Page
- 2 Genius Little Hacks To Slash Checkout Abandonment & Grow Order Value
- 4 Simple Steps To Customize WooCommerce Checkout Page
- Step #1: Select any product to generate a preview (Leave all other values to a default)
- Step #2: Create a 2-step checkout form (add, edit, remove and re-order form fields with a few clicks)
- Step #3: Customize the design of the checkout page (customize the colours, fonts, and more)
- Step #4: Set this custom WooCommerce checkout page to a default globally
- Next Steps
The Anatomy of a Conversion-Focussed WooCommerce Checkout Page
A checkout page that converts has certain elements that make it so high converting. Let’s take a look at them:
Here are the highlights of this WooCommerce checkout page:
- Distraction-Free Header
The header of this checkout page has the logo of the store and some basic contact details. The logo is not clickable so people cannot exit the checkout page easily. They can’t go right back to the home page by clicking on the logo above.
2. Multi-Step Checkout Form
It is a 2-step checkout form with contact details and shipping address on the first step. On the second step, we’ve got shipping method and payment information.
The progress indicator at the top lets shoppers know where they are in their purchase journey. The CTA button says ‘Continue to Shipping Method’, note it does not say ‘Submit/Continue’. Specificity is important.
3. Neatly Written Order Summary
The order summary on the right-hand side tells shoppers about the product(s) they’re buying and the cost they’re paying. There’s no room for confusion or doubt- everything is very clearly laid out.
4. Mini-Cart Appended On The Checkout Page
The mini cart allows shoppers to adjust the quantity of the item(s) that they’re buying. They can also delete and recover deleted items. Notice the quantity bubble at the top of the product image shows the number of unit(s) they’re carting for a specific item.
5. Trust Seals
As per a survey conducted by ConversionXL, 62% of respondents mentioned that they did have security concerns while making a purchase. They concluded that the presence of trust seals on the checkout page does make a difference.
Here’s a quick look at their analysis of which trust seal will help you cinch the deal:
Google Trusted Store, Paypal and Norton are equally good and you can go with them for your WooCommerce checkout page.
6. Support Section with Image Of a Real Person
As per a research conducted by Visual Website Optimizer, the website with the image of a real person converted 48% higher than one with a stock icon. Presence of a real person’s image reassures people that they won’t be cheated and that they can trust the store. It’s such a great way to make people believe that you’re genuine and are not running away.
Here’s the best part:
They’ll never even use those details to contact you but the mere presence of them makes a lot of difference in their mind.
7. Satisfaction Guarantee
There’s a certain amount of risk involved in online shopping. A credible guarantee can help pacify the anxieties around online shopping. Addressing your consumers’ perceived risk will minimize their worries, and help them shop with more confidence.
Here’s an example of a well-written satisfaction guarantee:
Notice how they say that they’ll do whatever it takes to ensure customer happiness. This goes a long way in building trust.
2 Genius Little Hacks To Slash Checkout Abandonment & Grow Order Value
There are a couple more genius hacks on this checkout page. Let me share those with you.
1. Display savings in absolute number and in percentage
Your shoppers are looking for reasons to abandon the checkout and ghost away. But if you display the savings beneath the item and its price – it’ll give them a strong reason to continue the process.
Everyone likes a good deal.
2. Toss an order bump to make every customer more valuable
An order bump is a low dollar offer on the checkout page. It’s highly relevant to the purchase that they’re making.
In this case, we’ve set up an order bump rule that if they’re buying something from the makeup category, pitch a travel makeup pouch. It’s a low dollar offer and useful to the buyer.
It appears on step #2 of the form:
Shoppers can add this order bump offer to their order with a simple click on the checkbox. The item will instantly get added to their order and order total will be updated on the same page.
4 Simple Steps To Customize WooCommerce Checkout Page
Let’s take a quick look at how to set up a highly optimized checkout page using Aero Checkout.
Step #1: Select any product to generate a preview (Leave all other values to a default)
Aero Checkout requires you to select any product in this section in order to generate a preview. No matter what product you select, this will not have any impact on your checkout page.
Take a look:
You do not need to set any discount or quantity or even need to bother about the three options in the product selection area.
The form builder in Aero Checkout is pretty solid. It lets you add new fields, edit existing fields, remove and re-order fields easily.
You don’t have to write any code to customize the form.
As you can notice, there are form fields on the side – you can drag them and drop them into any of the sections you like.
Let’s look at the products field:
In the general tab, you can write the custom line using merge tags that appear right beneath the product name on the checkout form. Also, notice product deletion has been enabled – this feature allows shoppers to delete the item(s) they don’t want and recover deleted items.
In the advanced tab, do not check any of the options except ‘hide best value tag’:
Step #3: Customize the design of the checkout page (customize the colours, fonts, and more)
In this case, I have selected the shop template because it’s the most well-suited for creating a global checkout page. Notice how you can customize colours, fonts, borders and more using the Customizer:
Simply click on the pencil icon and the editing section will open up in the left window pane.
Further, you can also activate the coupon code on the checkout page by clicking on the pencil icon right next to the order summary:
Step #4: Set this custom WooCommerce checkout page to a default globally
This is the final step. After you’ve created a highly optimized checkout page, turn it into a default checkout page.
There you go! I hope you enjoyed learning about how to customize your WooCommerce checkout page.
Got some suggestions? Need more ideas?
That’s what the comment box is for! Let us know what you think about this quick tutorial.
P.S: We also did a post on Checkout template based on Amazon Checkout Formula.