使用自定义字段提升您的 WooCommerce 产品页面

如果您想改进您的 WooCommerce 商店，学习如何使用 WooCommerce 自定义字段是您工具箱中的一个很好的工具。

自定义字段让您可以收集和显示有关您的 WooCommerce 产品的额外信息，这对于自定义您的商店非常有用。

使用正确的工具，WooCommerce 自定义字段也不必太复杂。 虽然您当然可以使用代码来插入自定义字段，但 Elementor 提供了一种更简单的方法来处理自定义字段，让您可以从 Elementor 的可视化界面中完成所有操作。

在这篇文章中，我们将介绍您需要了解的有关 WooCommerce 自定义字段的所有信息，包括以下内容：

• 深入了解什么是 WooCommerce 自定义字段以及它们如何帮助改善您的商店。
• 您可以添加到 WooCommerce 的不同类型的自定义字段。
• 何时使用 WooCommerce 自定义字段与产品属性/分类法。
• 如何在后端创建 WooCommerce 自定义字段。
• 如何使用 Elementor Pro 或自定义代码在商店的前端显示自定义字段。

让我们开始吧！

WooCommerce 自定义字段可让您存储和显示有关您网站上产品的其他信息。 它们就像常规的 WordPress 自定义字段，但它们专门收集有关您的 WooCommerce 产品的信息。

默认情况下，WooCommerce 提供适用于大多数产品的高级字段，例如价格和产品描述。 但它没有为您提供创建商店独有字段的方法。

这就是自定义字段可以发挥作用的地方。

在后端，自定义字段可以更轻松地存储有关您的产品的独特详细信息和信息。 您可以为所有重要细节创建专用字段，而不是尝试将自定义信息放入非结构化产品描述框中，这样可以更轻松地管理和更新产品。

在前端，自定义字段可帮助您以结构化方式显示所有这些信息。 如果需要，他们还让您有机会从购物者那里收集更多信息，例如让他们输入自定义雕刻信息以包含在他们从您的商店购买的珠宝上。

如果您仍然不太确定所有这些是如何组合在一起的——别担心！ 在下一节中，我们将为您提供一些真实示例，说明如何使用自定义字段来增强您的商店。

对于 WooCommerce 商店，您会看到两种常见类型的自定义字段：

• 产品数据字段– 这些可以让您存储有关产品的附加信息。 作为商店管理员，您将从后端 WordPress 仪表板输入此数据。 然后，您将在产品页面上显示数据。
• 自定义输入字段– 这些可以让您从购物者那里收集有关产品的其他信息。 通常，这是为了帮助您创建某种类型的可定制产品。 这里的主要区别在于您的购物者从您网站的前端输入数据。

根据您商店的情况，您可能只使用一种类型的 WooCommerce 自定义字段。 或者，您可以同时使用这两种类型，这样您既可以显示额外信息，也可以从购物者那里收集额外信息。

让我们更详细地看看它们。

WooCommerce 自定义字段最常见的用途是显示有关产品的附加信息。 后端 WooCommerce 输入字段是“一刀切”的，但您可能会遇到想要以结构化方式显示有关产品的独特信息的情况。

例如，您可能有一家在线书店，并且想要包含评论家对您所售图书的正面评价片段。 当然，您可以将它们直接包含在产品描述中，但是使用自定义字段可以让您为这些报价提供专门的输入字段，并且您可以更好地控制放置它们的位置。

或者，也许您销售带有图案的 T 恤，并且您想要收集和展示有关每件 T 恤设计师的信息。

这是在后端添加一些自定义字段的示例：

然后您可以在产品页面上的任何位置显示该信息，如下所示：

基本上，如果您想显示有关产品的任何类型的附加信息，将这些信息放在自定义字段中可能非常有用，原因如下。 你可以…

1. 创建专用的输入字段，这使得将来添加信息和更新信息变得更加容易。
2. 将信息准确显示在您想要放置的位置。 您可以将其放置在产品页面的任何位置。 使用 Elementor，您甚至不需要知道任何代码即可执行此操作。
3. 根据需要格式化信息。 例如，您可以添加颜色以引起注意、添加边框等。

使用 WooCommerce 自定义字段的另一种选择是在您的单个产品页面上创建自定义输入字段，以便购物者可以自定义产品或提供其他信息。

例如，也许您销售某种类型的珠宝，并且您想让购物者能够在他们购买的商品上创建自定义雕刻。 或者，您可能想让购物者输入自定义消息以丝网印刷在衬衫上。

要完成这些用例，您可以将文本输入字段添加到前端产品页面。

下面是一个示例，除了上一节中的自定义数据字段外，还添加了这样一个输入字段：

如果您想收集额外的产品数据，另一个流行的选择是 WooCommerce 属性和分类法。 当您定制产品时，您只会看到这些称为“属性”的东西，但 WooCommerce 在后端所做的是为您创建的每个属性创建一个新的自定义分类法。

属性和分类法也是存储产品信息的一种非常有用的方法，但它们具有不同的功能，因此了解其中的区别很重要：

