Find Your Perfect Upsell Offer
5-Part Actionable Course with a Free Bonus Template

Name

P.S: I hate boring emails too. You'll only get bite-sized action bombs you can use.

Customize WooCommerce Checkout Page: Why Your Current Checkout Isn’t Converting

Are you looking for ways to customize WooCommerce checkout page so that it converts better, you’re at the right place.

Your checkout page is where money changes hands.

But because it’s the final step in the sales process, most store owners never give it the attention it deserves.

They focus on directing more traffic to their store but not so much on the final step in the journey i.e. closing the sale.

Default checkout pages are not designed to close sale. They’re only designed to ask for payments when the prospect is fully ready to swipe his card.

Therefore in this post, I’ll teach you everything you need to know to customize your checkout page and rev up your conversions at the final step. We’ll be using Aero Checkout to build a custom WooCommerce checkout page.

Why should you customize WooCommerce checkout page?

The other day while shopping at a clothing store, I shortlisted 6–7 t-shirts. And after trying them on, I finalized 3.

But when I went to the checkout counter, I was welcomed by a long queue of shoppers.

customize woocommerce checkout - long queue of shoppers
Long queue at the checkout counter of an apparel store

I wasn’t willing to kill time by standing in one long queue so I quickly changed my mind and kept the tees back. Yes, what a shame! I was all set to pop my wallet out and pay but their checkout flow was not optimized.

Contrast this with the checkout experience at the Apple store:

Apple care managers are spread across the store carrying hand-held card swiping machines. Go to one of them, clear your doubts and make the purchase when you’re ready.

No long queues and no time wasted! Goes without saying, fast, safe and easy checkout translates into more sales and revenues for the store.

Friction-less checkouts: What’s wrong with your current WooCommerce Checkout Pages?

If you’re worried about why your WooCommerce checkout page is not converting well, read the reasons below.

You’ll quite likely agree with most of them:

1. You cannot add custom fields and re-order fields easily

You cannot add new, remove or even re-order form fields with a few clicks or a simple drag & drop.

This is actually a major limitation because if you’re selling an information product and do not want to collect shipping details- you should be able to remove those fields with ease. Or decide the order in which you want to collect information.

You can’t even add new sections, for example, if you want to ask them:

‘How did you discover us?’ You’ll have to write custom code for something as basic.

2. You can’t divide the checkout form into multiple steps

As per a case study published here, multi-step checkout form outperformed the single step checkout form by a huge margin. Turns out, the multi-step checkout form generated 151 additional leads based on 1100 visits.

When you break the checkout form into 2–3 steps, it looks shorter and digestible in the first glance, leading more people to approach it with an intention to complete it.

Take a look at this optimized checkout page:

3. You cannot highlight your satisfaction guarantee

People are generally skeptical about making a purchase online either because they’ve been burned before or have heard stories about others.
Therefore you must make it clear that if they don’t like your product they have a way to return it and claim their money back.

Take a look at the guarantee on BumbleBeeLinens.com:

ECommerce Checkout page with guarantee section
Checkout page of bumblebeelinens.com with guarantee section

Even if you don’t have a generous refund policy, let them know why you don’t and how much you care about ensuring that they get exactly what they’re ordering.

4. You cannot embed the checkout form on a landing page

It’s great to be able to embed checkout forms on sales pages/landing pages because you can then use them as marketing assets.
By directing traffic to these, you can eliminate the friction from the buying process and make people convert faster. Take a look at embedded checkout form on a sales page for an ebook:

Two Step Checkout Form Embedded on Landing Page
One page checkout (Embedded checkout form on a sales page)

The biggest advantage of a one-page funnel is that there’s no back and forth involved here, users can stay on the same page and fill out the form real fast.

5. There’s no room for deal-sealing testimonials

As per a test conducted by QuickSprout, the conversion rates were 6.38% better when testimonials were used. Social proof arrests fears and locks the sale.

Take a look at how XeroShoes features testimonials about the brand:

Customize WooCommerce Checkout Page: The anatomy of a high-converting checkout

Want to optimize the WooCommerce checkout page for more conversions, watch this video.

We’ve used Aero Checkout to optimize the checkout flow:

 

#1: Cart Items

Showing the items added in cart on the checkout page is akin to the waiter repeating the order for you at a restaurant. It acts as a sign of assurance and the user can put a final stamp of approval on the carted items.

customize woocommerce checkout page
Customize WooCommerce Checkout Page – Show Items in Cart

#2: Single Step or Multi-Step

You can decide whether you want to break down your checkout form into multiple steps or not.

A multi-step checkout form appears more digestible and easy to fill out. And you can decide what information you want to capture and what step:

Enable the progress bar to indicate progress so that your shoppers know where they are in the purchase journey. One study shared by Kissmetricss showed that respondents felt more engaged when filling out survey with the progress indicator.

=The call to action button matters too. In a test described here, Gumballs.com saw a 20 percent increase in paid conversions when they switched their checkout button copy from “Proceed to Checkout” to “I’m Ready to Checkout”.

