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 等扩展插件，构建出商业级别的电子商务网站。