如何为 WooCommerce 可变产品属性创建单选、标签、颜色和图像变化样本

WooCommerce 产品变化样本是一项令人难以置信的技术，旨在促进网站销售和转化。

想想为什么样本令人难以置信，对吧？

产品变体色板替换默认的 WooCommerce 产品变体选择下拉字段并启用颜色、图像、标签和单选色板。 因此，客户可以轻松选择所需的产品变体并立即将它们添加到购物车中。

在本教程中，我将向您展示如何使用 OceanWP Theme 在 WooCommerce 可变产品中启用单选、标签、颜色和照片变化样本。

我假设您安装了 OceanWP 主题。 要在您的可变产品中启用色板，请先安装WooCommerce Variation Swatches插件。

现场演示 | 下载 WooCommerce 变体色板插件

WooCommerce 变体色板安装

您也可以从您的网站后端下载 WooCommerce Variation Swatches 插件。 从顶部管理员通知中选择开始安装插件。

安装并激活WooCommerce Variation Swatches和Ocean Extra插件。

如果您没有收到安装色板插件的首要通知，请导航至Plugins >> Add New 。 在搜索字段中搜索WooCommerce 变体色板。 安装并激活Emran Ahmed 的 WooCommerce Variation Swatches 插件。

成功安装和激活插件后，就可以在 OceanWP 主题中创建收音机、标签、颜色和图像变化样本了。 让我们开始这个过程。

WooCommerce 变化样本设置

在您的 OceanWP 主题中安装Woocommerce Variation Swatches 和 Photos 插件后。 是时候为您的可变产品配置此插件了。 有两种方法可以安装此插件。

1. 为现有可变产品启用变体样本
2. 为新的可变产品设置变化样本

在本教程中，我将描述这两种方式。

为现有可变产品启用变体色板

你们中的许多人已经在商店中创建了可变产品。 如果您想将产品变体下拉选择转换为单选、标签、颜色和图像样本，您已从此处遵循本教程。 检查以下屏幕截图。 当前，默认变体选择下拉菜单类似于您网站中的以下屏幕截图。 在接下来的步骤中，我将向您展示如何将变体选择字段变成漂亮的样本。

前

后

步骤 01：编辑属性

前往产品>>属性。 所有现有的全局属性都列在属性部分。 安装 WooCommerce Variation Swatches 插件后，它添加了类型字段。 默认情况下，它会在类型标题下显示选择。

由于 WooCommerce Swatches 插件带有三种属性类型：颜色、图像、按钮。 您可以为所需的属性设置任何属性类型。

出于演示目的，已创建Fabrics、Pattern 和 Label属性。 为Pattern属性添加Color属性类型，为Fabrics属性添加Image属性类型，为Label属性添加Button属性类型。

要将颜色属性类型设置为Pattern属性，请单击Edit 。

从类型下拉列表中选择颜色类型。

返回产品>>属性。 编辑面料属性，如图案属性。

再次取回产品>>属性。 编辑标签属性，如面料和图案属性。

属性类型选择完成后，返回属性列表页面。 属性列表如下图所示。

选择产品属性的属性类型后，产品的前端将如下图所示。

Label 属性的变体看起来不错，但 Pattern 属性的变体需要定义颜色，Fabrics 属性的变体需要添加图像。

步骤 02：编辑变体

将颜色定义为Pattern属性中的变体。 前往产品>>属性。 从模式属性中选择配置术语。

选择配置术语后，出现属性变体列表。 对于 Pattern，此处列出了三种变体： Blue 、 Green和Red变体。 逐一编辑每个变体以添加变体颜色。

对于演示，选择绿色变体的编辑链接。

从变体编辑面板。 从颜色选择器中选择所需的颜色，然后按更新按钮更新更改。

成功更新所有变体颜色后，前端如下所示。

更新图案属性变体后，编辑面料属性，选择配置图案属性等术语。

按下配置术语后，会出现类似模式的 Fabrics 术语列表。 编辑每个变体以插入变体图像。 出于演示目的， Chambray属性的编辑链接。

从变体编辑面板。 从图像上传所需的变化图像并按更新按钮更新更改。

在为所有变体更新图像后，前端会喜欢以下屏幕截图。

为新的可变产品设置变化样本

这是那些没有为他们的商店创建任何可变产品的人的步骤。 首先，我们将创建可变产品并为它们启用色板。

步骤 01：创建全局属性和变体

成功安装和激活插件后，从Products >> Attributes全局创建所需的属性。 创建图案、面料、长度和尺寸变化，从类型下拉列表中输入属性标题和相应的属性类型。

当颜色、图像和标签Pattern 、 Fabrics 、 Label和Size属性创建成功时，它会在左侧创建一个属性列表。

创建全局属性后，选择配置术语添加属性变体。 要为模式属性创建变体，请选择配置术语链接。 填写名称字段并选择颜色代码。 为颜色属性创建绿色、蓝色和红色变体。

为模式属性添加变体后，左侧屏幕中会出现属性变体列表。

再次进入产品>>属性。 为Fabrics属性创建变体，从Fabrics中选择配置术语链接。 填写名称字段并从媒体库添加变体图像或从计算机上传。

为图像属性创建青年布、灯芯绒和浮雕变体，它们将出现在左侧。

为 Radio 和 Label 属性创建变体，例如 Image 和 Color 变体。

步骤 02：在可变产品页面中显示色板

在可变产品页面上启用色板。 进入您想要的产品编辑模式，从产品数据中选择可变产品。

前往属性选项卡。 单击自定义产品属性下拉菜单。 这里出现了所有全局创建的属性。 将所有属性一一添加。

添加所有属性后，按每个属性设置中的“全选”按钮一次添加所有可用的变体。 添加产品属性变体后，选择保存属性按钮保存设置。

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

选择从所有属性创建变体，然后按Go 。 它将添加为属性创建的所有可用变体组合。 为个别变化添加价格和变化图像并保存设置。

结论

我试图涵盖在 OceanWP 主题中安装 WooCommerce Variation Swatches 插件的每一个步骤。 如果您需要更多帮助，请在评论框中告诉我。