哈喽大家好，我是Ruseell。今天给大家分享一篇关于Wordpress建站的干货，Russell团队目前主要做B端项目居多。有很多客户的产品，比如像衣服、毛巾、化工等，这些产品具有一定的C端属性，主要特点就是SKU很多，但是客户主要做批发的，所以在做网站的时候都会做功能的一些定制。
在之前我有讲到过，关于网站重复内容的问题，比如:一件衣服有很多尺码、颜色等选择，总不能每个颜色发一个产品，这就会导致站内内容大量重复，非常影响后期的SEO效果。但是你要在网站上有这么一个功能，如颜色、尺寸选项卡这种功能，如下：
这个功能用在C端网站上的居多，但是我们在这个基础上做了一些改进，可以适用于B2B类型的网站，接下来的内容有点难，大家仔细阅读，做好笔记。
01 安装插件Variation Swatches for WooCommerce
对于这个功能，需要用到一个woocmmerce的一个产品扩展插件，推荐使用Variation Swatches for WooCommerce，免费版的就够用。前提是你的网站是用的Wordpress+WooCommerce做的，不然没办法安装。
安装完成后，在后台的侧边栏，就会显示出来，稍后再教给大家怎么去设置这些样式
02 WooCommerce产品变体设置
产品变体（Product Variant）指的是在同一产品下，根据不同属性（如尺寸、颜色、材质等）产生的各个具体版本。
1.设置产品全局属性
在WP后台，找到产品下面的属性，添加属性。比如我先添加Color这个属性
注意填写完名称后，下面有一个类型，选择Color，点击添加属性
接下来给颜色配置类型，比如蓝色、红色、黄色这些。
添加的时候，在颜色这里，需要选择对应的色块颜色。
全部添加后，在后台就可以看到我们添加好的颜色属性了。
按照同样的方法，我们再来设置一下尺寸属性，回到产品属性，点击添加属性，这里输入Size，但是类型要换一下，选择Button。
接着来配置一下类别方法跟上面一样，这里我填的M、S、XL等，按照你实际产品尺寸分类来填写。
2.设置变体产品
在产品里面，找到所要设置的对应产品，点击编辑，进入产品编辑页面。
这里下滑找到产品数据，不要选择单个产品，选择可变产品
接着选择属性，把我们提前预设好的全局属性添加进来。
添加的时候，点击添加现有值，然后点击Select all，这样就会全部自动添加进来了。
把我们预设好的Color和Size都添加进来，点击保存属性。
接下来点击设置变量， 直接点击生成变体，它会根据我我们的属性自动生成。
我添加了4个颜色，4个尺寸，所以它生成了16种变体，如下：
这里需要做一下小的调整，我只保留4种颜色，然后任意尺寸，这样在前端显示的时候，就不会有你这么多选项了，如下：
接下来需要给每个属性，设置对应的图片和售价，这样就可以实现当切换尺寸或颜色时，会对应不同的主图。
设置好之后如下，这里一定要把价格标注上，不然它会在前端显示无货。但是我们B类型的，不想要显示价格，最后我会教给大家怎么隐藏，这里先按照我的步骤做。
这里全部设置完之后，不要忘记点击更新产品。
03 编辑产品单页，添加产品选项功能
接下来我们需要把这个功能，添加到我们的产品单页上。这里我用的是Elementor编辑器，接下来给大家演示一下。
在模板里面找到，Them Buider，编辑产品单页模板。
进入产品编辑页面之后，因为这个产品没有与elmentor关联单独的元素，它是内嵌到Add To Cart里面的，所以我们只需要将这个元素，拖拽到对应的位置就可以了，这样就可以显示出来此功能了。
04 调整为适合B2B网站的样式
一般来说，我们B2B类型的网站，不会有购物车、结账、查看价格等功能，接下来我会给大家说怎么把这些功能隐藏。
1.隐藏加入购物车功能
在这个元素的设置里面，没有办法直接隐藏这个加购功能，所以需要用Css来更改，这里我已经给大家写好了，直接复制就好，如下
/* 隐藏数量输入框 */
.single-product form.cart .quantity {
display: none !important;
}
/* 隐藏加入购物车按钮 */
.single-product form.cart button.single_add_to_cart_button {
display: none !important;
}
/* （可选）隐藏变体价格，如果你不想显示价格 */
.single-product .woocommerce-variation-price,
.single-product .price {
display: none !important;
}
/* 移除 WooCommerce 表格变体所有默认背景、边框、阴影 */
.single-product table.variations,
.single-product table.variations tr,
.single-product table.variations td,
.single-product table.variations th,
.single-product form.variations_form {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* 移除 label 左边的灰色背景 */
.single-product table.variations .label {
background: transparent !important;
padding: 0 !important;
border: none !important;
}
/* 移除 value（Color : Red 右边那整块）的背景 */
.single-product table.variations .value {
background: transparent !important;
padding: 0 !important;
border: none !important;
}
/* 去掉变体上方的灰框 */
.single-product table.variations td {
padding: 0 !important;
}
我们直接复制上面的代码，点击Add To Cart这个元素，高级设置找到Custom CSS,把上面的代码粘贴进来就可以了。
添加完之后，去前台看一下，并且把多余的灰色背景也同时去掉了，样式做了下调整。
这里我们仅去要一个插件就可以实现，推荐使用ELEX WooCommerce Catalog Mode。大家会担心安太多插件会不会导致加载速度慢，这个插件非常小，没有什么问题，网站的插件总体不要超过10个就可以。
安装完成后，在WooCommerce里面找到Catalog Mode，点击后在Hide Price中把Enable打上对勾，点击保存。
回到前台再查看，就会发现已经隐藏成功了。
05 Variation Swatches for WooCommerce插件的基础设置
上面我们的功能基本已经实现了，如果想要调整一下显示颜色、尺寸颜色切换的样式，需要在这个插件的设置里面进行调整。
调整属性选择的样式
在Wordpress后台左侧边栏，找到这个插件点击设置。在常规设置里面，可以选择属性的样式，之前我选择的是圆形，你也可以选择方形，如下：
在Styling里面，可以调整其选择时的颜色，还有内部的边距，已经文字大小，这里大家看着调整就行了，调整完刷新前台就能看到变化，就不一一赘述了。
因为我们用的是免费版本的，能够调整的地方也比较少，带小锁的标志都需要买PRO版本才能使用。
06 总结
以上就是给大家分享的内容，主要就是关于可变产品功能的灵活运用，内容可能有点多，难度相对大一些，但只要理解了其逻辑，也很简单的。
来源公众号： Russell的数字营销课堂（ID：KuajingRussell）专注分享谷歌广告、SEO、建站等干货教程。
本文由 @Russell数字营销课堂 原创发布于奇赞平台，未经许可，禁止转载、采集。
该文观点仅代表作者本人，奇赞平台仅提供信息存储空间服务。
