A Brand New WooCommerce Checkout Experience

I’m excited to share what I’ve been working on at GoDaddy for the past several months: a super fast, mobile focused, headless checkout for WooCommerce.

This is not a new checkout page template, it’s a completely new experience built from scratch to load faster and help customers checkout faster, especially on mobile.

Modern eCommerce checkouts are fast, mobile friendly, and minimalist. Shopify, Stripe, Square, and others are leading the way, with innovative and customizable solutions.

We wanted to bring the same modern checkout experience to WooCommerce. Merchants can now have a beautiful, fast, conversion focused checkout out of the box.

Demo

Click around the demo below. You won’t be able to fill fields, but you can get an idea how it works.

Features

Mobile First

70% of checkouts are done on mobile devices, so mobile is the #1 focus.

Customizable

Change colors, add your logo, change checkout fields, and more.

Blazingly Fast

Loads instantly from Woo pages, and super fast everywhere else.

But wait, there’s more…

  • View cart contents and totals
  • Change product quantities
  • Address autocomplete
  • Stripe, PayPal, Square, Apple/Google Pay, and GoDaddy Payments support (more coming)
  • Custom checkout fields
  • Login and saved cards
  • Discounts, shipping, taxes

It’s opinionated, meaning it comes with all the best practices out of the box, but you can’t customize it as much as a normal WordPress page. This is intentional, it’s meant to be a Shopify-like experience, where it just works.

How It Works

This is an app that sits on top of WordPress and communicates via API, which gives it a few distinct advantages.

  • It is super fast and can be loaded on any page
  • The UI can be loaded before data is fetched, reducing perceived loading times
  • The design is consistent across sites, without being affected by theme and plugin CSS

It is headless, which means it is a React app that communicates with WordPress using the WPGraphQL and WPGraphQL WooCommerce plugins for the API. (Cheers to Jason Bahl and Geoffrey Taylor for their great work on those plugins!) This approach brings the performance and optimized UI of a headless website inside a normal WordPress installation.

It’s built using the Kodiak React component library, which is something I helped build when I first joined GoDaddy. This library is made to be lightweight, style agnostic, and fully composable.

How to Try It Out

This checkout is now available by request on GoDaddy Managed WooCommerce Stores. Head over there and set up an account, then request to have it enabled.


Posted

in

,

by

Tags:

Comments

4 responses to “A Brand New WooCommerce Checkout Experience”

  1. Alex Standiford Avatar

    SUPER cool Scott! Great work!

    1. sbolinger Avatar

      Thanks Alex!

  2. Emmanuel Joseph Avatar

    Nice one Scott. Amazing experience!

    1. sbolinger Avatar

      Thanks Emmanuel!