Overview
SnackStation is a headless food ordering platform built to provide a modern ordering experience while keeping the management of products and orders within WordPress and WooCommerce. Instead of using WooCommerce’s traditional frontend, I separated the customer-facing experience from the WordPress backend. The result was a React-based storefront communicating with WooCommerce through APIs, while WordPress remained responsible for managing the underlying commerce data.
The Problem
The goal was to build a food ordering experience that felt more like a modern web application than a conventional WordPress/WooCommerce website. The frontend needed to provide a smooth product-browsing and cart experience, while the backend still needed to handle the operational side of the business, including products, orders, and WooCommerce's existing commerce infrastructure. The challenge was therefore not simply building a storefront. It was creating a clean separation between the customer experience and the commerce backend, while ensuring that both sides could communicate reliably.
Approach
I treated SnackStation as a headless WooCommerce application rather than trying to customise WooCommerce's existing frontend. The React application became the customer-facing layer, while WordPress and WooCommerce remained the backend responsible for products, orders, and commerce operations. The architecture was therefore split into two main parts: Frontend -React + Vite -Customer-facing ordering interface -Product browsing and cart interactions -API-driven communication with the backend Backend -WordPress + WooCommerce -Product and order management -WooCommerce REST API -CoCart for cart functionality -Paystack for payment processing This gave me much more control over the frontend, but it also meant I had to deal directly with the technical boundaries between the two systems instead of relying on WooCommerce's built-in frontend behaviour.
Development
Building the React Storefront The customer-facing storefront was built from scratch with React and Vite rather than using WooCommerce's traditional frontend. This meant the UI, application flow, and interactions could be designed around the actual ordering experience instead of being constrained by WooCommerce templates. Connecting React to WooCommerce WooCommerce remained the source of truth for the store's products and orders. Rather than having React interact directly with WordPress's database, the frontend communicated with the backend through APIs. This kept the responsibilities of the frontend and backend separate while allowing the React application to consume the commerce data it needed. Working Through the Cart The cart was one of the areas that required the most development attention. The initial goal was to make the React frontend work with WooCommerce's existing cart behaviour. But because the traditional WooCommerce cart is built around assumptions about its own frontend and session handling, reproducing that experience cleanly in a separate React application wasn't straightforward. This eventually led to the decision to introduce CoCart as the API-based cart layer. Payment Integration Paystack was integrated into the ordering flow to handle online payments. The payment process needed to fit into the wider WooCommerce order flow rather than existing as an isolated payment step. This meant making sure the frontend, payment process, and WooCommerce backend could work together as one ordering experience. Separating the Frontend and Backend The React application was deployed separately from the WordPress installation. That separation was one of the main reasons for choosing the headless approach in the first place: WordPress could continue handling the business and commerce side while the frontend remained an independent application that could be developed and deployed on its own.
Challenges & Fixes
The most difficult part of SnackStation was getting the WooCommerce ecosystem to work reliably in a headless environment. What initially looked straightforward turned into weeks of troubleshooting WooCommerce addons, cart behaviour, API responses, and the differences between WooCommerce’s traditional frontend and a separate React application. The cart became the biggest pain point. WooCommerce’s standard cart relies on its own frontend and session-based behaviour, which created inconsistencies in a headless setup. We spent weeks testing different approaches and debugging addon interactions to make the cart reliable across the frontend and backend. Eventually, rather than forcing the traditional WooCommerce cart architecture into a headless application, we changed our approach. CoCart became the solution. CoCart provided the API-first cart layer the React frontend needed, allowing us to manage cart operations through dedicated endpoints and communicate with WooCommerce more reliably. The switch was a turning point. Instead of fighting WooCommerce’s traditional cart behaviour, we could use an architecture designed specifically for headless commerce. It was one of the most frustrating parts of the project, but also one of the most valuable learning experiences.
Outcome
SnackStation resulted in a functional headless food ordering platform where the customer-facing experience and commerce backend operate as separate layers. The project demonstrated my ability to work beyond conventional WordPress development and combine React, WooCommerce APIs, headless architecture, cart APIs, and payment integration into a single working system. More importantly, it gave me practical experience designing around the limitations of headless commerce and solving the challenges that arise when a traditionally coupled system is separated into independent frontend and backend applications.
Gallery
/