如何给WooCommerce商城的产品变体添加图片和颜色，Variation Swatches工具应用

今天这篇文章教大家如何给WooCommerce商城添加Variation Swatches，能够让买家直观地看到产品不同SKU的颜色，尺寸或者型号图片。

视频教程

第一步. 安装插件

登录WordPress后台，添加新的插件，然后搜索并安装启用下面插件：Variation Swatches for WooCommerce。

安装完成之后，将本文提供的Pro版本下载到本地（安装包在文章末尾），然后选择上传插件，把下载的安装包上传，点击立即安装。

使用上传版本代替当前版本，然后启用插件。

接着点击Settings就可以设置参数了。

第二步. 参数设置

2.1 General

开启变体的展示样式设置。这里可以设置产品“变体选择”的基本展示样式。

2.2 Advanced

• Clear on Reselect， 买家在选择产品型号时可以一键清除，重新选择。

• Disable Out of stock，某个型号没货会像上面一样，出现大×。
• Deselect Unavailable Item，取消不可选择的属性。
• Disabled Attribute style，不可用属性的样式，是上面带×（Blur with cross），还是只是模糊灰色（Blur without cross）或者隐藏（Hide）。

• Attribute image size，变体缩略图的尺寸。
• Exclude Product Categories，不需要使用variation swatches的产品类目。

2.3 Styling

• Swatches indicator
  • Tick Color，选中产品时上面√的颜色。
  • Cross Color，产品缺货时，上面×的颜色。

• Product Page Swatches Size，属性选择框的尺寸和文字大小。
• Archive Page Swatches Style，产品类目页的框尺寸和文字大小。
• Tooltip Styling，鼠标移动到属性选择框提示的背景和文字颜色。

• Variation Item Styling，属性选择框默认的边框和背景样式。
• Variation Item Hover Styling，鼠标悬浮到属性选择框的边框和背景样式。
• Variation Item Selected Styling，属性选择框被选中的边框和背景样式。