WooCommerce 可变商品教学：轻松设置尺寸与颜色选项

在打造 WordPress 购物网站时，很多人都会遇到这样的需求：商品不只是一个规格，而是有多种尺寸、颜色可选。好消息是，WooCommerce 提供了“可变商品”功能，让每一项商品都可以拥有多个变体，让顾客自由选择。

这篇文章将一步步带你建立一个包含尺寸与颜色选项的 WooCommerce 可变商品，从后台设定到组合生成，简单又实用。

第一步：新增可变商品

• 登录 WordPress 后台
• 进入左侧菜单中的【商品】→【新增】

• 输入商品名称
• 在下方“产品数据”区域中，将【简单商品】切换为【可变商品】

这样商品就可以开始添加多个属性与变体了。

第二步：添加尺寸属性

• 切换到【属性】分页
• 选择【自订商品属性】→ 点击【新增】

• 在名称栏输入“尺寸”
• 在数值栏输入：S | M | L（使用竖线 | 作为分隔）
• 勾选【用于变化类型】
• 点击【储存属性】

你也可以先将竖线复制粘贴，以确保格式正确。

第三步：添加颜色属性

• 继续点击【新增】
• 名称填入“颜色”
• 数值示例：白色 (素色) | 绿色 (图案)
• 同样使用竖线分隔
• 勾选【用于变化类型】
• 点击【储存属性】

现在你已经添加了两个属性：尺寸与颜色，可以组合出多个变体。

第四步：建立商品组合（变体）

• 切换到【变化类型】分页
• 点击【由所有属性建立变化类型】
• 按【送出】→ 然后依提示按两次【确定】

系统会自动生成所有组合。例如有 3 个尺寸 × 2 个颜色 = 6 个变体。

第五步：为每个变体设定图片与价格

• 点选每个组合右侧的【编辑】

• 上传该变体专属图片
• 输入价格（例如：390）
• 依序设定完所有组合
• 最后点击【储存设定】

每个变体都可以有独立的图片和价格，这样前台就能正确展示。

第六步：设定预设选项

商品页面打开时，只会显示一个预设组合的图与信息。

• 在【预设表单值】中选择默认显示的尺寸与颜色（例如 M 号 + 绿色）

• 再次点击【储存设定】

第七步：设定商品主图（用于商品列表）

• 滑到页面右下角的【商品图片】

• 上传你想作为商品主图的变体图（建议使用刚刚设为默认的组合图）

• 点击【设定商品图片】

第八步：发布商品并预览

• 点击【发布】
• 进入【预览变更】
• 在商品列表页看到预设图片

• 点进商品详情页，就能自由选择尺寸与颜色，系统也会自动切换图片与价格

总结

WooCommerce 的可变商品功能非常适合用在有多种规格的商品上。只要设定好属性和变化类型，不论是衣服、鞋子、饰品或其他产品，都可以轻松做到尺寸与颜色的自由选择。按照本文步骤一步步设置，很快就能让商品页面更加完整、专业、好用。

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