用 Elementor Pro自定义 WooCommerce 主题中的产品展示模块：完整教学

WooCommerce 是 WordPress 最流行的电商插件之一，而 Elementor 则是深受欢迎的可视化页面编辑器。当两者结合，就能在不编写代码的前提下，打造完全个性化的产品展示页面。

本教程将详细讲解用 Elementor（含 Pro 版功能）自定义 WooCommerce 主题中的产品展示模块，构建更具吸引力和转化能力的电商页面。

一、准备工作

开始之前，请确认以下配置已完成：

• WordPress 网站已安装并激活 WooCommerce 插件
• 已安装并启用 Elementor 插件（建议使用 Elementor Pro）
• 使用支持 WooCommerce 的主题（如 Hello Elementor、Astra、Blocksy、Kadence 等）
• 产品信息已录入 WooCommerce 产品目录

如果使用的是 Elementor 免费版，可视化控制存在部分限制，Pro 版本能解锁全部功能模块。

二、创建产品展示模板的两种方式

Elementor 提供了两种主流方式来自定义产品展示内容：

方法 1：使用 WooCommerce 小部件快速构建产品区块

适合构建首页推荐区、分类页产品组、横向滑块等布局。

操作步骤：

• 打开 WordPress 后台 → 页面 → 新建页面
• 使用 Elementor 编辑页面

• 在左侧小部件搜索框中输入 “Woo”

• 拖动以下组件之一：
  • Products：展示多个产品，可筛选分类、标签或手动选择
  • Product Categories：以网格方式显示商品分类
  • Product Carousel：构建横向滚动的产品滑块
  • Sale Products / Featured Products / Best Selling Products：分别展示促销、推荐、热销商品

• 在“查询”选项卡中选择展示条件

• 设置产品图、标题样式、按钮样式等外观选项

• 保存并发布页面

方法 2：使用主题构建器自定义单个产品模板（Elementor Pro）

适合重建产品详情页中的标题、图像、价格、按钮等布局结构。

操作步骤：

• 打开后台 →Templates→ 主题构建器

• 点击““单一产品”，选择“Add New”

• 使用空白模板或导入一个官方预设

• 拖入以下小部件：
  • Product Title
  • Product Image
  • Product Price
  • Add to Cart
  • Product Rating
  • Product Meta
  • Product Content
  • Product Data Tabs

• 设计完成后点击“发布”
• 在条件设置中选定模板作用范围（如应用于所有产品或某一分类）

三、进阶自定义技巧

这些技巧能让产品展示页面更具表现力和辨识度：

1. 添加动态标签（需 Pro）

Elementor Pro 的“动态标签”功能可以在文本、按钮、标题中嵌入产品字段。

例如：

• 限时促销：{{product_title}}
• 按钮文本：立刻购买 {{product_price}}

2. 使用高级样式设置

• 给产品卡片添加悬停阴影、图像缩放等交互效果
• 调整产品图尺寸比例（如 1:1、4:3）
• 自定义按钮颜色、边框、字体等细节风格

3. 响应式优化布局

Elementor 可为桌面、平板、手机单独设置样式：

• 控制列数，如桌面 4 列，移动端自动变为 2 列或 1 列
• 隐藏移动端不必要元素，如评分、简介等
• 调整按钮和字体大小，保证不同设备都清晰可读

五、总结

Elementor 与 WooCommerce 的结合，极大拓展了产品页面的设计空间。不管是首页商品推荐区块，还是重构产品详情页结构，只需熟练使用产品小部件与主题构建器，即可构建出视觉强、内容清晰的展示模块。

如果对功能需求更高，还可以结合 Crocoblock、Element Pack、Essential Addons 等扩展插件，构建出商业级别的电子商务网站。

联系我们
教程看不懂？联系我们为您免费解答！免费助力个人，小企站点！	客服微信
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：info@361sale.com
④ 工作时间：周一至周五，9:30-18:30，节假日休息