WooCommerce 开箱即用,将产品变体显示为普通下拉菜单,选择一个大小,选择一个颜色,全部来自一个灰色的选择框,其中隐藏了选项的实际样子 A WooCommerce 变体样本插件 fixes that。it将那些下拉替换为可点击的色圈、图像缩略图和标记按钮,因此购物者一眼就能看到红色衬衫或XL,而不是解码文本菜单。
That small change move the needle,因为人们买他们能看到的 本指南比较了 8 个最好的 swatches 插件,并且每个插件都可以从官方 WordPress。org 目录中免费安装,因此您可以在提交之前在自己的商店中尝试首先,不过,在您考虑 swatches 之前,每个 Elementor 商店都有一个属于该插件:Master Addons for Elementor 它不是 swatches 插件,但它构建了您的 swatches 将继续使用的产品页面,因此它赢得了榜首。
什么是 WooCommerce 变体样本?
Variation swatches 将变量产品上的属性下拉替换为可视化选择器,您将获得一排颜色方块,而不是“Size”下拉,您将获得可点击按钮:S、M、L、XL。
您通常会看到四种样本类型:
- 彩色样本 为红色、海军或橄榄色等属性
- 图像样本 显示每个变体的小照片,无论是图案、纹理还是该颜色的产品
- 按钮或标签样本 为尺寸、材料或任何文本属性
- 无线电插片 对于更整洁的标准版本,请选择
更好的插件还将样本推送到商店和类别页面上,而不仅仅是单个产品页面,因此购物者在仍在浏览时会发现他们的选择。
如何在 WooCommerce 中添加色标
此处的每个插件的设置几乎相同:
- 安装并激活 WooCommerce 和您选择的样本插件。
- 去 产品 > 属性 color 这样创建一个属性,然后添加它的项(红色、蓝色、绿色)。
- Set 每个术语的 swatch 类型,颜色选取十六进制值;图片上传缩略图。
- 开变量产品,在属性选项卡下添加属性,并生成变体。
- Save和预览,下拉现在是一排样本。
No code 在那个列表的任何地方,如果你的变量产品还没有设置,那就先用官方排序 WooCommerce 可变产品文档的,它走过了属性和变体,对于样本周围的页面设计,我们的综述 woocommerce 的最佳 Elementor 插件 显示如何构建自定义单个产品模板。
快速比较:最佳 WooCommerce 样本插件
| 插件 | 活动安装 | 评级 | 购买页面样本(免费) | 最好的 |
|---|---|---|---|---|
| Elementor 的主插件 | 3万以上 | 4.5 规定 | 不适用(工具包) | 构建产品页面本身 |
| WooCommerce 的变体样本(Emran Ahmed) | 30万以上 | 4.8 规定 | 专业人士 | 安全默认选择 |
| WooCommerce 的变体样本(CartFlows) | 20万以上 | 4.6 异地 | 专业人士 | Astra/CartFlows 商店 |
| WCBoost 变体样本 | 5万以上 | 4.8 规定 | 是的 | 快速、无标签选项 |
| 产品变化样本(别墅主题) | 1万以上 | 4.7 规定 | 是的 | 样本 + 图库图像交换 |
| 变奏样本(半径主题) | 1万以上 | 4.7 规定 | 是的 | 全方位提供目录样本 |
| WPC 变体样本 | 7千多 | 4.3 规定 | 是的 | WPClever 生态系统用户 |
| 智能变体图像和样本 | 1千以上 | 4.7 规定 | 部分 | 变化图像交换 |
| WooCommerce 的变体样本(Woosuite) | 5万以上 | 3.7 、 | 是的 | 长期运行的免费目录样本 |
1。元素(基础)的主插件
让我先说: Elementor 的主插件 不是一个变体样本插件,它仍然位于第一,这是逻辑,样本只是在一个实际构建用于销售的产品页面上赚取保留,而该页面是 Master Addons 进来的地方,它是设计模板的轻量级 Elementor 工具包,那么下面的任何样本插件都会将颜色和图像选择器丢入其中。
30,000多个站点上使用,并在版本3中重建以运行大约3倍的速度,Master Addons为您提供了完整的 主题构建器 为定制单一产品,商店和存档模板。因此,您不接受主题船舶的任何布局,而是设计产品页面,添加样本,并准确控制它们降落的位置。
为什么它首先适用于 Elementor 商店:
- 主题构建器 要构建显示的样本上的单个产品和商店模板
- 特色产品小部件 将任何产品、价格和购物车附加按钮放入登陆页面
- 弹出窗口生成器 出售、优惠券和退出意向优惠可提升购物车价值
- 巨型菜单 用于带有产品类别的可购物导航
- 80多个小部件和扩展 在一个轻型包中,因此您不会堆叠五个插件来构建一页
首先安装此功能以构建商店,然后选择下面的样本插件之一来处理变化显示。浏览完整内容 小部件和扩展 列出或检查 定价的,并从中抢取免费版 WordPress.org 插件页面.
2。用于WooCommerce的变体样本(作者:埃姆兰·艾哈迈德)
WordPress。org上安装最多的样本插件,坐拥300,000 + 个活跃安装,900多个评论的评分为4.8。想要大多数商店已经信任的选项?从这里开始。
最佳功能:
- 颜色、图像和按钮/标签样本类型
- 悬停上的属性工具提示
- 每个属性和每个产品样本覆盖
- 控制库存外变化的行为方式、可点击或模糊
- 广泛的主题兼容性,因此它适用于大多数 WooCommerce 主题,无需大惊小怪
免费版很好地处理了单个产品页面。目录和商店页面样本,加上变体图像库,是 Pro 升级的一部分。从中获取它 WordPress.org 插件页面.
3。用于WooCommerce的变体样本(通过CartFlows)
Astra和CartFlows背后的团队中,这款产品以4.6的评级获得了20万 + 的安装量,它轻便,干净,如果你已经运行其他Brainstorm Force产品,那么它很容易通话。
最佳功能:
- 颜色、图像、按钮/标签和无线电样本类型
- 属性的工具提示
- 具有每个属性覆盖的全局样式
- 轻量级代码远离您的主题
- 由知名 WordPress 供应商支持
如果您的商店在 Astra 上运行或您使用 CartFlows 构建漏斗,则所有内容都保存在一栋房子中。从安装它 WordPress.org 插件页面.
4。WCBoost 变体样本
WCBoost是严肃的选择,它做了一些更大的插件让你付出代价的事情:它在免费版本中显示商店和存档页面上的样本。添加4.8评级和50,000 + 安装,它赢得了它的位置。
最佳功能:
- 颜色、图像、按钮和无线电样本
- 属性悬停上的工具提示
- 可调节的样本形状(圆形或正方形)和尺寸
- 商店和档案页面显示,免费
- 管理员中没有持续的追加销售标签
对于一个快速、干净的插件,无需付费墙即可为您编目样本,WCBoost 是此列表中价值最高的精选之一。从下载 WordPress.org 插件页面.
5。用于WooCommerce的产品变化样本(按Villa主题)
VillaTheme 在 WooCommerce 空间中已经很长时间了,它的样本插件将视觉选择器与变异图像交换配对。单击一种颜色,主图库将翻转到该变异的照片。
最佳功能:
- 颜色、图像、按钮、收音机和下拉样本类型
- 每个属性的工具提示
- 目录和商店页面样本
- 产品库中的变化图像交换
- 每个属性的造型控件
如果您出售画廊照片与样本(时尚、家具、艺术印刷品)一样重要的东西,那么图像交换就是选择它的原因。从中获取它 WordPress.org 插件页面.
6。用于WooCommerce的变异样本量表(按半径主题)
The Post Grid 和 ShopBuilder 背后的各位 RadiusTheme 认为,这是一款稳定的多面手,安装量超过 10,000 次,评级为 4.7。它涵盖了核心样本类型,并将其推送到目录页面。
最佳功能:
- 颜色、图像、按钮和无线电样本
- 属性工具提示
- 商店和存档页面样本
- 每个属性和每个产品设置
- 由活跃的 WooCommerce 插件供应商支持
这是一个可靠的中间选择,当少数产品需要与其他产品风格不同的样本时,这些每件产品的设置就可以赢得保留。从安装它 WordPress.org 插件页面.
7。用于WooCommerce的WPC变体样本量表
WPClever运行着一个大家庭的WooCommerce插件,而这会对插件进行扫描,直接插入其中,如果你已经使用像智能比较或链接变体这样的WPC产品,它会感觉像家一样。
最佳功能:
- 颜色、图像、按钮和标签样本类型
- 工具提示支持
- 术语级别的样本分配
- 小脚印
- 与更广泛的 WPClever 套件配合使用
评级较低,评论次数较薄,因此在发货前先在分期上进行测试。对于 WPClever 用户来说,尽管如此,它是明显的拟合度。从下载 WordPress.org 插件页面.
8。适用于 WooCommerce 的智能变体图像和样本
这个非常倾向于图像。它根据购物者选择的变体自动显示、隐藏和交换产品库照片,当变体之间的视觉差异是整个音调时,这是理想的选择。
最佳功能:
- 与变体照片相关的图像样本
- 自动画廊展示、隐藏和交换
- 智能图像链接到属性
- 如果您已经运行过另一个 swatch 插件,则可以很好地与另一个 swatch 插件一起播放
- 142条评论,评分为4.7,对其规模而言投入了大量
少按键造型,多图库对点击的反应,如果图片交换是你的优先考虑,这是专家。从中获取 WordPress.org 插件页面.
9。用于 WooCommerce 的变体样本(由 Woosuite 提供)
这是存储库上最古老的样本插件之一,早在 2017 年就已列出,并且仍在 50,000 多家商店上运行。抽奖是免费的目录页样本和全套样本类型,没有追加销售墙。
最佳功能:
- 颜色、图像、标签/文本和无线电样本
- 属性的工具提示
- 免费版本中存档和编目页面样本
- 每个属性的配置
- WooCommerce 商店的悠久记录
一个诚实的警告:它的 3.7 评级是这里最弱的,所以在你依靠它之前,先浏览一下最近的评论并根据你的主题进行测试。从安装它 WordPress.org 插件页面.
也值得一看
WordPress。org上还有几个,可能适合特定的设置,即使他们没有破解主列表。 YITH 颜色和标签变化 免费为您提供颜色和标签样本,并保留 Pro 的图像样本。 QODE 变体样本 是一个更新、更轻的选择,仍在建立评论。
如何选择正确的样本插件
将插件与您的商店实际需要的内容相匹配:
- 您想要最安全、测试最多的选项: Emran Ahmed 的 WooCommerce 变体样本。
- 您需要商店页面样本而无需付费: WCBoost 或 Woosuite 插件。
- 您的画廊图像在变化之间变化很大: Villa主题或智能变奏图像。
- 您生活在 Astra/CartFlows 或 WPClever 生态系统中: 选择匹配插件(cartflows 或 WPC)。
无论您落在什么地方,请密切关注性能。Swatch 脚本都会增加产品页面的权重,因此请将它们与我们指南中的提示配对 如何加快 Elementor 网站的速度。如果您的产品需要的不仅仅是样本,请考虑自定义字段、附加组件或雕刻,请查看 woocommerce 的额外产品选项 捕捉结账时的人。
围绕这些样本建立商店?主插件保持轻盈 80多个小部件和扩展及其 主题构建器 让您设计样本所在的单个产品模板。检查 定价 如果您想要整个工具包。
常见问题
最好的免费 WooCommerce 变体样本插件是什么?
Emran Ahmed 的 WooCommerce 变体样本是最安全的免费选择,安装量超过 300,000 次,评级为 4.8。如果您需要免费商店页面样本,WCBoost 变体样本是一种强大的替代方案,不会将目录样本排除在 Pro 之外。
如何在 WooCommerce 中添加色标?
安装样本插件,转到产品 > 属性,创建颜色属性,并为每个术语设置十六进制值,然后将属性添加到变量产品并生成变体,下拉变为一排可点击的颜色样本,无需代码。
我可以在没有插件的情况下添加变体样本吗?
不容易。WooCommerce 没有内置的样本选项,因此您需要自定义代码和 CSS 才能自行转换下拉。专用样本插件只需点击几下即可完成,并通过 WooCommerce 更新保持兼容,这就是为什么几乎每个商店都使用一个。
商店和类别页面上显示变体样本吗?
这取决于插件。许多样本仅在免费版本中的单个产品页面上显示。WCBoost、VillaTheme、RadiusTheme 和 Woosuite 插件将它们免费显示在商店和存档页面上,而其他插件则将其保存为 Pro。
样本插件会减慢我的商店速度吗?
一个精心构建的只添加了一点 CSS 和 JavaScript。WCBoost 等轻量级选项可保持较低的影响力。不要一次运行两个 swatch 插件,并在安装前后检查页面速度,以便知道自己站在哪里。
结束
适合您商店的最佳 WooCommerce 变体样本插件实际上取决于两个问题:您是否需要免费商店页面样本,以及您的图库图像在变体之间变化多少?对于大多数商店来说,Emran Ahmed 的 WooCommerce 变体样本是安全的开始,WCBoost 是对样本进行编目的最佳免费路线,而 VillaTheme 或 Smart Variations Images 在照片销售时获胜。
安装几个免费版本,根据您的主题进行测试,并保留看起来正确的版本。然后围绕它们构建商店:探索完整 主插件小部件和扩展 或者从现成的开始更快 模板套件.
相关阅读: WooCommerce 的最佳元素添加剂, WooCommerce 的额外产品选项、和 100 个最佳元素添加剂.