• 属性/分类法——您使用它们将产品组合在一起，有点像一个类别。 您的购物者可以使用此信息来过滤掉具有特定属性的所有产品。 默认情况下，WooCommerce 已经包含两个分类法——产品类别和标签——但您可以使用属性来添加无限的自定义分类法。
• 自定义字段——您可以使用这些字段来存储每个产品独有的信息。 产品未按自定义字段信息分组在一起。

让我们看一些何时使用每个的例子......

首先，假设您销售一系列不同颜色的不同 T 恤设计。 您想要一种方法来存储有关每件 T 恤颜色的信息，以便您的购物者可以筛选出他们感兴趣的所有颜色的 T 恤。

对于此用例，您可能希望使用产品属性（分类法）。 这将根据指定的颜色将不同的项目组合在一起，并让购物者过滤它们。 例如，浏览所有的绿色衬衫。

但是，假设您还想添加有关产品适合度的说明。 例如，尺码是否合身，或者是否比正常尺码更紧或更宽松。 此信息对于每件 T 恤都是独一无二的，大多数购物者都不想根据这些信息进行过滤，因此您最好将这些详细信息放在自定义字段中。

在某些情况下，属性和自定义字段都适用，您可以根据自己的具体需要选择不同的方法。

例如，假设您要添加有关设计您销售的每件 T 恤的平面设计师的信息。 以下是您可能希望使用每个选项的不同场景：

• 属性 –如果您要销售每位艺术家的多件衬衫，并且您想让购物者可以选择过滤掉特定艺术家的所有衬衫，则可以使用此属性。
• 自定义字段——如果你想存储和显示艺术家，你会使用它，但你不需要让它可过滤。 例如，也许这位艺术家并不是购物者真正感兴趣的，或者您可能只销售每位艺术家的一件衬衫。

使用 WooCommerce 自定义字段有两个部分：

1. 您需要在后端创建自定义字段，以便为您的产品添加更多信息。
2. 您需要在商店的前端显示来自这些自定义字段的信息。

在第一部分中，我们将向您展示如何在后端创建 WooCommerce 自定义字段。 然后，在下一节中，我们将介绍如何显示它们。

如何创建自定义字段取决于您是要显示其他产品数据字段还是要显示自定义输入字段。 让我们来看看这两个......

要收集和存储有关 WooCommerce 产品的其他数据，您可以使用任何自定义字段插件。 与 Elementor 集成的热门选项包括：

• 高级自定义字段 (ACF)
• 工具集
• 豆荚
• 元盒

如果您想了解有关这些产品的更多信息，我们对 ACF、Toolset 和 Pod 进行了详细比较，但我们将在此示例中使用 ACF，因为它很流行、免费且灵活。 不过，相同的基本思想适用于所有插件。

首先，安装并激活来自 WordPress.org 的免费高级自定义字段插件。 然后，转到自定义字段 → 添加新字段以创建一个新的“字段组”。

字段组顾名思义 - 一组您想要添加到您的部分或全部 WooCommerce 产品的一个或多个自定义字段。

首先，使用位置规则来控制要向哪些产品添加自定义字段。

首先，将Post Type设置为Product 。 如果您想在所有产品上显示这些自定义字段，您只需要这样做：

如果您只想在某些产品（例如某个类别的产品）上显示这些自定义字段，您可以根据需要添加更多规则。 例如，以下是定位“服装”或“装饰”类别中的产品的情况：

然后，您可以使用界面顶部的+ 添加字段按钮添加自定义字段。 对于每个字段，您可以选择不同的字段类型（例如数字、短文本或长文本等）并配置有关该字段的其他详细信息。

例如，这里有三个要收集的自定义字段……

1. 设计师的名字。
2. 设计师创建设计的年份。
3. 设计师关于设计的声明。

一旦您对所有内容感到满意，请继续并发布您的现场组。

现在，当您编辑产品时，您会在产品编辑界面中看到这些新的自定义字段：

在下一节中，我们将向您展示如何获取这些自定义字段中的信息并将其显示在您的 WooCommerce 商店的前端。

但首先 - 让我们谈谈其他类型的 WooCommerce 自定义字段 - 自定义产品输入字段。

如果您想收集有关产品的其他信息并将其显示在您网站的前端，那么上面的插件非常有用。 但是，它们不适合在前端收集购物者的自定义输入。 例如，让购物者输入将添加到产品中的自定义雕刻信息。

对于此用例，您通常需要一个 WooCommerce 产品附加插件。 这些插件专门设计用于在商店前端接受购物者的产品输入。

您可以找到很多插件来满足这种需求，但有两个不错的起点：

• 官方 WooCommerce 产品附加组件插件——49 美元
• 高级产品领域——免费增值

我们将使用 WooCommerce 团队的官方 Product Add-Ons 插件向您展示它是如何工作的，但所有产品附加插件的基本思想都是相同的。

安装插件后，您可以转到产品 → 附加组件来创建要在部分/所有产品上显示的自定义输入字段。

与设置 ACF 一样，您可以将您的字段定位到所有产品或仅特定类别的产品。

