产品简介
快速开始
- 导入 Git 仓库
- 从模板开始
- 直接上传
- 从 AI 开始
框架指南
- 前端
  - Vite
  - React
  - Vue
  - 其他框架
- 后端
- 全栈
  - Next.js
  - Nuxt
  - Astro
  - React Router
  - SvelteKit
- 自定义 404 页面
项目指南
- 项目管理
- edgeone.json
- 缓存配置
- 构建输出配置
- 错误码
构建指南
部署指南
- 概览
- 触发部署
- 管理部署
- 部署按钮
- 使用 Github Action
- 使用 CNB 插件
- 使用 IDE 插件
- 使用 CodeBuddy IDE
域名管理
- 概览
- 自定义域名
- HTTPS 配置
  - 概览
  - 申请免费证书
  - 使用 SSL 托管证书
- 配置 DNS 的 CNAME 记录
可观测性
- 概述
- 指标分析
- 日志分析
Pages Functions
- 概览
- Edge Functions
- Cloud Functions
  - 概览
  - Node Functions
KV 存储
边缘 AI
API Token
EdgeOne CLI
Pages MCP
集成指南
- AI
  - 对话型大模型集成
  - 图片大模型集成
- 数据库
  - Supabase 集成
  - Pages KV 集成
- 电商
  - WooCommerce 集成
  - Shopify 集成
- 支付
  - Stripe 集成
  - Paddle 集成指南
- CMS
  - Sanity 集成
  - Contentful 集成
  - WordPress 集成
  - Payload集成
- 身份验证
  - Supabase 集成
  - Clerk 集成
最佳实践
- EdgeOne Pages 插件上线 Dify Marketplace
- 使用边缘 AI 模型快速搭建对话型 AI 站点
- 使用 Shopify 搭建电商平台
- 使用 Supabase 和 Stripe 搭建 SaaS 站点
- 如何快速搭建公司品牌站点
- 如何快速搭建博客站点
- 使用通用大模型快速搭建AI应用
迁移指南
- 从 Vercel 迁移至 EdgeOne Pages：优化您在中国区域的网站部署
- 从 Cloudflare Pages 迁移至 EdgeOne Pages：优化您在中国区域的网站部署
- 从 Netlify 迁移至 EdgeOne Pages：优化您在中国区域的网站部署
排障指南
常见问题
联系我们
产品动态

WooCommerce 集成

