如何为 Flatsome 主题（全球）中的可变产品变化启用 WooCommerce 色板

产品变化是电子商务的一个普遍事实。 如果您有电子商务，那么很确定您需要为您的产品的变化设置您的商店。 WooCommerce 色板可以帮助您做到这一点。

在 WooCommerce 中，默认情况下会为您提供一个下拉列表来处理产品变化。

我知道你现在在想什么！ 你在想，“那又怎样！ 为什么这些人要大惊小怪？”

让我们澄清一下我们的观点。 我们相信每个电子商务所有者的目标是增加销售额并让访问者留在他们的网站上。 为了让他们保持更长时间，您需要为他们提供无缝体验，以便他们在您的网站上长时间停留感到舒适。

查看产品变体的下拉菜单是一个老式的过程，也需要更多点击才能查看变体。 对于访问者来说，这不是一种令人欣慰的体验，这就是为什么您应该使用可以使查看不同变化的体验更加流畅的东西。 Variation Swatches让事情变得简单和无缝。 尽管 Variation Swatches 提供颜色、图像和按钮样本，但在本文中，我们将只关注颜色样本。

使用 WooCommerce 色板进行产品变化有几个直接和间接的好处。 让我们找出一些！

1. 它为您的访客提供流畅的体验
2. 探索颜色变化可以增加销售额
3. 访问者需要更少的点击来查看产品的变体
4. 更好的用户体验会向搜索引擎发送积极信号，以便他们可以推广此内容

很高兴在您的商店中启用 WooCommerce 色样，对吧？ 让我们开始整个过程​​吧！

如何在 eStore 中启用 WooCommerce 色板插件

在开始之前，我们想通知您一些先决条件。 第一个是 WooCommerce 主题。 您需要一个 WooCommerce 主题才能开始使用 Variation Swatches。 您可以为您的商店选择任何免费或高级主题。 我们建议您使用 Flatsome、店面等高质量主题。然后您需要安装插件 Variation Swatches 。

第 1 步：转到仪表板。

第 2 步：将光标悬停在插件上，然后单击添加新的。

第三步：会出现一个搜索页面。 在右上角，您会找到一个搜索框。 输入 WooCommerce Variation Swatches，然后安装并激活插件。

因此，先决条件已准备就绪。 现在，我们可以继续使用 Variation Swatches 为可变产品变体启用颜色样本。

成功安装并激活 WooCommerce Variation Swatches 插件后，就可以创建色板了。

让我们开始这个过程！

步骤 01：创建可变产品属性

首先，我们需要在全局范围内创建一个颜色属性和变化。 要创建它，请转到Dashboard ，单击Products ，然后转到Attributes 。 你会发现一个属性框。 根据您的要求填写必填字段。 出于演示目的，我们将属性命名为Color 。 我们将 slug 留空，因为它会自动为属性生成一个 slug。 我们选择Type作为Color 。

您可以选择选项，并根据自己的喜好命名。 如果您没有，请关注我们的。 完成必填字段后，单击“添加属性”按钮。

之后，将在右侧创建一个列表，如下图所示。

步骤 02：创建属性变化

您可以使用相同的过程将更多属性添加到列表中。 创建属性后，您需要创建属性变体。 要为属性创建产品变体，请浏览列表并单击属性的配置术语。

例如，我们创建了Color属性。 在颜色属性内，您可以在属性内添加颜色作为变体。 您也可以选择任何您想要的颜色，但为了演示目的，我们将添加Red 、 Green和Blue 。 简而言之，要创建一个变体，请填写名称字段，将 slug 留空，然后选择颜色。

步骤 03：在可变产品中启用属性变化

现在，我们需要将全局创建的色样与可变产品链接起来。 要启用属性变体产品，请转到产品，然后对其进行编辑。 请注意从产品数据中选择可变产品。

之后，单击左侧的属性。 将打开一个新页面。 有一个名为自定义产品属性的下拉列表，您可以在其中找到所有全局创建的属性。 在这里，您将看到唯一的Color属性，因为您刚刚创建了唯一的 Color 属性。

选择要选择的属性，出于演示目的，选择Color 。 选择后会出现这个页面。

要选择所有可用的变体，请单击全选按钮。 您也可以通过单击Select none取消选择所有按钮。 然后勾选用于变体，然后单击保存属性。

单击变体选项卡，然后将出现一个新页面。 在那里您会注意到两个选项，一个是Add Variation ，另一个是Create Variations from all attributes 。

从这两个选项中选择任何选项。 出于演示目的，我们将选择从所有属性中创建变体。

现在，产品的颜色变化是可见的。 您还可以在此处添加更多变体特定的详细信息，例如变体图像、变体价格和其他变体特定的细节。 完成所有这些后，单击“保存更改”按钮。

PS：在每个变体中添加价格，否则，产品前端将看不到变体。

成功添加变体样本后，单个产品页面将如下所示。

简单设置

Variation Swatches 是 WooCommerce 网站的必备插件。 超过 300K+ WooCommerce 网站正在使用这个插件。 它可以帮助您激活工具提示、禁用插件默认样式表以及在圆形和方形之间切换。

将 Shape 样式从 Round 更改为 Square，并启用 Tooltip。 之后，产品页面的前端将如下所示。

高级设置

Variation Swatches 还具有一些高级功能，可以为您提供更多功能。 您可以控制变化样本的宽度、高度和字体大小。 它还可以巧妙地显示缺货。

要显示缺货，您需要选择属性行为的模糊选项。 选择后，您的产品将响应如下。

在 Flatsome 主题的商店页面上启用色板

除了向产品页面添加色板外，您还可以在产品存档页面上添加 WooCommerce 色板。 要使用此功能，您需要将您的版本升级到专业版。 如果您还没有专业版，请使用 Variation Swatches 的全部功能。

要在存档/商店页面上启用色样，请检查设置在存档上显示以在商店/存档页面上显示色样。 如果您使用的是 Flatsome 主题，您可以在添加到商店中的购物车按钮之前和之后从存档色板位置设置启用色板。 您还可以通过这些设置控制颜色变化样本的大小。

当您在商店页面上启用色板时，它看起来像这样。

在商店/存档页面上自定义工具提示和样本

如果要自定义工具提示颜色并在商店中启用变体色板，则需要使用变体色板的高级版本。

启用工具提示

使用高级设置，您可以自定义工具提示背景和文本颜色。 要自定义工具提示，请检查以下内容。

工具提示前端的最终预览。

结论

这项技术将提高您网站的可用性和转化率。 它还确保您的客户在访问您的网站时获得无缝体验。 此外，它间接地可以提高您的销售额，并帮助您发展 WooCommerece 商店。

如果您在 Flatsome 主题中安装此插件时遇到任何问题，请在评论部分告诉我们。 我们会尽快回复！