Free Gift: Checkout Secrets That Convert

P.S: Download now & use them to start improving your conversions in less than 24 hours.

The Anatomy of a WooCommerce Checkout Page That Converts {2019}

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

A checkout page that converts has certain elements that make it so high converting. Let’s take a look at them:

woocommerce checkout page

Here are the highlights of this WooCommerce checkout page:

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

Step #2: Create a 2-step checkout form (add, edit, remove and re-order form fields with a few clicks)

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.

woocommerce checkout - form builder

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:

customize woocommerce checkout page

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.

custom woocommerce checkout page

Next Steps

There you go! I hope you enjoyed learning about how to customize your WooCommerce checkout page.

If you still don’t have Aero Checkout or pre-checkout offer plugin, Order Bump, consider getting them for your store. They will add extra dollars to your business and help you plug the leaks. 

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. 

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Tavleen Kaur

Tavleen Kaur

Do you know after Amazon implemented the 1-click buy system, their sales shot up year-on-year hitting $88.9 Billion mark in 2014? Jeff Bezos attributed it to a friction-free & streamlined buying process. At BuildWooFunnels, we're determined to give you the tools you need to do the same in your business. I am Tavleen and I help you get there faster.

Leave a Comment

Your email address will not be published. Required fields are marked *