Kadence 教学：Kadence Shop Kit产品变体色板（Variation Swatches）功能详解

Kadence Shop Kit（原名 Woo Extras）扩展了 WooCommerce 的功能，其中“变体色板”是实用性很强的一项。它能让产品变体以下拉菜单、单选框、颜色或图片的方式直观展示，方便顾客快速了解商品差异，提升购买意愿。

开始使用变体色板功能

安装与启用功能

• 安装并激活 Kadence Shop Kit 插件。
• 在 WordPress 后台左下角找到 Shop Kit 菜单，点击进入。

• 进入 Variation Swatches（变体色板） 选项卡，启用该功能。

启用产品画廊

Variation Swatches 功能依赖于 Shop Kit 提供的产品画廊（Product Gallery） 模块。

启用路径如下：

• 前往 Shop Kit 设置 → Product Gallery（产品画廊）
• 开启产品画廊功能（Toggle 开关）

可选功能：启用产品图片轮播（Product Slider）

如需使用图片轮播功能，也可在产品页面中启用。

产品页面配置选项

变体标签显示方式：默认显示在选项区域旁边，也可设置为隐藏、显示在上方或悬停时显示。

默认色板类型：选择变体的默认样本类型。这可以设置为下拉选择框、单选框、图像和颜色样本或分类法定义。

若选择“分类法定义”，可在 WooCommerce → 属性（Attributes） 页面为每个属性单独设置色板类型。

此设置也可针对单个产品进行调整。

默认标签显示方式：不显示、上方显示、下方显示、悬停显示

默认色板尺寸：可设置色板大小，适用于所有产品，也可以在单个产品中单独设置。

下拉框占位文字：可自定义下拉框中的默认提示文字，例如：“请选择选项”。

产品变体设置流程

在使用变体色板前，需要先为商品设置属性和变体。在产品编辑页面的“产品数据”模块中，进入“属性”标签，添加所需属性（例如颜色、尺码），勾选“用于变体”。

接着前往“变体”标签，为每项变体设定价格、图片，也可以添加多张图片形成变体画廊。

单个商品的色板样式调整

为单独产品自定义色板时，可：

• 在产品编辑页面中，进入 产品数据 → Variation Swatches。
• 设置每个变体的：
  • 色板类型（颜色、图片、单选框等）
  • 标签显示方式
  • 色板大小
• 为每个变体指定颜色或上传图片。

完成后，保存并预览产品页面，检查效果是否正确呈现。

色板展示样式概览

Kadence Shop Kit 支持以下几种展示样式：

下拉菜单样式（Dropdown）

传统的选择方式，适合选项较多或不需图像的属性。

单选框样式（Radio Box）

以按钮形式展示每个选项，适合较少的变体。

图片或颜色色板样式（Color/Image Swatch）

以图形方式直观展示每个变体，适合展示颜色、图案或样式差异。

总结

变体色板为商品页面提供了更丰富的展示方式。产品信息更直观，有助于顾客快速理解选项差别，增强对商品的兴趣。特别适合服饰、定制、家居类商品展示，配合 Kadence 提供的其他模块使用，能让产品页面呈现更加灵活。