本文主要介绍如何基于WordPress平台，将WooCommerce与Gatsby框架结合，构建高性能的电商网站。在这个架构中，WordPress作为内容管理系统的核心，WooCommerce提供电商功能，Gatsby负责性能优化。通过这种组合，您可以同时获得WordPress的内容管理能力、WooCommerce的电商功能以及Gatsby的性能优势，为您的客户提供更好的购物体验。本文将详细介绍如何实现WordPress + WooCommerce与Gatsby的集成，以及如何通过EdgeOne Pages进行部署和加速。
快速入门
EdgeOne提供了完整的 WordPress + WooCommerce + Gatsby 集成方案，您只需要下载并配置数据库即可快速部署：
﻿WordPress + WooCommerce后端﻿
﻿Gatsby前端模板﻿
下载这两个模板并按照说明部署，即可快速搭建电商网站。
WooCommerce集成主要包含以下三个步骤：配置WordPress和WooCommerce、使用Gatsby生成静态页面、部署到EdgeOne Pages。您可以按照下文的步骤手动配置。
配置WordPress和WooCommerce
您可以通过以下两种方式配置WordPress和WooCommerce：
方式一：自行部署WordPress（本文推荐的方式）
EdgeOne提供了一个预配置好的WordPress + WooCommerce Docker模板，让您能够快速完成自行部署。这个模板已经集成了MySQL数据库和配置好的WooCommerce，并且预装了以下必要的插件：
Advanced Custom Fields - 用于自定义字段管理。
WooCommerce - 电商功能核心。
JWT Authentication for WP-API - REST API认证。
WPGraphQL - GraphQL API支持。
WPGraphQL for ACF - ACF的GraphQL支持。
WPGraphQL for WooCommerce (WooGraphQL) - WooCommerce的GraphQL支持。
WPGraphQL JWT Authentication - GraphQL API认证。
首先，克隆项目到本地：
git clone https://github.com/TencentEdgeOne/wp-ecommerce-docker-demo.git
cd wp-ecommerce-docker-demo
如果您需要在部署机器上进行本地验证，需要在项目根目录创建 .env 文件并配置以下环境变量：
# 数据库配置
WORDPRESS_DB_PASSWORD=wordpress123
MYSQL_ROOT_PASSWORD=somewordpress
MYSQL_PASSWORD=wordpress123
﻿
# GraphQL认证配置
GRAPHQL_JWT_AUTH_SECRET_KEY=your-hwt-auth-secret-key
﻿
# 站点配置
WP_HOME_URL=http://localhost  # 替换为您的站点URL
WP_DOMAIN=localhost           # 替换为您的站点域名
WP_HOST=80                    # 替换为您的站点端口
配置完成后，使用Docker启动项目：
docker-compose up -d
服务启动完成后，您可以通过访问 http://your.site.ip/wp-admin/admin.php 进入WordPress管理界面。
注意：
此模板已预装MySQL数据库和配置好的WooCommerce，无需额外配置。首次登录后请及时修改默认密码。
核心
在WordPress后台，您需要创建以下三个页面：
highlight - 用于展示特色产品。
promotion - 用于展示促销活动。
sample-page - 用于展示示例内容。
﻿
创建页面后，需要配置Advanced Custom Fields：
进入WordPress后台的“自定义字段”菜单。
点击“Tools”标签。
在“Import Field Groups”部分，选择并上传acf-export-2025-02-13.json文件（该文件位于wp-ecommerce-docker-demo模板项目的wordpress-data目录下）。
﻿
1. 点击“Import”按钮完成导入。
2. 导入完成后，进入“Field Groups”标签。
3. 将导入的字段组与对应的页面类型进行关联配置。
﻿
完成ACF配置后，您需要将Field Group配置到相应的页面上，我们按名称对应上即可，这样页面才能使用这些自定义字段。
接下来，让我们配置WooCommerce的商品数据。登录WordPress管理界面后，点击左侧菜单的“WooCommerce”，进入WooCommerce管理控制台。在这里，您可以看到所有需要配置的数据项：
﻿
由于我们使用WordPress主要是为了提供数据接口，而前端页面将通过Gatsby项目来实现，因此您可以跳过“Customize your store”（自定义商店）的配置。请重点关注产品、订单、支付等基础功能的配置。如果您对WooCommerce的具体配置有疑问，可以参见 WooCommerce官方文档。
这里我们不对数据配置的具体细节作详细说明，您可以根据自己的需求在WooCommerce管理界面中进行配置。
数据验证
配置完成后，我们需要验证WordPress和WooCommerce的API是否能正常提供数据。由于我们已经安装了WPGraphQL和WooGraphQL插件，这里使用GraphQL方式进行数据验证。
1. WordPress数据验证
query GetPages {
  pages(first: 1) {
    nodes {
      id
      title
      content
      acf {
        hero_title
        hero_description
        featured_products
      }
    }
  }
}
示例返回数据：
{
  "data": {
    "pages": {
      "nodes": [
        {
          "id": "cGFnZS8x",
          "title": "Highlight",
          "content": "页面内容...",
          "acf": {
            "hero_title": "Welcome to Our Store",
            "hero_description": "Discover our featured products",
            "featured_products": [1, 2, 3]
          }
        }
      ]
    }
  }
}
2. WooCommerce数据验证
query GetProducts {
  products(first: 1) {
    nodes {
      id
      name
      type
      status
      price
      regularPrice
      salePrice
      description
      images {
        nodes {
          id
          sourceUrl
          altText
        }
      }
      categories {
        nodes {
          id
          name
          slug
        }
      }
    }
  }
}
示例返回数据：
{
  "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"
              }
            ]
          }
        }
      ]
    }
  }
}
您可以通过访问 http://your-wordpress-url/graphql 来测试GraphQL接口。如果能够正常获取上述示例中的数据，说明GraphQL接口配置正确，可以提供给外部访问。
方式二：使用WordPress.com官方托管（新手使用）
访问 WordPress.com，注册并创建新站点。
在站点管理后台，进入“插件” > “安装插件”。
搜索并安装“方式一”在WordPress安装的所有插件。
无论是托管部署还是自己部署，WordPress作为无头CMS时的配置流程基本类似，都是用来管理内容并提供API接口，我们只需要参考上面的“方式一”的配置即可。另外，虽然托管部署省去了服务器维护和环境搭建，但现在各大云服务对WordPress支持很好，自己部署其实也很方便。
支付回调配置
在开始生成静态文件之前，我们需要特别说明一下支付回调的配置。这是因为我们的前端是使用Gatsby生成的静态网站，而支付流程需要实时处理支付状态更新。WooCommerce支持Stripe、PayPal、Square等国际支付网关，您只需要在WooCommerce后台配置相应的支付方式，设置必要的API参数和回调地址即可。
﻿
对于前端查询支付状态，WooCommerce提供了REST API、GraphQL和Webhook三种方式。由于EdgeOne提供的Gatsby模板使用GraphQL进行数据查询，这里以GraphQL方式为例：
query GetOrderStatus($id: ID!) {
  order(id: $id) {
    status
    paymentMethod
    datePaid
  }
}
查询结果示例：
{
  "data": {
    "order": {
      "status": "completed",
      "paymentMethod": "paypal",
      "datePaid": "2024-03-20T10:30:00"
    }
  }
}
如果您需要了解更多GraphQL查询的细节，可以参考 WPGraphQL文档 和 WooGraphQL文档。
生成静态文件
EdgeOne提供了基于Gatsby的静态站点模板，您可以通过以下命令获取：
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
现在我来介绍一下项目中的关键配置点。
所有的GraphQL查询语句都位于src/queries/PagesQuery.js文件中，包括商品、订单、页面内容和ACF字段等查询。如果您需要自定义查询内容，可以在这里修改GraphQL查询语句。
﻿
支付相关的组件位于src/components/OrderSummary/OrderSummary.js文件中。在调用支付时，会配置以下关键信息：
await checkout({
  shipping: customer.shipping,
  billing: customer.billing,
  paymentMethod: 'cod',
});
这里配置了：
收货地址信息（shipping）。
账单地址信息（billing）。
支付方式（paymentMethod）。
这个支付请求会调用src/api/api.js文件中的checkout对象，执行具体的支付操作。最终的GraphQL查询语句位于functions/common/queries/Checkout.js文件中，如果您需要修改支付逻辑，可以在这里进行更改。
﻿
如果您需要修改其他信息的接口交互，可以修改functions/common/queries目录下的其他文件中的GraphQL语句。
了解了项目的基本结构和关键配置后，让我们来看看如何启动项目。模板的启动非常简单，您只需要设置WP_URL参数指向您的WordPress站点地址即可。在部署到云端时，这个参数会作为环境变量配置。现在让我们先在本地验证项目。
在项目根目录创建 .env 文件，填入以下内容：
WP_URL=http://your-wordpress-url
GATSBY_ENV=dev
然后安装依赖并启动Gatsby项目，进入本地预览：
npm install
gatsby develop && edgeone pages dev --fePort=8000
﻿
至此，我们已经完成了WordPress + WooCommerce内容管理系统的配置、前端模板的获取和本地环境的验证。接下来，我们只需要将代码部署到EdgeOne Pages，就可以让您的网站正式上线了。
部署到EdgeOne Pages
1. 代码发布到 Git
将代码提交到git仓库即可完成部署。假设你已经创建了 gatsby-woocommerce-template 项目，并且将当前目录关联到了该项目，使用以下命令提交：
git add .
git commit -m "Initial commit"
git push origin main
2. 项目导入 Pages
提交完成后，如果你已经是EdgeOne Pages用户且已关联GitHub账户，访问 控制台 部署对应的项目即可。
﻿
3. 添加环境变量
点击gatsby-woocommerce-template后，在准备部署界面点击“环境变量”，分别配置以下环境变量：
WP_URL：填入您的WordPress站点地址。
GATSBY_ENV：设置为 production。
﻿
配置完成后，点击“立即创建”按钮，等待部署完成后将显示部署成功界面：
﻿
至此，我们已经完成了WordPress + WooCommerce方案的完整部署流程。通过这个方案，你可以：
使用WordPress + WooCommerce管理内容和商品，享受其强大的CMS和电商功能。
利用Gatsby生成高性能页面，获得极致的访问速度。
通过EdgeOne Pages实现自动化部署，简化运维工作。
获得全球CDN加速，提升用户体验。
更多相关内容
查看更多WordPress集成方案：EdgeOne Pages提供的WooCommerce模板。
了解Gatsby更多功能：Gatsby官方文档。
探索WooCommerce更多功能：WooCommerce官方文档。
自定义网站样式：Gatsby样式指南。

快速入门
配置WordPress和WooCommerce
生成静态文件
部署到EdgeOne Pages
更多相关内容