Elementor 和 WooCommerce 共同构成了在 WordPress 上构建自定义在线商店的灵活组合之一。WooCommerce 处理电子商务功能（产品、购物车、结账、支付），而 Elementor 让您可以直观地控制这些商店页面的外观和功能。在本指南中，我们将逐步介绍如何使用 Elementor 构建关键的 WooCommerce 页面，包括产品页面、商店归档和购物车体验。
本教程假设您已安装 WordPress、WooCommerce 和 Elementor Pro。WooCommerce 小部件需要 Elementor Pro，免费版的 Elementor 不包括这些功能。
开始之前需要准备的内容
| 要求 | 为什么需要 | 获取途径 |
|---|---|---|
| WordPress 6.x+ | 核心 CMS 平台 | wordpress.org |
| WooCommerce（免费） | 电子商务功能 | WordPress 插件目录 |
| Elementor Pro | WooCommerce 小部件和主题构建器 | PluginTheme.net |
| 兼容主题 | 您商店的基础 | 主题选择指南 |
| 示例产品 | 设计模板的内容 | WooCommerce → 工具 → 导入示例数据 |
理解 Elementor 的 WooCommerce 构建器
Elementor Pro 在其主题构建器系统中包含一个专用的 WooCommerce 构建器。这使您能够为以下内容创建自定义模板：
- 单个产品页面：控制单个产品页面的布局
- 产品归档：自定义商店页面和分类页面
- 购物车页面：设计自定义购物车布局
- 结账页面：自定义结账表单布局
- 我的账户页面：重新设计客户账户仪表板
每个模板使用 WooCommerce 特定的小部件，这些小部件从您的产品中提取动态数据。这意味着您只需设计一次布局，它将自动应用于所有产品（或特定类别）。
构建自定义产品页面
步骤 1：创建模板
- 在您的 WordPress 管理后台导航到 模板 → 主题构建器
- 点击 "添加新建"，选择 "单个产品" 作为模板类型
- 选择一个预构建的产品页面模板或从空白画布开始
- Elementor 编辑器将打开，面板中将提供 WooCommerce 小部件
步骤 2：添加 WooCommerce 小部件
产品页面的关键 WooCommerce 小部件：
| 小部件 | 显示内容 | 自定义选项 |
|---|---|---|
| 产品图片 | 带缩略图和灯箱的画廊 | 画廊布局、缩略图位置、缩放切换 |
| 产品标题 | 产品名称（H1） | 排版、颜色、对齐 |
| 产品价格 | 常规和促销价格 | 排版、促销标签颜色、布局 |
| 产品评分 | 来自评论的星级评分 | 星星颜色、大小、对齐 |
| 加入购物车 | 数量选择器 + 加入购物车按钮 | 按钮样式、颜色、数量布局 |
| 产品简短描述 | 简要产品总结 | 排版、间距 |
| 产品元数据 | SKU、类别、标签 | 布局、排版、分隔符 |
| 产品数据标签 | 描述、评论、附加信息标签 | 标签样式、边框、间距 |
| 相关产品 | 来自同一类别的产品 | 列数、数量、顺序 |
| 推荐产品 | 手动链接的推荐产品 | — |
步骤 3：布局最佳实践
高转化率的产品页面遵循经过验证的布局模式：
- 折叠区域上方： 产品图片（左侧，50-60% 宽度）+ 标题，价格，评分，简短描述和添加到购物车按钮（右侧，40-50% 宽度）
- 折叠区域下方： 产品数据标签（完整描述，规格，评论）
- 底部区域： 相关产品和追加销售以网格形式展示（3-4 列）
- 信任元素： 运送信息，退货政策，靠近添加到购物车按钮的安全徽章
确保在桌面和移动设备上，添加到购物车按钮在不滚动的情况下可见。使用对比色来吸引注意。
自定义商店页面（产品归档）
步骤 1：创建归档模板
- 转到 模板 → 主题构建器 → 产品归档
- 添加新模板并选择“产品归档”作为类型
- 分配显示条件（所有归档，特定类别或标签页面）
步骤 2：配置产品网格
归档产品 小部件以以下选项显示您的产品列表：
- 列： 2-6 列（3-4 列适合大多数商店）
- 每页产品： 12-24 是用户体验的标准
- 分页： 编号页面，“加载更多”按钮或无限滚动
- 排序下拉菜单： 允许客户按价格，受欢迎程度或评分排序
- 促销徽章： 自定义促销徽章的位置，颜色和文本
对于产品较多的商店，在网格上方添加类别过滤。您可以使用 Elementor 的菜单小部件或像 JetWooBuilder 这样的产品过滤插件来获得高级过滤选项。
设计购物车页面
Elementor Pro 允许您自定义购物车页面布局。一个好的购物车页面应该：
- 在干净的表格中显示产品图片，名称，价格和数量
- 显著显示当前总计
- 包括一个“继续购物”按钮，返回商店页面
- 显示一个 运费计算器，以便客户估算运费
- 在购物车表格下方显示交叉销售产品
Elementor 购物车小部件用可视化编辑器替换了默认的 WooCommerce 购物车布局，您可以为每个元素设置样式——表格边框，按钮颜色，排版和间距。
自定义结账页面
结账页面直接影响您的转化率。Elementor Pro 的结账小部件提供对以下内容的控制：
- 表单布局： 单列或双列账单/运输表单
- 订单摘要位置： 与表单并排或在上方/下方
- 按钮样式： 下单按钮的颜色，大小和文本
- 支付部分： 支付方式的单选按钮或标签布局
- 信任徽章： 在支付表单附近添加安全图标和保证文本
有关结账转化优化提示，请参见我们的 WooCommerce 结账优化指南。
性能考虑
Elementor 向您的页面添加 CSS 和 JavaScript。对于 WooCommerce 商店，性能与转化率直接相关。请记住以下提示：
- 使用 Flexbox 容器 而不是部分/列，以减少 DOM 元素
- 优化产品图片： 使用 WebP 格式，适当的尺寸和延迟加载。请参见我们的 图片优化指南
- 限制小部件数量：每个小部件都会增加标记；仅使用所需的
- 启用Elementor的性能功能：改进的资产加载，改进的CSS加载
- 使用缓存插件： WP Rocket 与Elementor WooCommerce设置配合良好
Elementor WooCommerce的必要附加组件
这些Elementor附加组件扩展了WooCommerce的构建能力：
| 附加组件 | 关键WooCommerce功能 |
|---|---|
| JetWooBuilder | 高级产品网格，自定义档案模板，具有条件逻辑的单个产品布局 |
| Essential Addons Pro | 产品网格，产品轮播，WooCommerce结账 |
| Happy Elementor Addons | 产品类别网格，迷你购物车，产品轮播 |
常见问题
我需要Elementor Pro来使用WooCommerce吗，还是免费版本可以？
WooCommerce特定的小部件（产品图片、添加到购物车、产品数据标签、购物车、结账等）需要Elementor Pro。Elementor的免费版本不包括这些小部件。您可以使用免费版本设计常规页面，但自定义WooCommerce模板需要Elementor Pro。
我可以使用Elementor来设计结账页面吗？
可以。Elementor Pro包含一个结账小部件，替代默认的WooCommerce结账布局。您可以自定义表单字段、订单摘要、支付部分和整体布局。然而，请注意重度自定义可能会破坏支付网关集成——更改后始终测试完整的购买流程。
我如何为不同类别创建不同的产品页面布局？
在Elementor的主题构建器中，您可以为每个模板分配显示条件。为服装创建一个产品页面模板（带有尺码/颜色选择器），为数字产品创建另一个模板（不带运输信息），等等。每个模板仅适用于指定类别中的产品。
Elementor会减慢WooCommerce的速度吗？
Elementor会为任何页面增加CSS和JavaScript的开销。在包含许多小部件的产品页面上，这可能会使加载时间比默认的WooCommerce模板增加0.5-1.5秒。使用Elementor内置的性能功能、优化图片和使用缓存插件有助于减轻这种影响。对于性能关键的商店，考虑使用像GeneratePress这样的轻量主题。
我可以在任何主题中使用Elementor WooCommerce模板吗？
大多数Elementor WooCommerce模板与任何支持WooCommerce的主题兼容。然而，一些主题可能有自己的产品页面样式，与Elementor模板冲突。像Astra、GeneratePress和OceanWP这样的主题旨在与Elementor无缝配合，并为自定义模板提供最干净的画布。
获取Elementor Pro以构建WooCommerce商店
访问所有WooCommerce小部件、主题构建器和100多个专业模板。直观地构建自定义产品页面、商店档案和结账布局。
浏览Elementor Pro →
