WoodMart 变量产品与 Swatches 设置指南：WooCommerce 实战详解

在 WooCommerce 商店中，只要涉及颜色、尺寸或规格差异，变量产品就是不可回避的结构。而 WoodMart 主题在 WooCommerce 默认变量产品的基础上，进一步提供了 Swatches（色块、图片、文本）系统，使产品选择过程更加直观。

本文将围绕 WoodMart 变量产品与 Swatches 的完整配置流程 展开，重点讲清楚「为什么这样设置」以及「每一步对前端体验的影响」。

一、为什么在 WoodMart 中使用 Swatches

WooCommerce 默认的下拉选择方式在多规格产品中存在明显问题：

用户需要反复点击下拉框
无法直观看到颜色或款式差异
产品选择路径较长

WoodMart 的 Swatches 系统将变量选择转化为可视化操作，使颜色、尺寸等属性直接以色块、图片或文本形式展示，减少理解成本，也更符合电商使用习惯。

二、创建适用于 Swatches 的产品属性

2.1 创建颜色与尺寸属性

后台路径如下：

Products
Attributes

常见变量产品至少包含：

Color（颜色）
Size（尺寸）

在创建属性时，Slug 一般保持默认即可，重点关注 Swatches 相关选项。

2.2 属性设置中与 Swatches 相关的关键选项

Swatch Area

用于定义该属性在前端的 Swatch 样式和尺寸，是 Swatches 生效的基础。

Change Product Image on Attribute Click

启用后，用户点击某个 Swatch 时，主产品图片会随之切换，这是变量产品体验的核心功能之一。

Show Attribute Label on Products

用于在产品图片或信息区域显示属性标签，适合需要明确区分规格的产品。

三、为属性创建 Swatch 选项（Terms）

3.1 创建颜色属性的 Swatches

在 Color 属性中点击 Configure terms：

为每种颜色创建一个选项
Swatch 类型选择 Color
设置对应的颜色值

颜色类属性通常使用 Color Swatch 或 Image Swatch，便于快速识别。

3.2 创建尺寸属性的 Swatches

在 Size 属性中：

为每个尺寸创建选项
Swatch 类型选择 Text

尺寸类属性更适合文本形式，清晰且不占用过多空间。

四、创建并配置 WoodMart 变量产品

4.1 设置产品类型为 Variable Product

新建产品后，在 Product Data 区域中：

将产品类型设置为 Variable product

这是启用 Swatches 的前提条件。

4.2 将属性用于变体

进入 Attributes 标签页：

添加 Color 和 Size 属性
勾选 Used for variations

只有勾选该选项，系统才会将属性用于生成变体。

4.3 自动生成并管理变体

在 Variations 标签页中：

使用 Generate variations 自动生成组合
通过 Bulk actions 批量设置价格等信息

完成后发布产品，即可在前端看到 Swatches 形式的变量选择。

五、Swatches 的主题级设置与表现控制

5.1 Swatches 设置入口

后台路径：

Theme Settings
Shop
Variable Products

这里控制的是 Swatches 的整体行为，而非单个产品。

5.2 控制产品列表页显示的 Swatches

Grid Swatch Attribute to Display 用于指定：

在产品列表页中显示哪一个属性
常见做法是只显示 Color

这样可以避免列表页信息过于复杂。

5.3 限制 Swatches 数量以保持页面整洁

Limit Swatches Options 用于在变体较多时：

折叠 Swatches
减少页面占用空间

对多颜色、多规格产品尤为重要。

六、使用变体图片作为 Swatch 的注意事项

6.1 使用变体图片的前提条件

启用 Use images from product variations 后：

Swatches 将使用变体图片
不再使用属性选项中上传的图片

需要同时满足：

每个变体都设置了图片
Swatch 类型为 Text
Color Swatch 字段被禁用

未设置图片的变体将以文本形式显示。

6.2 Swatches 与图片联动的实用设置

Scroll to Top on Variation Select

选择带图片的变体时，页面会自动滚动至主图区域，便于用户查看变化。

Additional Variations Images

允许为每个变体上传多张附加图片，适合强调细节差异的产品。

Show Variation Image Based on Filter Selection

当通过筛选或 Swatch 选择变体时，产品图片会同步切换，保持视觉一致性。

七、Swatches 使用中的常见思路

颜色属性优先使用 Color 或 Image Swatch
尺寸属性使用 Text Swatch 更清晰
列表页只展示一个核心属性
多规格产品合理限制 Swatches 数量
确保变体图片与 Swatch 逻辑一致

这些细节直接影响用户选择效率。

总结

WoodMart 的 Swatches 并不是简单的样式美化，而是围绕变量产品构建的一套交互体系。从属性创建、变体生成到 Swatches 展示方式，每一步都会影响前端的使用体验。

对于以多颜色、多规格产品为主的 WooCommerce 商店来说，合理使用 WoodMart 变量产品与 Swatches，是提升产品可读性和选择效率的重要基础。

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