您是否在这里为 Flatsome 主题中的可变产品启用 WooCommerce 产品属性图像色板？

伟大的！ 你是在正确的地方。

如果您按照我们上一篇关于如何创建 WooCommerce 色样的教程进行操作，您会发现本教程很容易。

因此，如果您是第一次来这里，您应该查看之前的教程以启用颜色产品属性色板。 我们假设您已下载该插件的免费和高级版本。 如果您以某种方式错过了它，请不要担心。 您可以立即下载！

如何在 Flatsome 主题中启用 WooCommerce 属性图像

安装 WooCommerce 属性变体样本和照片插件与在 Flatsome 主题中安装其他 WordPress 插件相同。 只需上传并从Plugins >> Add New激活它。 并按照以下步骤进行配置。

步骤 01：创建图像属性

要全局创建 Image 属性，请前往Products >> Attributes 。 在名称字段中插入您的属性标题。 在本教程中，我将属性名称称为： Image 。

将Slug字段留空。 系统自动生成属性段。 从属性类型下拉列表中选择图像。 按添加属性按​​钮保存更改。

创建 Image 属性后，您会注意到在右侧创建了一个列表。 它显示了添加的图像添加属性。

步骤 02：创建属性变化

新创建的 Image 属性为空。 属性内部没有变化。 要在图像属性下添加变体，请按配置术语链接。

出于演示目的，我们将添加三个变体。 苎麻、皮革和羊毛。

要创建变体，请在名称字段中插入变体标题。 保持slug字段为空，让系统自动生成它。 通过单击按钮上传/添加图像从您的计算机或媒体天秤座上传变体图像。

完成图像选择后，按添加新图像按钮完成该过程

就像属性列表一样。 将创建一个图像变体列表，如下所示。

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

是时候在可变产品中启用图像样本了。 在您想要的产品中启用图像样本。 进入您想要的产品编辑模式。 确保您从产品数据中选择了可变产品。

从产品数据下拉列表中选择变量产品，前往属性选项卡。 单击自定义产品属性下拉菜单。 在此下拉列表中，您可以看到所有全局创建的属性。 由于我们只创建了一个Image属性，它现在显示了一个Image属性。

选择Image属性并单击Add 。 您可以看到随后出现以下屏幕。

如果要选择颜色属性的所有可用变体，请单击全选按钮。 如果您想一次取消选择所有选定的变体。 单击选择无按钮。 通过选择Select All按钮添加所有变体，选中Used 用于变体设置，然后单击Save Attributes按钮。 检查以下屏幕截图以获取指导。

现在进入变体选项卡。 单击添加变体下拉菜单。 在这里，您会注意到两个选项。 第一个是添加变体，第二个是从所有属性创建变体。

在本教程中，我们将选择从所有属性中创建变体，然后单击开始按钮。 它将添加所有可用的变体，如下所示。

您可以在上图中看到Leather 、 Ramie和Wool图像变体。 在此屏幕中，您可以添加变体图像、变体价格和其他变体特定的详细信息。 在每个变体中添加完所有必需的详细信息后，单击“保存更改”按钮。

记住！ 不要忘记在每个变体中添加价格，否则，产品前端将看不到变体。

如果您可以成功添加变体。 您可以在产品前端看到以下样本。

简单设置

WooCommerce 变体样本和照片是一个强大的插件。 它允许您启用工具提示、禁用插件默认样式表以及在圆形和方形之间切换。

如果您想从 Round 到 Square 选择 Shape 样式并启用 Tooltip，前端产品页面如下所示。

高级设置

为了提供最大的灵活性，WooCommerce 属性图像色板插件提供了一些高级设置来为您提供更多。 这些设置允许您控制变化样本的宽度、高度和字体大小。 我们将发布的最棒的部分是属性行为选项，可以巧妙地呈现缺货变化。 属性行为可以使缺货变化模糊、隐藏和交叉。

如果您从“属性行为”中选择“模糊”选项，则缺货变体将类似于以下屏幕截图。

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

自定义工具提示图像并启用色板是此插件的高级功能。 要启用此功能，您必须先下载 WooCommerce Variation Swatches 插件的高级版。

启用工具提示

您可以从高级设置自定义工具提示背景和文本颜色。 检查以下屏幕截图以自定义工具提示样式。

工具提示前端预览类似于以下屏幕截图。

在商店页面上启用色板

在商店页面上启用图像样本。 导航到存档/商店页面。 检查存档上的设置显示以在商店/存档页面上显示图像样本。 即使在 Flatsome 主题中，您也可以在从存档色板位置设置中添加到商店中的购物车按钮之前和之后启用色板。 最重要的是，您可以通过这些设置专门控制图像变化样本的大小。

在商店页面上启用色板后，如下图所示。

结论：

这项技术将提高您网站的可用性和转化率。 如果您在 Flatsome Theme 中安装 WooCommerce 产品变体样本插件时遇到任何问题，请在下面的评论中告诉我。 我们会尽力帮助您。 如果您需要任何主题在您想要的要求。 在评论中告诉我。 我们将尝试在下一个教程中介绍它。