WooCommerce 集成
WooCommerce是WordPress平台上最受欢迎的电子商务插件,它让任何WordPress网站都能轻松转变为功能完整的在线商店。作为WordPress(全球最流行的内容管理系统,市场份额超过40%)的官方推荐电商解决方案,WooCommerce提供了产品管理、订单处理、支付集成等完整的电商功能。随着电商网站对性能和用户体验的要求不断提高,业界普遍采用Gatsby等现代静态站点生成器来优化WooCommerce网站,通过将动态内容预渲染为静态页面,在保持内容管理便利性的同时,显著提升网站性能和用户体验。
概览
本文主要介绍如何基于WordPress平台,将WooCommerce与Gatsby框架结合,构建高性能的电商网站。在这个架构中,WordPress作为内容管理系统的核心,WooCommerce提供电商功能,Gatsby负责性能优化。通过这种组合,您可以同时获得WordPress的内容管理能力、WooCommerce的电商功能以及Gatsby的性能优势,为您的客户提供更好的购物体验。本文将详细介绍如何实现WordPress + WooCommerce与Gatsby的集成,以及如何通过EdgeOne Pages进行部署和加速。
快速入门
EdgeOne提供了完整的WordPress + WooCommerce + Gatsby集成方案,您只需要下载并配置数据库即可快速部署:
WordPress + WooCommerce后端:https://github.com/TencentEdgeOne/wp-ecommerce-docker-demo.git
下载这两个模板并按照说明部署,即可快速搭建电商网站。
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.gitcd wp-ecommerce-docker-demo
如果您需要在部署机器上进行本地验证,需要在项目根目录创建
.env
文件并配置以下环境变量:# 数据库配置WORDPRESS_DB_PASSWORD=wordpress123MYSQL_ROOT_PASSWORD=somewordpressMYSQL_PASSWORD=wordpress123# GraphQL认证配置GRAPHQL_JWT_AUTH_SECRET_KEY=your-hwt-auth-secret-key# 站点配置WP_HOME_URL=http://localhost # 替换为您的站点URLWP_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:
1. 进入WordPress后台的"自定义字段"菜单
2. 点击"Tools"标签
3. 在"Import Field Groups"部分,选择并上传
acf-export-2025-02-13.json
文件(该文件位于wp-ecommerce-docker-demo模板项目的wordpress-data
目录下)
4. 点击"Import"按钮完成导入
5. 导入完成后,进入"Field Groups"标签
6. 将导入的字段组与对应的页面类型进行关联配置

完成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 {idtitlecontentacf {hero_titlehero_descriptionfeatured_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 {idnametypestatuspriceregularPricesalePricedescriptionimages {nodes {idsourceUrlaltText}}categories {nodes {idnameslug}}}}}
示例返回数据:
{"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官方托管(新手使用)
1. 访问 WordPress.com,注册并创建新站点
2. 在站点管理后台,进入"插件" > "安装插件"
3. 搜索并安装“方式一”在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) {statuspaymentMethoddatePaid}}
查询结果示例:
{"data": {"order": {"status": "completed","paymentMethod": "paypal","datePaid": "2024-03-20T10:30:00"}}}
生成静态文件
EdgeOne提供了基于Gatsby的静态站点模板,您可以通过以下命令获取:
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
现在我来介绍一下项目中的关键配置点。
所有的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-urlGATSBY_ENV=dev
然后安装依赖并启动Gatsby项目,进入本地预览:
npm installgatsby develop && edgeone pages dev --fePort=8000
注意:fePort
参数需要与Gatsby的运行端口匹配,以确保跨域认证处理正常工作。

至此,我们已经完成了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

3、添加环境变量
点击gatsby-woocommerce-template后,在准备部署界面点击"Environment Variables",分别配置以下环境变量:
WP_URL
:填入您的WordPress站点地址GATSBY_ENV
:设置为production

配置完成后,点击"Start Deployment"按钮,等待部署完成后将显示部署成功界面:

至此,我们已经完成了WordPress + WooCommerce方案的完整部署流程。通过这个方案,你可以:
使用WordPress + WooCommerce管理内容和商品,享受其强大的CMS和电商功能
利用Gatsby生成高性能页面,获得极致的访问速度
通过EdgeOne Pages实现自动化部署,简化运维工作
获得全球CDN加速,提升用户体验
更多相关内容
查看更多WordPress集成方案:EdgeOne Pages提供的WooCommerce模板
了解Gatsby更多功能:Gatsby官方文档
探索WooCommerce更多功能:WooCommerce官方文档
自定义网站样式:Gatsby样式指南