In “5 Things to Do to Ensure the Best Checkout Experience for Customers”, we discussed ways in which you can build an extraordinary checkout page using WooCommerce.
Today, we’d like to take a look at some WooCommerce websites that make use of these checkout design best practices.
Impressive WooCommerce Checkout Page Designs
As we’ve already discussed, convenience, speed, and security are all essential pieces when developing the checkout experience on your WordPress site.
Want to see how some other brands have adapted these best practices for their own purposes? Keep reading.
All Blacks Shop
Fans of New Zealand rugby will already be familiar with this online shop that sells All Blacks clothing and gear. What those fans might not have paid attention to, and what we want to draw your attention to now, is how awesome this checkout page is. And it’s literally just one page!
The checkout page hits all the high points in delivering a truly premium experience to customers:
- One-page checkout
- Contact form asking only for what’s needed
- Option to create or log into an account (but not required)
- Automatic duplication of billing information to shipping fields
- Simple order review widget
- Three well-recognized payment options
All-in-all, the focus here is on simplicity, which should make checking out a breeze for customers.
Big Chill
The Big Chill online appliance store is a pretty fun experience that taps into customers’ sense of nostalgia. The checkout page, however, exudes nothing but modern convenience.
Here are some of the conversion-friendly highlights we want to call your attention to:
- The top navigation bar is gone.
- Breadcrumbs are included instead to let customers know how much work needs to be done to make their purchase.
- An SSL certificate seal has been placed atop the page for security assurance.
- The contact form fields fall in a single vertical line which makes filling it in a quick process.
- Everything is formatted using large fields and type, so customers won’t have issues reading the descriptive labels on the form.
- This is a great example of a WooCommerce checkout that wisely makes use of two pages and two steps in the process. It also does a fantastic job setting expectations with customers right from the very start.
GhostBed
With so many well-known mattress brands out there (think Sealy, Serta, Tempur-Pedic), GhostBed is smart to do everything it can to get a leg up over the competition. In addition to having a beautifully designed WordPress website, the WooCommerce checkout page succeeds in expediting the purchasing process.
But that’s not actually where we want to focus your attention right now. Yes, GhostBed does a nice job streamlining checkout. However, the smartest design choice they’ve made here is in all the subtle trustmarks included at checkout. For example:
- The SSL certificate (which you see in the address bar)
- The Amazon checkout option (is there a more trusted online store?)
- The Google reviews widget in the bottom-left corner
- The direct question about whether or not they can send promotional emails to the customer
- All pricing, taxes, and shipping fees clearly broken out
- Payment provider logos
We would also argue that the live chat is a trustmark as it gives customers a sense of additional security, that the company is there in case they should run into problems during checkout.
Newlyn
Type foundry Newlyn’s website is the epitome of minimalist design and, yet, there’s something very striking about what they’ve done here in terms of color choice, displaying fonts, and so on. As for checkout, you’re in for another impressive experience:
Although they’ve chosen a more muted color for the checkout page (which is a smart choice to reduce distractions), there are hints of the bold purple branding which is a nice touch and doesn’t completely sever the checkout experience from the site.
Also, the returning customer login widget is a smart choice in terms of improving the checkout experience. Newlyn, of course, gives customers the option to check out as a guest, but they also present other convenient login social media login options, too. When convenience and speed are essential to getting customers through to conversion, this sort of design satisfies those requirements really well.
Orange Amps
While you cannot actually purchase amps directly from the Orange Amps website, you can grab branded merchandise as well as pay for music lessons here.
Here are just some of the reasons why we believe this is a well-designed checkout page:
- Customers have the option to log in or fill out the form as a guest.
- An account creation request occurs after they’ve already done the work to fill out the form (which makes sense because then it’s just a matter of creating a password to save their information).
- Form fields are logically structured and easy to tab through.
- There’s no need to re-type shipping information if it’s the same as billing.
- Payment methods include clearly recognizable and well-trusted logos.
Overall, this checkout page does a nice job of streamlining the final step to conversion. It’s also a good example of a company that’s chosen to offload payment processing to a trusted third-party (either PayPal or Sage). If your website is brand new and wants to more easily compel customers to pay for services or products, leveraging the trust they already have in known payment providers would be a wise move.
Wrapping Up
Just because you use a WordPress plugin like WooCommerce or a theme like Astra to build your online store, that doesn’t mean you’re relegated to relying on templated designs that everyone else uses. These are here to help you lay down the essential building blocks, so you have more time and energy to design a totally unique and impressive experience for your customers. The above examples of WooCommerce checkouts is proof of that.
Disclosure: This blog may contain affiliate links. If you make a purchase through one of these links, we may receive a small commission. Read disclosure. Rest assured that we only recommend products that we have personally used and believe will add value to our readers. Thanks for your support!
How can i edit the checkout with astra and elementor?
I can’t find any tutorials…