WooCommerce Checkout Page Design: Case Study Of Wardee Harmon

Tavleen Kaur
September 2, 2019
WooCommerce Checkout Page Design: Case Study Of Wardee Harmon

Recently, we spoke to Wardee Harmon of TraditionalCookingSchool.com to see her checkout page design and understand her strategies.

In this post, we'll break down some of her techniques for you so that you can implement them in your own business.

Wardee is very generous and freely shares what she knows. You can benefit a great deal from the time that she has spent in trenches.

By the end of it, you'll know how to make your checkout more effective, and as a bonus, we'll see how to sell memberships through order bumps.

First up, How Wardee Got Started With Traditional Cooking School

Wardee has created a remarkable space on the internet for sharing traditional cooking recipes and teaching absolute beginners how to master healthy cooking.

It was in 2010 when her (third) son was diagnosed with eczema that she felt the need to explore traditional cooking.

And once she did it, it not only cured her son of eczema completely but began to influence the overall health and wellbeing of her family positively. So she started writing blogs and sharing recipes online.

But, her readers wanted more from her!

Today her business revolves around selling ebooks, courses, select physical products (like t-shirts and bibs), and even a membership site. 

However, at the heart of it all is a thriving community of traditional food lovers.

If you remove the revenue, money and all of that, we really want to help people get healthier, at the core.
-- Wardee Harmon, Founder (Traditional Cooking School)

Her team has grown from just her husband and her to about 20 people, including the support staff.

Take your notebook out- there's plenty you can learn.

The Best Checkout Page Design Is One That Makes Users Feel Confident

Wardee mentioned to us that 1000's of transactions take place on her store each month while remains anxiety-free.

So we took a look at her checkout page to see what makes it tick:

checkout page design

Checkout Page Design Of Traditional Cooking School

Notice what makes Wardee's checkout page convert: 

  • The image showing the product in action is clear & attention-grabbing.
  • The quantity adjuster at the top eliminates the need for a separate cart.
  • The reasons at the right-hand side are value-loaded and help users compare that bib with the others in the market.
  • The order summary section is labeled as "What you're getting". Also, the shipping charges & taxes are clearly defined.
  • Other sections like guarantee, privacy, and questions/support add the much-needed elements of credibility to the page.

Mobile UI of Wardee's Checkout Page

Let's look at how this page looks on mobile:

The logo takes center stage at the top and makes her checkout look perfectly on-brand. Also, you can clearly see what you're ordering right above the fold - so there's no room for confusion.

Plus the sticky 'Place Order' button ensures they never get lost.

Checkout Page Optimization Strategies As Recommended By Wardee

Let's explore Wardee's top strategies in this section.

#1: Use One-Page Checkout To Eliminate Friction

The conventional approach says send people to a product page from the category listing, where they can click on Add to Cart. Then send them over to the cart page and finally to the checkout page.

Wardee looked at the flow and realized that she didn't need these unnecessary steps in the middle. So when you click on a product listed on her store, she'll send you straight to the checkout.

The checkout is specially built to sell the item the user clicked on. Hear her talk about her checkout page design:

Wardee believes that users should have a clear idea of what they're buying. Even if they get distracted - the section at the top serves as a reminder.

There's a clear image of the item with desirable benefits written in about 2-3 lines. By eliminating the cart in entirety, Wardee offers her prospects a faster and smoother route to checkout. This strategy works for her!

People often end up abandoning the cart when they don’t know exactly what they have in their cart! This tool (AeroCheckout) allows you to specify what the customers are getting and make them comfortable... - Wardee

Here's an example of her membership free trial checkout page:

This is our Shop checkout template (inspired by Shopify).

#2: Add Security Seals And Social Proofs To Your Checkout Pages

This is one of the critical strategies to ensure that your checkout wins the heart and wallets of your prospects.

Wardee puts a seal at the top of her checkout along with the product title, description, and image to make it appear genuine and trust-worthy.


A seal of satisfaction signifies that the product is genuine in terms of quality. It also shows that the customer can trust the product. At least, they can go by the product description and make the purchase.

She uses the sidebar to display the testimonials and benefits of the product she's selling:


The image of the reviewer accompanies the testimonials - and notice, they're not product-specific. But are about her products and the business in general, which is excellent for building trust and rapport.

#3 Use Trust-winning Checkout Page Design + Welcoming Language

Wardee has given a lot of thought to the language on her checkout page. She uses the 'Classic' checkout template in Aero Checkout.

Let's hear her talk about her favorite templates, the edits to the microcopy, and the overall impact:

Joshua Porter, the founder of Microcopy, had once designed a checkout page as a part of an e-Commerce project in his company. The page asked for billing information.

He kept receiving notifications of transactions getting failed due to billing address errors. The address which some customers entered didn’t match with the one linked to their credit cards.

Joshua came up with a copy and added it to the checkout page (highlighted in blue).


Surprisingly, he didn’t receive any payment failure notifications since then. A simple line hugely saved their support time, increased conversions and brought in more revenue.

Wardee too knows that making people feel at ease is the key to persuading them.

