Edge Developer Platform
  • Pages
    • Product Introduction
    • Quick Start
      • Importing a Git Repository
      • Starting From a Template
      • Direct Upload
      • Start with AI
    • Framework Guide
      • Frontends
      • Backends
      • Full-stack
        • Next.js
    • Project Guide
      • Project Management
      • edgeone.json
      • Configuring Cache
      • Error Codes
    • Build Guide
    • Deployment Guide
      • Overview
      • Create Deploys
      • Manage Deploys
      • Deploy Button
      • Using Github Actions
      • Using CNB Plugin
      • Using IDE PlugIn
      • Using CodeBuddy IDE
    • Domain Management
      • Overview
      • Custom Domain
      • Configuring an HTTPS Certificate
      • How to Configure a DNS CNAME Record
    • Pages Functions
      • Overview
      • Edge Functions
      • Node Functions
    • Log Analysis
    • KV Storage
    • Edge AI
    • API Token
    • EdgeOne CLI
    • Pages MCP
    • Integration Guide
      • AI
        • Dialogue Large Models Integration
        • Large Models for Images Integration
      • Database
        • Supabase Integration
        • Pages KV Integration
      • Ecommerce
        • Shopify Integration
        • WooCommerce Integration
      • Payment
        • Stripe Integration
        • Integrating Paddle
      • CMS
        • WordPress Integration
        • Contentful Integration
        • Sanity Integration
      • Authentication
        • Supabase Integration
        • Clerk Integration
    • Best Practices
      • Using General Large Model to Quickly Build AI Application
      • Use the Deepseek-R1 model to quickly build a conversational AI site
      • Building an Ecommerce Platform with WordPress + WooCommerce and GatsbyJS
      • Building a SaaS Site Using Supabase and Stripe
      • Building a Company Brand Site Quickly
      • How to Quickly Build a Blog Site
    • Migration Guides
      • Migrating from Vercel to EdgeOne Pages
      • Migrating from Cloudflare Pages to EdgeOne Pages
      • Migrating from Netlify to EdgeOne Pages
    • Troubleshooting
    • FAQs
    • Contact Us
    • Release Notes
Docs Overview/
Edge Developer Platform/
Pages/
Best Practices/
Building an Ecommerce Platform with WordPress + WooCommerce and GatsbyJS/

Building an Ecommerce Platform with WordPress + WooCommerce and GatsbyJS

This article introduces how to quickly build a high-performance, easy-to-maintain e-commerce website with JAMStack architecture based on Pages templates. It implements commonly used dynamic features such as login, shopping cart, and order, helping you rapidly deploy your own high-performance e-commerce website.


Overview

WordPress powers over 40% of websites online, with a rich and mature ecosystem. Using the WooCommerce plug-in, WordPress can easily transform into a complete ecommerce platform, supporting core features like product management, inventory control, payment processing, and order management. GatsbyJS is a React-based static site generator that leverages modern frontend technology to pre-render site content into static HTML, CSS, and JavaScript files. Combining WordPress with GatsbyJS to build an ecommerce platform achieves complementary advantages. Among them:
WordPress + WooCommerce as the backend for management content and ecommerce features
GatsbyJS as the frontend, responsible for display and user interaction

This decoupled architecture provides multiple advantages:
Outstanding performance: Statically generated pages deployed to EdgeOne Pages enable rapid loading via CDN.
Security enhancement: Separate frontend and backend to reduce attack surface
Scalability: Frontend or backend can expand independently
SEO Friendly: Pre-rendered content helps search engine indexing


Scenarios

1. Small and Medium-Sized E-Commerce Enterprises

For small and medium-sized e-commerce enterprises, funds and technical resources are limited. Using our templates to build an ecommerce platform requires no need to invest a large amount of capital to hire professional development teams. WordPress's low-threshold operation enables employees to quickly start performing content management and store operations, while GatsbyJS's high performance allows businesses to provide users with an excellent shopping experience within a finite budget, helping enterprises stand out in an intense market competition.

2. Content-Driven E-Commerce

If your e-commerce strategy heavily relies on content marketing, such as blog articles, tutorials, and purchase guides to attract customers, this combination will fully leverage WordPress's content management advantages while providing an excellent reading experience through GatsbyJS. Suitable for example:
Fashion e-commerce needs to display product stories and collocation guides
Professional equipment sales require tutorials and operation guides


Building a WordPress Backend

Docker Deployment (Recommended)

Example Scenario: Suppose you want to quickly try building an e-commerce admin backend from scratch.

We provide a docker project that can be deployed directly. You can use the docker container to deploy it on your servers.
For docker environment installation and deployment, see Tencent Cloud Lighthouse Docker Container Environment.
After deployment, open wp-admin: https://your.site.domain/wp-admin/admin.php.
After logging in, you can see the already configured product information and webpage.


Self-Build

Scenario example: If you have your own WordPress service and want to expand e-commerce features, you can also self-configure the environment as follows.

1. Install a plugin
Install the following plug-ins in your WordPress service and activate them:
Advanced Custom Fields
JWT Authentication for WP-API
WooCommerce
WPGraphQL
WPGraphQL for ACF
WPGraphQL for WooCommerce
WPGraphQL JWT Authentication

2. Import/Create Product
After activating the WooCommerce plug-in, click Products in the Navbar to enter the product management page.
Create product based on requirements

or download csv file Download to import.

3. Create Page
First create the following pages for homepage Banner display.
/highlight
/promotion
/sample-page
Click the ACF on the left menu, download the configuration file and import field configuration.
After the import is complete, return to the page created above to edit and fill in ACF data.

Publish after editing.


Deploying to EdgeOne Pages

1. Using Deployment Templates

After completing the setup of the ecommerce management backend, enter the WordPress Woocommerce Template on the Pages platform and click "Deploy"


2. Add an Environment Variable

On the deployment page, click "Environment Variables" and configure the following environment variables:
WP_URL: Fill in your WordPress site address
GATSBY_ENV: Set to production

After successful deployment, click the link to see the complete page.