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
- Custom 404 Page
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

WooCommerce Integration

WooCommerce is the most popular e-commerce plug-in for WordPress, enabling any WordPress website to easily transform into a fully functional online store. As the official recommendation for e-commerce solutions on WordPress (the world's most widely adopted content management system with a market share exceeding 40%), WooCommerce provides complete e-commerce functionality, including product management, order processing, and payment integration. With increasing demands for performance and user experience in e-commerce websites, the industry widely adopts modern static site generators like Gatsby to optimize WooCommerce sites. By pre-rendering dynamic content into static pages, it significantly improves website performance and user experience while maintaining management convenience.
﻿
Overview
This document describes how to build a high-performance e-commerce website by combining WooCommerce with the Gatsby framework on the WordPress platform. In this architecture, WordPress serves as the core of the content management system, WooCommerce provides e-commerce functionality, and Gatsby is responsible for performance optimization. With this composite, you can obtain WordPress's content management capabilities, WooCommerce's e-commerce features, and Gatsby's performance benefits simultaneously, offering your customers a better shopping experience. This article introduces in detail how to achieve integration between WordPress + WooCommerce and Gatsby, as well as how to deploy and accelerate using EdgeOne Pages.
﻿
Getting Started
EdgeOne provides a complete WordPress + WooCommerce + Gatsby integration solution. You only need to download and configure databases to quickly deploy.
WordPress + WooCommerce backend: https://github.com/TencentEdgeOne/wp-ecommerce-docker-demo.git
Gatsby frontend template: https://pages.edgeone.ai/templates/gatsby-woocommerce-template
Download these two templates and deploy them according to the instructions to quickly build an e-commerce website.
WooCommerce integration mainly includes three steps: configure WordPress and WooCommerce, use Gatsby to generate static pages, and deploy to EdgeOne Pages. You can manually configure by following the steps below.
﻿
Configuring WordPress and WooCommerce
You can configure WordPress and WooCommerce in the following two ways:
Method One: Self-Deployment of WordPress (Recommended Way in This Document)
EdgeOne provides a pre-configured WordPress + WooCommerce Docker template for quick self-deployment. This template has integrated MySQL database and configured WooCommerce, and comes with the following essential plug-ins:
Advanced Custom Fields - for custom field management
WooCommerce - Core eCommerce feature
JWT Authentication for WP-API - REST API certification
WPGraphQL - GraphQL API support
WPGraphQL for ACF - GraphQL support for ACF
WPGraphQL for WooCommerce (WooGraphQL) - GraphQL support for WooCommerce
WPGraphQL JWT Authentication - GraphQL API certification
Start by cloning the project to your local system:
git clone https://github.com/TencentEdgeOne/wp-ecommerce-docker-demo.git
cd wp-ecommerce-docker-demo
If you need to perform local verification on the deployment machine, create the .env file in the project root directory and configure the following environment variables:
# Database configuration
WORDPRESS_DB_PASSWORD=wordpress123
MYSQL_ROOT_PASSWORD=somewordpress
MYSQL_PASSWORD=wordpress123
﻿
# GraphQL authentication configuration
GRAPHQL_JWT_AUTH_SECRET_KEY=your-hwt-auth-secret-key
﻿
# Site configuration
WP_HOME_URL=http://localhost  # replace with your site URL
WP_DOMAIN=localhost           # replace with your domain name
WP_HOST=80                    # replace with your site port
After configuring, use Docker to start the project:
docker-compose up -d
After service startup, you can access the WordPress management interface at http://your.site.ip/wp-admin/admin.php.
Note: This Template comes with a pre-installed MySQL database and configured WooCommerce, no additional configuration required. Please timely modify the default password after initial login.
In the WordPress backend, you need to create the following three pages:
highlight - for featured products
promotion - to show promotional events
sample-page - to show example content
﻿
After creating a page, configure Advanced Custom Fields.
Enter the "Custom Fields" menu in the WordPress backend
Click the "Tools" tag
In the "Import Field Groups" section, select and upload the acf-export-2025-02-13.json file (this file is located at the wordpress-data directory under the wp-ecommerce-docker-demo template project)
﻿
Click the "Import" button to complete the import
After the import is complete, enter the "Field Groups" tag
Associate the imported field group with the page type
﻿
After completing the ACF configuration, you need to configure the Field Group to the appropriate webpage. We just match them by name this way to use these custom fields.
Next, let's configure WooCommerce item data. After signing in to the WordPress management interface, click "WooCommerce" in the left menu to enter the WooCommerce management console. Here, you can see ALL data items that need to be configured:
﻿
Since we use WordPress primarily to provide data APIs and the front-end page will be implemented via the Gatsby project, you can skip the "Customize your store" configuration. Pay close attention to the basic features such as products, orders, and payments. If you have questions about WooCommerce configuration, refer to the WooCommerce official documentation.
We do not provide detailed instructions for data configuration here. You can configure it in the WooCommerce management interface as needed.
﻿
Data Verification
After the configuration is complete, we need to verify if the WordPress and WooCommerce APIs can provide data normally. Since we have already installed the WPGraphQL and WooGraphQL plug-ins, we use the GraphQL method for data verification here.
1. WordPress Data Verification
query GetPages {
  pages(first: 1) {
    nodes {
      id
      title
      content
      acf {
        hero_title
        hero_description
        featured_products
      }
    }
  }
}
Return sample: response data
{
  "data": {
    "pages": {
      "nodes": [
        {
          "id": "cGFnZS8x",
          "title": "Highlight",
          "content": "page content...",
          "acf": {
            "hero_title": "Welcome to Our Store",
            "hero_description": "Discover our featured products",
            "featured_products": [1, 2, 3]
          }
        }
      ]
    }
  }
}
2. WooCommerce Data Validation
query GetProducts {
  products(first: 1) {
    nodes {
      id
      name
      type
      status
      price
      regularPrice
      salePrice
      description
      images {
        nodes {
          id
          sourceUrl
          altText
        }
      }
      categories {
        nodes {
          id
          name
          slug
        }
      }
    }
  }
}
﻿
Return sample: response data
{
  "data": {
    "products": {
      "nodes": [
        {
          "id": "cHJvZHVjdC8x",
          "name": "Premium Headphones",
          "type": "SIMPLE",
          "status": "PUBLISH",
          "price": "199.99",
          "regularPrice": "249.99",
          "salePrice": "199.99",
          "description": "High-quality wireless headphones with noise cancellation.",
          "images": {
            "nodes": [
              {
                "id": "cG9zdC8y",
                "sourceUrl": "https://your-store.com/wp-content/uploads/headphones.jpg",
                "altText": "Premium Headphones"
              }
            ]
          },
          "categories": {
            "nodes": [
              {
                "id": "Y2F0ZWdvcnkvMQ==",
                "name": "Electronics",
                "slug": "electronics"
              }
            ]
          }
        }
      ]
    }
  }
}
You can test the GraphQL API by visiting http://your-wordpress-url/graphql. If the data in the above example can be accessed normally, it means the GraphQL API configuration is correct and can be provided for external access.
﻿
Method Two: Using WordPress.Com Official Managed (Beginner Usage)
Visit WordPress.com, register and create a new site
In the site admin backend, go to "Plugins" > "Install Plugin"
Search and install "Method One" for ALL plug-ins in WordPress
Whether managed deployment or self-deployment, the configuration process for WordPress as a headless CMS is similar. Both manage content and provide APIs. We only need to refer to the "Method One" configuration above. Additionally, although managed deployment eliminates server upkeep and environment setup, major cloud services now offer excellent WordPress support, making self-deployment quite convenient.
﻿
Payment Callback Configuration
Before starting static file generation, we need to make a special note about payment callback configuration. This is because our frontend is a Gatsby-generated static website, while the payment process requires real-time payment status updates. WooCommerce supports international payment gateways such as Stripe, PayPal, and Square. You only need to configure the appropriate payment method in the WooCommerce backend, set the required API parameters, and callback URL.
﻿
For frontend query of payment status, WooCommerce offers three methods: REST API, GraphQL, and Webhook. Since the Gatsby template provided by EdgeOne uses GraphQL to query data, here is an example using GraphQL:
query GetOrderStatus($id: ID!) {
  order(id: $id) {
    status
    paymentMethod
    datePaid
  }
}
Example query result:
{
  "data": {
    "order": {
      "status": "completed",
      "paymentMethod": "paypal",
      "datePaid": "2024-03-20T10:30:00"
    }
  }
}
If you need to understand more details about GraphQL queries, see WPGraphQL document and WooGraphQL document.
﻿
Generating Static Files
EdgeOne provides a static site template based on Gatsby. The following command can be used to get it:
git clone --depth 1 --single-branch https://github.com/TencentEdgeOne/pages-templates.git temp
mv temp/examples/gatsby-woocommerce-template .
rm -rf temp
cd gatsby-woocommerce-template
npm install
Now introduce the key configuration in the project.
All GraphQL query statements are located in the src/queries/PagesQuery.js file, including queries for products, orders, page content, and ACF fields. If you need to customize the query content, you can modify the GraphQL query statement here.
﻿
Payment-related components are located in src/components/OrderSummary/OrderSummary.js file. When calling pay, the following key information will be configured:
await checkout({
  shipping: customer.shipping,
  billing: customer.billing,
  paymentMethod: 'cod',
});
Here configured:
shipping address information
billing address information
Payment method (paymentMethod)
This payment request will call the checkout object in file src/api/api.js to execute the payment operation. The final GraphQL query statement is located at functions/common/queries/Checkout.js. If you need to modify the payment logic, you can change it here.
﻿
If you need to modify API interaction for other information, you can modify the GraphQL statements in other files under the functions/common/queries directory.
After understanding the basic structure and key configuration of the project, let's see how to start it up. The template startup is super simple. You only need to set the WP_URL parameter to point to your WordPress site address. When deploying to the cloud, this parameter will be set as an environment variable. Now let's verify the project locally first.
Create a .env file in the project root directory and fill in the following content:
WP_URL=http://your-wordpress-url
GATSBY_ENV=dev
Install dependencies and start the Gatsby project, then enter local preview:
npm install
gatsby develop && edgeone pages dev --fePort=8000
Note: The fePort parameter must match Gatsby's running port to ensure cross-domain authentication works properly.
﻿
﻿
We have completed the configuration of the WordPress + WooCommerce content management system, obtained the frontend template, and verified the local environment. Next, we only need to deploy code to EdgeOne Pages, and your website can officially go live.
﻿
Deploying to EdgeOne Pages
1. Publishing Code to Git
Commit code to the git repository to complete the deployment. Assuming you have created the gatsby-woocommerce-template project and associated the current directory with it, run the following command to commit:
git add .
git commit -m "Initial commit"
git push origin main
﻿
2. Importing a Project to Pages
After submission, if you are already an EdgeOne Pages user and have associated your GitHub account, visit the Console to deploy the corresponding project.
﻿
﻿
3. Adding an Environment Variable
Click gatsby-woocommerce-template, then go to the deployment page and click "Environment Variables" to configure the following environment variables:
WP_URL: Fill in your WordPress site address
GATSBY_ENV: set to production
﻿
Once configured, click the "Start Deployment" button, wait for deployment to complete, and the deployment successful interface will display.
﻿
We have now completed the full deployment process of the WordPress + WooCommerce solution. With this solution, you can:
Use WordPress + WooCommerce to manage content and products, enjoying its powerful CMS and e-commerce features
Leverage Gatsby to generate high performance pages and obtain ultimate access speed
Automate deployment with EdgeOne Pages to simplify ops
Gain global CDN acceleration to enhance user experience
﻿
More Related Content
Learn more about Gatsby features: Gatsby official documentation
Explore more WooCommerce features: WooCommerce official documentation
Custom website style: Gatsby style guide

Overview
Getting Started
Configuring WordPress and WooCommerce
Generating Static Files
Deploying to EdgeOne Pages
More Related Content