Woodmart 是 WooCommerce 用户非常常用的高级主题,其中的 Compare(产品对比)功能可以显著提升用户对商品差异的理解,帮助他们更快速地做出购买决定。本教程将带你一步步完成 Compare 功能的启用与优化设置。
![图片[1]-如何在 Woodmart 主题中启用与优化 Compare 功能](https://www.361sale.com/wp-content/uploads/2025/12/20251209111746152-image.png)
一、启用 Woodmart Compare 功能
Woodmart 已内置 Compare 功能,只需简单几步便能开启。
打开 Compare 设置位置
进入后台:
Woodmart → Theme Settings → Shop → Compare
启用 Compare 功能
在界面中开启 Enable Compare 开关。
完成后,主题将自动为商品提供对比能力。
![图片[2]-如何在 Woodmart 主题中启用与优化 Compare 功能](https://www.361sale.com/wp-content/uploads/2025/12/20251209111831392-image.png)
二、设置 Compare 页面与短代码
Compare 页面用于展示用户选择加入对比的商品信息。
![图片[3]-如何在 Woodmart 主题中启用与优化 Compare 功能](https://www.361sale.com/wp-content/uploads/2025/12/20251209112021558-image.png)
选择 Compare 页面
在 Compare Page 字段中,选择你希望作为对比结果的页面。
添加对比短代码
Woodmart 会提供一个专用短代码,将其放入该页面中即可显示产品对比表格。
![图片[4]-如何在 Woodmart 主题中启用与优化 Compare 功能](https://www.361sale.com/wp-content/uploads/2025/12/20251209112053541-image.png)
三、设置 Compare 表格要显示的字段
你可以决定 Compare 表格展示哪些产品属性,使用户更容易进行对比。
可选展示字段
常见字段包括:
- 产品图
- 产品标题
- 价格
- 材质
- 尺寸
- 颜色
- SKU
- 库存等
![图片[5]-如何在 Woodmart 主题中启用与优化 Compare 功能](https://www.361sale.com/wp-content/uploads/2025/12/20251209112137391-image.png)
预览对比效果
添加两个以上商品到 Compare 后即可进入 Compare 页面查看最终显示效果。
![图片[6]-如何在 Woodmart 主题中启用与优化 Compare 功能](https://www.361sale.com/wp-content/uploads/2025/12/20251209112210317-image.png)
四、设置空 Compare 页面提示文案
当 Compare 页面没有任何商品时,系统会显示提示语。
编辑提示文字
在 Empty Compare Text 中输入你想显示的内容,例如:
“当前没有商品加入对比,请先选择产品。”
![图片[7]-如何在 Woodmart 主题中启用与优化 Compare 功能](https://www.361sale.com/wp-content/uploads/2025/12/20251209112301970-image.png)
五、设置 Compare 按钮的显示方式
Compare 按钮是用户操作的重要入口,Woodmart 提供多种按钮行为设置。
在产品网格中显示 Compare 按钮
开启 Show button on product grid 后,该按钮会显示在所有产品列表与产品盒子中。
![图片[8]-如何在 Woodmart 主题中启用与优化 Compare 功能](https://www.361sale.com/wp-content/uploads/2025/12/20251209112510790-image.png)
保存按钮状态
启用 Save button state after adding 后,当商品已加入对比时,会显示“查看对比”状态。
![图片[9]-如何在 Woodmart 主题中启用与优化 Compare 功能](https://www.361sale.com/wp-content/uploads/2025/12/20251209112712730-image.png)
六、启用按分类对比(Compare by Category)
Woodmart 支持按分类分组展示对比列表,这是大量商品店铺必备的功能。
开启分类对比
启用 Compare by Category 后,相同分类的对比项目会被自动分组。
![图片[10]-如何在 Woodmart 主题中启用与优化 Compare 功能](https://www.361sale.com/wp-content/uploads/2025/12/20251209112745524-image.png)
显示“更多本分类商品”按钮
开启 Show Compare More Products 后,系统会显示前往对应分类的按钮。
![图片[11]-如何在 Woodmart 主题中启用与优化 Compare 功能](https://www.361sale.com/wp-content/uploads/2025/12/20251209112822666-image.png)
测试功能
添加不同分类的商品,即可在前端 Compare 页面看到分组效果。
![图片[12]-如何在 Woodmart 主题中启用与优化 Compare 功能](https://www.361sale.com/wp-content/uploads/2025/12/20251209112910528-image.png)
七、在 Header Builder 中设置 Compare 按钮样式
Woodmart 的 Header Builder 支持高度自定义 Compare 按钮外观。
进入 Header Builder 并编辑 Compare 元素
路径:
Woodmart → Header Builder → Compare
![图片[13]-如何在 Woodmart 主题中启用与优化 Compare 功能](https://www.361sale.com/wp-content/uploads/2025/12/20251209112957353-image.png)
选择 Compare 图标样式
你可以选择:
- 图标风格
- 图标尺寸
- 背景形状
- 颜色方案
- 数量徽标是否显示
![图片[14]-如何在 Woodmart 主题中启用与优化 Compare 功能](https://www.361sale.com/wp-content/uploads/2025/12/20251209113027279-image.png)
显示分类下拉菜单(可选)
在 Extra 选项中可启用:
- 显示分类下拉菜单(需开启 Compare by Category)
可让用户在头部直接查看对比分类,操作更便捷。
![图片[15]-如何在 Woodmart 主题中启用与优化 Compare 功能](https://www.361sale.com/wp-content/uploads/2025/12/20251209114142994-image.png)
总结
通过本教程,你已经学会了如何在 Woodmart 主题中启用并优化 Compare 产品对比功能。
Compare 功能不仅提升了用户的购物体验,还能增加用户对比商品的兴趣,进而提高转化率。你可以灵活地配置页面、字段和按钮样式,根据自己商店的实际需要来调整。
| 联系我们 | |
|---|---|
| 教程看不懂?联系我们为您免费解答!免费助力个人,小企站点! |
客服微信
|
| ① 电话:020-2206-9892 | |
| ② QQ咨询:1025174874 | |
| ③ 邮件:[email protected] | |
| ④ 工作时间:周一至周五,9:30-18:30,节假日休息 | |























![表情[wozuimei]-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/themes/zibll/img/smilies/wozuimei.gif)
![表情[baoquan]-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/themes/zibll/img/smilies/baoquan.gif)

暂无评论内容