教程 | 自定义 WooCommerce 产品属性、变体和图像

一、产品属性、变体 是什么?

在 WooCommerce 中,如果你的产品有多个规格(如颜色、尺寸),当然可以使用高级插件Extra Product Options & Add-Ons for WooCommerce,这个插件的功能特别强大,后续文章专门写一下,如果使用Woocommerce的自带功能你就需要设置:

名称作用
属性表示一个分类维度,如颜色、尺寸
变体属性组合后具体可选的产品项
变体图像每个变体可以上传不同的展示图片

例如:“T恤”这个产品,可以让客户选择:

  • 尺寸:S / M / L
  • 颜色:红 / 蓝 / 黑

组合之后会有多个变体:红-S、蓝-M、黑-L 等,每个都可以设置价格、库存、图片等。

二、设置流程概览

➊ 创建产品属性  

➋ 将属性应用到产品上

 ➌ 生成变体

 ➍ 为每个变体设置价格、图片、库存等

三、详细操作步骤

1. 创建属性(如颜色、尺寸)

位置:后台 → 产品 → 属性

  • 输入属性名称,如“颜色”
  • 可选设置 slug(用于链接中显示,一般留空)
  • 排序方式可选“自定义排序”或按名称
  • 点击【添加属性】

添加后点击右侧“配置条目”,添加各个选项:

  • 红色
  • 蓝色
  • 黑色

然后返回,重复步骤创建另一个属性“尺寸”(S、M、L)

2. 新建产品,启用“可变产品”

位置:后台 → 产品 → 添加新产品

  • 设置标题、描述、产品图等
  • 产品数据类型选择“可变产品”

3.添加产品使用的属性

在【产品数据】模块内:

  • 进入【属性】选项卡
  • 从已有属性中选择“颜色”、“尺寸”
  • 点击【添加】
  • 选择需要用到的具体属性值(例如只卖红色和黑色)
  • 勾选“用于变体”
  • 点击【保存属性】

4. 生成产品变体

进入【变体】选项卡:

  • 点击下拉菜单,选择“从所有属性创建变体”
  • 点击【开始】,系统会自动组合所有可能的属性组合(比如 红-S、红-M、黑-L 等)

5. 编辑每个变体信息

展开每个变体,可分别设置:

  • SKU(库存编号)
  • 价格(必填):不填价格则前台无法选择此变体
  • 图片:点击上传图像(如红色T恤上传红图)
  • 库存管理:可设置每个变体的单独库存
  • 是否启用/下载/虚拟产品

📌 小贴士:每个变体一定要设置价格,否则前台不会显示!

四、前台显示效果

当你设置完后,前台会显示如下界面:

  • 下拉选择颜色、尺寸
  • 根据选择自动切换图像
  • 展示对应价格和库存状态
  • 可直接加入购物车

五、实用技巧

每个变体显示不同图片

  • 选中每个变体 → 单独上传对应图像
  • 前台点击颜色会自动切图(需主题支持,Astra、Hello等默认支持)

插件推荐:更美观的变体选择方式,这样用户可以点“红色圆点”、“M”按钮,而不是选菜单,用户体验更好。

WooCommerce 默认使用下拉菜单,如果你想要按钮或颜色圆点样式,可以用:

  • ✅ YITH Color and Label Variations
  • ✅ Shoplentor → Product Variation 控件(Elementor 可视化设计)

六、批量操作(提高效率)

产品多的时候,一个个改很麻烦,可以用插件:

  • WooCommerce Bulk Variations(可批量创建变体)
  • WP All Import + WooCommerce Addon(Excel导入变体)
  • Advanced Bulk Edit for WooCommerce Products

也可以通过 CSV 导入产品及变体数据。

Extra Product Options & Add-Ons for WooCommerce的功能,后续再介绍!