WooCommerce产品变体设置教程:添加SKU变体色板超详细步骤

今天这篇文章接着教大家如何给产品详情页和分类页添加产品SKU的变体色板。

如图,对于多变体的产品,买家可以很直观地了解和选择规格,颜色的SKU我们可以用这种色块表示,Size可以用按钮,或者其他类型也可以用缩略图直接显示。

WooCommerce产品变体设置教程:添加SKU变体色板超详细步骤 1

那就一起看看如何设置吧!

视频教程

第一步. 开启变化色板

登录到WordPress后台,选择Blocksy的扩展,然后把WooCommerce增强下的变化色板开启。

WooCommerce产品变体设置教程:添加SKU变体色板超详细步骤 2

第二步. 添加产品属性

我们需要预设一些产品的属性,这样可以在网站的页面展示。比如红色有很多种,如何确保Red展示的色块就是我们想要的红色。

选择产品下的属性选项,然后创建需要的SKU值,比如颜色(Color),别名就是Slug后缀,可以默认,接着是显示的类型,也就是上面截图显示的,你是想颜色块,还是按钮,又或者图片,也可以多种混合。

选择好之后就添加属性。

WooCommerce产品变体设置教程:添加SKU变体色板超详细步骤 3

接着给这个Color创建一些变量值,点击后面的配置类别。

WooCommerce产品变体设置教程:添加SKU变体色板超详细步骤 4

添加你需要的颜色,比如Wine Red。然后下面自己设置Wine Red的具体色号,也可以加一些提示,就是买家将鼠标滑到对应的SKU变体时会出现提示。

将自己产品需要的颜色全部添加完毕。

WooCommerce产品变体设置教程:添加SKU变体色板超详细步骤 5

这是颜色的添加,你还可以继续添加其他的SKU值,比如尺寸,型号等等,类型可选色块,按钮,图片。

第三步. 给产品添加变体属性

添加新的产品,或者编辑其他产品。其他的标题,图片和描述设置好,然后选择可变产品。

WooCommerce产品变体设置教程:添加SKU变体色板超详细步骤 6

在属性选项选择添加现有值,选择我们提前设置好的产品属性,比如Color,Size。

WooCommerce产品变体设置教程:添加SKU变体色板超详细步骤 7

然后在Color后面的框里选择需要的颜色,记得前面的在产品页可见和用于变量要勾选上。

WooCommerce产品变体设置教程:添加SKU变体色板超详细步骤 8

点击保存属性。在下面的变量里选择生成变体。

WooCommerce产品变体设置教程:添加SKU变体色板超详细步骤 9

最后将Swatches里的类型选择继承。

WooCommerce产品变体设置教程:添加SKU变体色板超详细步骤 10

对于一些奇怪的或者需要单独设置的SKU值,你也可以选择其他类型,比如图像,然后单独设置。

WooCommerce产品变体设置教程:添加SKU变体色板超详细步骤 11

都设置完后就保存。这个时候在网站的前台就已经可以看到效果了。

WooCommerce产品变体设置教程:添加SKU变体色板超详细步骤 12

第四步. 其他自定义设置

到网站的【自定义页面】,选择WooCommerce下的【常规】,找到【变化色板】,这里可以对这些SKU块做一些自定义修改。

比如是圆框还是方框,大小,边框颜色等等。

WooCommerce产品变体设置教程:添加SKU变体色板超详细步骤 13

再到自定义——产品归档——卡片选项,可以决定是否在产品分类页开启。

WooCommerce产品变体设置教程:添加SKU变体色板超详细步骤 14

以上就是关于如何在WooCommerce商城给产品添加SKU变化色板(Variation Swatches),如果还有其他问题可以在下面的评论区留言。

© 文章版权归白小菌所有,🫰欢迎转发分享。未经允许请勿抄袭转载。

白小菌
白小菌

嗨,我是白小菌,一个热爱学习并分享的博主。喜欢把复杂内容拆解成简单易懂的步骤,与大家一起学习成长。 在这里,你会看到我分享的外贸,跨境电商,Wordpress建站,SEO、有用的工具技巧等。 如果你有任何疑问或想法,可以在博客任意文章下方留言。如果有更复杂的需求,也可以选择付费咨询,我会尽我所能帮你解决问题。

文章: 455

留下评论

您的邮箱地址不会被公开。 必填项已用 * 标注