Building a Headless WordPress Site with React Frontend and WooCommerce Backend

In this blog post, we’ll explore how to create a modern, high-performance e-commerce website using a headless WordPress setup with WooCommerce as the backend and React as the frontend. This approach combines the flexibility of WordPress for content management, the power of WooCommerce for e-commerce functionality, and the dynamic, user-friendly interface of React.

What is Headless WordPress?

Headless WordPress decouples the frontend (the user interface) from the backend (the content management system). WordPress serves as the backend, managing content and e-commerce data through APIs, while a separate frontend, built with technologies like React, handles the presentation layer. This setup offers several benefits:

Performance: Faster page loads with a lightweight frontend.
Flexibility: Freedom to design custom user interfaces without WordPress theme constraints.
Scalability: Easier to scale the frontend and backend independently.
Developer Experience: Modern JavaScript frameworks like React provide a robust development experience.

Why Use WooCommerce as the Backend?

WooCommerce is a powerful, open-source e-commerce platform built on WordPress. It provides a robust set of features for managing products, orders, payments, and customers. By using WooCommerce’s REST API, you can seamlessly integrate e-commerce functionality into a headless setup, making it an ideal backend for a React-based storefront.

Prerequisites

Before diving in, ensure you have:

A WordPress site with WooCommerce installed and configured.
Node.js and npm installed on your development machine.
Basic knowledge of React, JavaScript, and WordPress REST APIs.
A code editor (e.g., VS Code).

Step 1: Setting Up WordPress and WooCommerce Backend

Install WordPress and WooCommerce:
- Set up a WordPress site on a server or local environment.
- Install and activate the WooCommerce plugin.
- Configure WooCommerce (set up products, payment gateways, shipping, etc.).
Enable WordPress REST API:
- WordPress comes with a built-in REST API. Ensure it’s enabled (it is by default in recent versions).
- WooCommerce extends the WordPress REST API with endpoints for products, orders, and more. Verify the API is accessible by visiting your-site.com/wp-json/wc/v3.
Generate API Keys:
- In your WordPress admin panel, go to WooCommerce > Settings > Advanced > REST API.
- Create a new API key with read/write permissions.
- Save the Consumer Key and Consumer Secret for use in your React app.

Step 2: Setting Up the React Frontend

We’ll create a single-page React application using modern JavaScript and Tailwind CSS for styling, hosted via a CDN for simplicity.

Create a React Project:
- Since we’re building a single-page app, we’ll set up a basic HTML file with React loaded via CDN.
Fetch Data from WooCommerce:
- Use the WooCommerce REST API to fetch products and display them in your React app.

Here’s an example implementation:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Headless WooCommerce Store</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.development.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.22.9/babel.min.js"></script>
</head>
<body>
  <div id="root" class="container mx-auto p-4"></div>
  <script type="text/babel">
    const { useState, useEffect } = React;

    const App = () => {
      const [products, setProducts] = useState([]);
      const [loading, setLoading] = useState(true);

      useEffect(() => {
        const fetchProducts = async () => {
          try {
            const response = await axios.get('https://your-site.com/wp-json/wc/v3/products', {
              params: {
                consumer_key: 'YOUR_CONSUMER_KEY',
                consumer_secret: 'YOUR_CONSUMER_SECRET'
              }
            });
            setProducts(response.data);
            setLoading(false);
          } catch (error) {
            console.error('Error fetching products:', error);
            setLoading(false);
          }
        };
        fetchProducts();
      }, []);

      if (loading) return <div className="text-center text-xl">Loading...</div>;

      return (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {products.map(product => (
            <div key={product.id} className="border rounded-lg p-4 shadow-lg">
              <img
                src={product.images[0]?.src || 'https://via.placeholder.com/150'}
                alt={product.name}
                className="w-full h-48 object-cover rounded"
              />
              <h2 className="text-lg font-bold mt-2">{product.name}</h2>
              <p className="text-gray-600">${product.price}</p>
              <button
                className="mt-4 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600"
                onClick={() => alert(`Added ${product.name} to cart`)}
              >
                Add to Cart
              </button>
            </div>
          ))}
        </div>
      );
    };

    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<App />);
  </script>