您还可以根据需要添加任意数量的字段，并从不同的字段类型中进行选择。

一个关键区别在于，您还可以选择根据购物者的选择调整产品价格。

例如，如果购物者想要添加自定义雕刻/信息，您可以额外收取 5 美元：

当您在产品编辑器中工作时，您还可以选择将自定义输入字段直接添加到产品。 您可以从产品数据框中的新附加组件选项卡执行此操作：

Product Add-Ons 插件将自动在您商店的前端显示这些自定义字段。 但在下一节中，我们将向您展示如何使用 Elementor 手动控制它们的位置。

既然您已经创建了自定义字段并向它们添加了信息，您就可以在站点的前端显示该信息了。

我们将在这里向您展示两个选项：

1. 元素者
2. 通过 functions.php 文件自定义代码

显示 WooCommerce 自定义字段的最简单方法是使用 Elementor Pro 和 Elementor WooCommerce Builder。 使用 Elementor 的可视化拖放界面，您可以创建一个或多个包含自定义字段数据的产品模板。

首先，转到模板 → 主题生成器并创建一个新的单一产品模板。

然后，您可以从其中一个预制模板中进行选择，或者从头开始创建您自己的产品设计。 如果您在这里需要帮助，可以查看我们关于如何自定义 WooCommerce 产品页面设计的完整指南。

当您准备好插入 WooCommerce 自定义字段时，添加一个常规文本编辑器小部件，然后选择使用动态标签填充它的选项。 在动态标签下拉列表中，选择ACF 字段：

在下一个屏幕上，单击扳手图标并使用Key下拉菜单选择要显示的确切自定义字段：

您还可以使用高级选项在自定义字段的信息之前/之后添加静态文本。

就是这样！ Elementor 现在将动态提取您正在预览的产品的自定义字段数据。

您还可以使用自定义字段来填充文本以外的内容。 例如，如果您添加了一个数字自定义字段，您可以使用该数字来填充星级、计数器等。

或者，您也可以动态填充链接。 例如，您可以创建一个包含指向产品文档的链接的自定义字段，并使用该链接填充单个产品页面上的按钮。

要了解有关此功能的更多信息，您可以阅读我们的 Elementor Pro 动态内容完整指南。

或者，对于在 Elementor 中显示此信息的另一种方式，您还可以创建一个包含自定义字段数据的产品表。

如果您使用上述插件之一创建了自定义产品输入字段（例如我们提到的官方 Product Add-Ons 插件），这些插件通常会自动在您商店的前端显示这些字段，因此您不会需要手动将它们包含在您的 Elementor 模板中。

在 Elementor 中，这些附加字段通常会显示在您在设计中添加“添加到购物车”小部件的任何位置。 因此，如果您想移动它们，您可以调整“添加到购物车”小部件的位置。

如果您熟悉代码，您还可以使用子主题的 functions.php 文件或代码片段之类的插件将 WooCommerce 自定义字段添加到产品页面。 但是，我们不建议大多数人使用此方法，因为它很复杂。

您不仅需要了解代码才能进行设置，而且您也无法获得实时的视觉预览，并且很难放置您的字段。 这就是 Elementor 为大多数店主提供更好选择的原因。

如果您确实想使用手动代码方法，您将依赖 WooCommerce 挂钩来放置您的自定义信息。 如果您不熟悉“挂钩”，它们基本上可以让您在 WooCommerce 商店的某些部分注入代码或内容。

例如，您可以找到不同的钩子来在产品标题上方、产品标题下方、添加到购物车按钮下方等处注入内容。

首先，您需要为要从自定义字段中注入内容的位置选择挂钩。 为了更轻松地可视化这些位置，您可以使用 Business Bloomer 出色的可视化 WooCommerce 挂钩指南。

除了找到您要使用的挂钩之外，您还需要 PHP 来显示来自 ACF 的字段。 如果您不确定如何获取它，ACF 有非常详细的文档。

然后，您可以使用如下代码片段来显示字段，其中insert_hook_location是您要使用的挂钩位置， field_name是来自 ACF 的字段名称 slug：

例如，下面的代码片段将在 WooCommerce 产品元详细信息下方显示艺术声明自定义字段：

这是您商店前端的样子：

您可以重复该过程以显示其他自定义字段。

了解如何使用 WooCommerce 自定义字段对于创建自定义、优化的 WooCommerce 商店非常有用。

您可以使用它们提供一种结构化的方式来在后端仪表板中输入额外的产品数据，并在您的前端站点上显示该信息。 或者，您也可以创建自定义输入字段，让购物者自定义您的产品。

要为其他产品数据创建自定义字段，您可以使用高级自定义字段 (ACF) 等插件，而自定义输入字段需要专用的产品附加插件。

然后，为了以最简单的方式在商店的前端显示这些自定义字段，您可以使用 Elementor 和 Elementor WooCommerce Builder。 使用 Elementor，您可以创建自己的自定义产品模板，其中包含自定义字段中的无限动态信息——无需代码。

您对如何在商店中使用 WooCommerce 自定义字段仍有疑问吗？ 发表评论，让我们知道！