You can even say ‘Continue to Billing Details to let them know what’s on the next step. A specific and clear button text will lead more people to click it.

#3: Quantity Upgrade Option

Let buyers change the quantity of the item(s) they’re purchasing on the checkout page. This can help increase your order value in the final step.

customize woocommerce checkout page
Configure the quantity selector on your checkout page

#4: The Satisfaction Guarantee

Let shoppers know that they have a way of returning the item in case not satisfied and this will make your conversions soar.
Use this section to highlight how you go above and beyond to ensure their satisfaction. If you have a generous return policy, this is where you should highlight it to arrest their fears.

Customize WooCommerce Checkout Page - Guarantee/Refund Details
Customize WooCommerce Checkout Page -Show  Satisfaction Guarantee

#5: Testimonial/Reviews

If people are going to buy multiple products from your shop, it’s obvious that you cannot feature testimonials/reviews of a single product.
But this doesn’t mean that people do not have hidden objections that credible social proof can’t take care of.

So use the testimonial section to feature generic reviews about your store so that your prospects know you’re doing good business.

custom woocommerce checkout page with testimonials
Testimonial section on custom WooCommerce checkout page

#6: Trust Seals

As per a case study published on pud.com, the founder of a website called DistroKid added security seals on his checkout form.
This increased his conversions by 60%.

You can use trust seals from your SSL certificate provider, payment processor or hosting company. You can even use Better Business Bureau seals as it works well.

customize woocommerce checkout page with trust seals
Add trust seals on your custom WooCommerce checkout page to evoke trust

#5: Post-Purchase Support

Let your prospects know that you’re an email or a phone call away and they can get in touch with a real person. They may never actually use those details but just knowing that the option exists, reassures them.

custom woocommerce checkout page
Customize WooCommerce Checkout Page with Post-Purchase Support Section

Add a picture of yours or your customer care rep to build a personal connection.

The best part: You’ll come across a goldmine of insights through these casual conversations with your prospects. And you can always port this knowledge back into your business.

#6: Why Buy From Us

Use this section to highlight 2–3 credible reasons why they can trust your business with their money. Make sure these reasons are specific and persuasive. No rambling here. Take a look at how this would look:

woocommerce checkout page
The ‘Why Buy From Us’ Section

#7: Order Bump

The order bump is a great little technique to increase order value at the final step. Order bumps are pre-checkout offers that the user sees on the checkout page.
Even though these offers are made pre-checkout, keep in mind that they do not come in way of the main purchase.

Think of low-dollar, no-brainer complementary items that the user can add to their cart with a single tick on the checkbox.

Custom woocommerce checkout page with order bump
Order Bump on Custom WooCommerce Checkout Page

These could be extended warranty in case of electronic items, low-dollar membership trial offers, limited edition items etc.
You do not have to configure order bump for every product, you can add bump offers to their order based on what’s in their cart.
Take a look at the rules you have at your disposal to decide where you want to show the bump:

custom
Rule Builder for Order Bump

#8: Mobile-Optimized Checkout Experience

As per a study conducted on 100,000 stores by Shopify, 50.3% of all traffic comes from mobile. So you shouldn’t overlook this massive optimization opportunity.
Also, another very interesting study published by RetailDrive concluded that people are not completing their purchase on a single device. They switch devices in the middle of their shopping journey.

Being able to control what checkout widgets show up on the mobile is crucial to ensuring a smooth shopping experience.

mobile optimized woocommerce checkout page
Control the visibility of widgets on mobile

As more mobile users rely on their smart devices to access the web, websites need to be more adeptly designed to give them the simplified, convenient and secure checkout experience they want. Here’s an interesting resource on mobile optimizing your checkout page.

#9: Embed Checkout Form For Greater Conversions

You can use your checkout form as an order form to collect payments. Direct traffic to this dedicated landing/sales page such that people explore the product and make the payment right when they’re ready.

WooCommerce one page checkout (embedded checkout form)

This is great for getting a solid return on your investment in Facebook/Instagram ads. You can even add a countdown timer to this page and set this page to expire after a chosen date or after a set number of orders have been collected.

Conclusion

If you’re looking to customize your WooCommerce checkout page, use this article as a guidepost. You can use Aero Checkout to create a custom WooCommerce checkout page.

Once you’ve created your checkout page, you can set it to the default option and it’ll become your global checkout.

A high-converting checkout page is the key to more conversions and more money in the back. Especially the order bump element can directly contribute to your revenue and increase your returns on ad spends. I see no reason why this system will not benefit you.

Here’s wishing you more sales in 2019! Got questions? Pop them in the comments below.

Tavleen Kaur

Tavleen Kaur

Tavleen is a conversion strategist at XLPlugins. She helps store owners identify hidden opportunities in their store to make more sales. Reach out to her to learn more about turning your WooCommerce store into a cash-generating asset.