WooCommerce Integration
This document describes how to build a high-performance e-commerce website by integrating WooCommerce with the Gatsby framework on the WordPress platform. In this architecture, WordPress serves as the core content management system, WooCommerce provides e-commerce features, and Gatsby handles performance optimization. This combination allows you to leverage WordPress's content management capabilities, WooCommerce's e-commerce features, and Gatsby's performance advantages to deliver a better shopping experience for your customers. This document details how to integrate WordPress + WooCommerce with Gatsby and how to deploy and accelerate the solution using EdgeOne Makers.
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 primarily consists of the following three steps: configuring WordPress and WooCommerce, generating static pages using Gatsby, and deploying to EdgeOne Makers. You can manually configure them 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.gitcd 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 configurationWORDPRESS_DB_PASSWORD=wordpress123MYSQL_ROOT_PASSWORD=somewordpressMYSQL_PASSWORD=wordpress123# GraphQL authentication configurationGRAPHQL_JWT_AUTH_SECRET_KEY=your-hwt-auth-secret-key# Site configurationWP_HOME_URL=http://localhost # replace with your site URLWP_DOMAIN=localhost # replace with your domain nameWP_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 productspromotion - to show promotional eventssample-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 {idtitlecontentacf {hero_titlehero_descriptionfeatured_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 {idnametypestatuspriceregularPricesalePricedescriptionimages {nodes {idsourceUrlaltText}}categories {nodes {idnameslug}}}}}
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) {statuspaymentMethoddatePaid}}
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 tempmv temp/examples/gatsby-woocommerce-template .rm -rf tempcd gatsby-woocommerce-templatenpm 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-urlGATSBY_ENV=dev
Install dependencies and start the Gatsby project, then enter local preview:
npm installgatsby develop && edgeone makers dev --fePort=8000
Note: ThefePortparameter must match Gatsby's running port to ensure cross-domain authentication works properly.
We have now 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 the code to EdgeOne Makers to make your website officially live.
Deploying to EdgeOne Makers
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 Makers
After the commit is completed, if you are already an EdgeOne Makers user and have linked your GitHub account, access 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 addressGATSBY_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 M to simplify Ops work.
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
Customize website style: Gatsby style guide