</body>
</html>

Replace API Credentials:
- Replace https://your-site.com with your WordPress site’s URL.
- Replace YOUR_CONSUMER_KEY and YOUR_CONSUMER_SECRET with the API keys generated earlier.
Run the App:
- Serve the index.html file using a local server (e.g., npx serve or a similar tool).
- Open the file in a browser to see your product list fetched from WooCommerce.

Step 3: Enhancing the Frontend

To make the app more robust, consider adding:

Product Details Page: Create a route (using React Router) to display individual product details.
Cart Functionality: Implement a cart system using React state or a library like Redux to manage cart items.
Checkout Process: Use the WooCommerce REST API to create orders and integrate a payment gateway like Stripe.
Styling: Enhance the UI with Tailwind CSS or a custom design system for a polished look.

Example component for a product details page:


import { useState, useEffect } from 'react';
import axios from 'axios';

const ProductDetails = ({ productId }) => {
  const [product, setProduct] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchProduct = async () => {
      try {
        const response = await axios.get(`https://your-site.com/wp-json/wc/v3/products/${productId}`, {
          params: {
            consumer_key: 'YOUR_CONSUMER_KEY',
            consumer_secret: 'YOUR_CONSUMER_SECRET'
          }
        });
        setProduct(response.data);
        setLoading(false);
      } catch (error) {
        console.error('Error fetching product:', error);
        setLoading(false);
      }
    };
    fetchProduct();
  }, [productId]);

  if (loading) return <div className="text-center text-xl">Loading...</div>;
  if (!product) return <div className="text-center text-xl">Product not found</div>;

  return (
    <div className="container mx-auto p-4">
      <div className="flex flex-col md:flex-row gap-6">
        <img
          src={product.images[0]?.src || 'https://via.placeholder.com/300'}
          alt={product.name}
          className="w-full md:w-1/2 h-64 object-cover rounded"
        />
        <div className="md:w-1/2">
          <h1 className="text-2xl font-bold">{product.name}</h1>
          <p className="text-gray-600 mt-2">${product.price}</p>
          <div className="mt-4" dangerouslySetInnerHTML={{ __html: product.description }} />
          <button
            className="mt-4 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600"
            onClick={() => alert(`Added ${product.name} to cart`)}
          >
            Add to Cart
          </button>
        </div>
      </div>
    </div>
  );
};

export default ProductDetails;

Step 4: Deploying the Application

Backend:
- Host your WordPress site on a reliable server (e.g., WP Engine, SiteGround, or a VPS).
- Ensure the REST API is accessible and secure (use HTTPS and API authentication).
Frontend:
- Deploy the React app to a static hosting service like Vercel, Netlify, or GitHub Pages.
- For a production build, use Vite or Create React App to bundle the app efficiently.
CORS Considerations:
- If your frontend and backend are on different domains, configure CORS in WordPress to allow API requests. You can use a plugin like WP CORS or add custom code to your WordPress functions.php:


add_filter('wp_headers', function($headers) {
  $headers['Access-Control-Allow-Origin'] = 'https://your-frontend-domain.com';
  $headers['Access-Control-Allow-Methods'] = 'GET, POST, PUT, DELETE, OPTIONS';
  return $headers;
});

Best Practices

Security: Secure your API keys and use HTTPS for all API requests.
Performance: Implement caching (e.g., WP Super Cache for WordPress) and optimize React components with memoization.
SEO: Use a library like Next.js for server-side rendering to improve SEO, as static React apps may require additional configuration.
Testing: Test API endpoints and frontend components thoroughly to ensure reliability.

Conclusion

Combining a headless WordPress setup with a React frontend and WooCommerce backend offers a powerful way to build modern e-commerce websites. This architecture provides flexibility, performance, and a great developer experience. By leveraging the WooCommerce REST API and React’s component-based architecture, you can create a seamless shopping experience tailored to your brand.

Start experimenting with this setup, and explore additional features like cart management, user authentication, and payment integration to take your headless e-commerce site to the next level!

Posted

August 29, 2025

Knowledge Base

Praeclarum Tech

Tags: