What is Headless WooCommerce?
Anytime someone says headless, it makes you worry a bit, right? I mean, it's a strange metaphor to use for anything good. But when it comes to headless WooCommerce, it's not a bad thing. It's a really good thing. And the reason it comes up today is a tweet (see below) that was published this past week. It was about a specific WooCommerce store, and the news was something I've been eagerly waiting to share.
But let's first back up and answer the core question: what is headless WooCommerce?
Headless WooCommerce means you don't use the user interface (UI) of WooCommerce. Instead you connect the WooCommerce store via an API to a completely different UI, written in another programming paradigm / language.
Why would you do that?
Let's look at a silly but simple example.
Imagine you're the owner of an incredible restaurant. But it's really small – only 4 or 5 tables. So you can barely serve the number of guess that you want to.
You're always packed – mostly because your recipes are absolutely amazing. What do you do?
Imagine you create another part of your business that is a catering unit. You use the kitchen like always, but instead of serving food at the 4-5 tables, you take the food out to other spots and serve it everywhere else. Sure, you have to get a food truck, but that's not the point. The real point is that you can serve way more people.
That's a headless restaurant. And people who embrace headless WooCommerce are in the same spot – they realize that their site is limiting what they can do (including how many they can serve) and they want to do something about it. So they break out the experience and push it out to more folks.
How does Headless WooCommerce work?
The illustration is interesting but metaphors can only go so far. So let's talk about how this actually works.
What you do is take the normal WooCommerce store and still use it for your product catalog, your inventory, and your shopping cart. In other words, your store management team doesn't have to learn any new systems. They still put data into WooCommerce and it's the definitive source for the product catalog.
Your payment gateways and configuration of shipping fees, taxes, and more are all the same.
But then you build a React JavaScript front-end. It's completely different than your PHP-based WooCommerce store. The UI and UX can be super responsive.
- How does it populate the catalog? By hitting your WooCommerce store.
- How does it know if a product is in stock? By hitting your WooCommerce store.
- How does it know what variations are available? By hitting your WooCommerce store.
By connecting to the WooCommerce store via GraphQL and WooGraphQL, you can run calls back to the store in realtime (without refreshing the React UI).
And when they go from their cart to checkout, guess what? They get routed back to WooCommerce to finish the transaction.
You get the best of designing a modern UI with as much interactivity as you like, and super fast page loads because you're not hitting a database every time you click on something. But you also get the best of WooCommerce without having to recreate an entire platform for inventory, shipping and tax calcs, and more.
Do you have an example?
Glad you asked. I actually do. Last week you may have seen this on Twitter:
https://t.co/SJ2EQAidS3 is a great example of using @GatsbyJS with WordPress, @wpgraphql and WooCommerce + @woographql.
Includes GraphQL based cart system, inventory checks, etc.
Great work @JacobArriola, @Zengy and anyone else at @zeekinteractive that was involved!!
— JSON Bahl (@jasonbahl) January 8, 2021
He's talking about Rudis.com and I know the site well, since we host their WooCommerce store (theRudis.com) on our Managed WooCommerce platform.
I also know the digital agency that build the site, Zeek Interactive, as I regularly recommend them.
If you visit the store you'll see how fast it is. And if you visit a product, you'll see it show you if it's in stock (a call back to the headless WooCommerce instance). If you put it in the cart, it's a React cart. But when you move to checkout, you'll see the url change from “rudis” to “therudis” and that's when you're back on the WooCommerce site.
It's fast and beautiful and powerful. And most importantly, now you know it's possible.