She uses a user-friendly, welcoming, and trust-building language to talk to her users.

For example, instead of 'enter payment details,' the text reads - 'verify your payment info.' And instead of 'order summary,' she says, 'what you're getting':

The more at ease your customers are on the checkout, the more readily they will buy your products.

#4 Use Product-Selector To Let Users Select Multiple Items

Wardee uses a Product-Selector on her checkout page. It lets users select one or multiple products from a given list of items on the checkout page.

There are broadly 3 cases for implementing a Product-Selector:

  1. Allow buyers to select any number of items and adjust their quantity
  2. Allow them to choose only one item from the list
  3. Force-sell a bundle with all the products pre-selected

I. Allow buyers to select any number of items to boost order value

You can use this setting to allow buyers to choose whichever products they want from the list and the number of units (s).

Here’s Wardee’s product selector on the checkout page:


The ticks on the checkboxes (highlighted with yellow) are the ones that the customer has selected to purchase.

Notice the quantity incrementer that allows users to adjust the number of units.

II. Allow them to select one of the options from the list

This option allows prospects to choose only one of the given items.

Let us look at one of Wardee’s checkout pages which has such a Product-Selector enabled:


As it shows, her buyers can choose between any one of the cooking school subscriptions out of the two listed - either monthly or annually.

This strategy is useful because it allows her customers to choose the smaller plan and minimize their risk OR choose the annual plan and pocket handsome savings. The users feel in control of their decision.

She uses the small real estate effectively to upsell the yearly plan by mentioning that “it’s like getting three months FREE! Works out to just $35/month”.

You can use this same technique to upsell users a higher volume of your product too. For example - 'buy 1 and save X' or 'buy 3 and save 2X'.

III. Force-sell, a bundle with all the items in it

In this setting, users are displayed with pre-checked checkboxes, listing out all the products that the user gets with the purchase.

For example, a user wants to buy a shaving set. A product selector will appear with all the components (like foam, razors, blades) listed and ticked.

If the customer has to buy, he can either buy them all or nothing.

#5 Make The Most Of Order Bump: Wardee Uses It To Sell The Free Trial Of Her Membership

A FREE Trial offer is providing access to your membership site for a specified duration of time at no charge.

After the FREE Trial period ends, they are charged on a monthly, quarterly, or yearly basis to stay a member.

Wardee offers a free trial of her membership program, and her checkout page design has an order bump section where she sells it. It allows users to check a box on such the checkout page and add the $0.00 trial to their order.

Let’s take a look:

Wardee’s membership plan has 15+ courses in them, and her members can access them 24/7 at a low monthly cost. But they can also get these courses à la carte. She offers order bumps on some of her order forms to upsell a 30-Day Free Trial of the membership plan.

A quick note on Order Bumps:

  • Order Bumps are checkout page offers that can be added to the order with one tick on the checkbox
  • Generally, people don’t give much time to read this section, therefore keeping it short and persuasive helps a lot

Limited edition items, Complementary products, ebooks, free trial offers make excellent order bumps. For more details, see our post on order bumps.

On why free trials work as order bumps...

Free Trial Offer in the order bump works like a charm because they’re going to submit their payment details anyway on this page. So they practically only have to tick a box and add the $0.00 item to their order.

According to themembershipguys.com, here are a few questions that people have before buying a paid membership program:

  • Is the membership program meant for me, and does it solve my problem?
  • Will I even like it and want to stay?
  • In case I don’t, can I cancel my membership?

That’s why you need a free trial plan so that your prospects can see it for themselves and if it works, then they can stay on.

Be sure to...

  • Give people a chance to see what’s behind the paywall and interact with it for a specified number of days
  • Convey to them that they can cancel with just one click, so they feel confident about adding it to their order
  • Highlight the benefits of the deal. For example, ‘here's what you’re getting…’, ‘this is what you’re saving…’, ‘it’s a one-time offer…”

“We have a good retention percentage on the acceptance. Around 40% of buyers choose to keep their free trial after 30 days. We get 2-3 times more new members, with the free trial than without it.”
-- Wardee on free trial as an order bump.

To Wrap It Up

Wardee was pretty impressed with the support team and of course the tools. Here's what she said:

You guys are on the top of my list for support. I have high expectations from the products that I work with and the service. Since our business is large- it gets complex and it demands more tools. While setting up AeroCheckout, I had 1 or 2 questions so I emailed you guys and got replies within an hour. We were in different time zones but still, the replies were on-time. It’s been more than a year and whenever I have asked questions, you have always put things in. You also improved a few things, based on my suggestions. So, it’s all been amazing!

So what's stopping you from making your checkout page design trust-worthy and revenue-generating? Review the language you use- can you make it more welcoming?

Do you have anxiety-curbing testimonials at the final pitstop?

Think of ways you can incorporate the order bump section and the product selector to upsell at the checkout.

Author: 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 FunnelKit (formerly WooFunnels), 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.
Ready to create revenue-generating funnels in Wordpress?
Click Here

Increase your sales, starting today.

Grab Our Exclusive Bundle