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

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

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

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

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

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

让我们开始吧！

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

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

这就是自定义字段有用的地方。

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

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

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

WooCommerce 商店有两种常见的自定义字段类型：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

让我们看一些示例，了解何时使用每个……

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

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

但是，假设您还想添加有关产品如何适合的注释。 例如，它的尺码是否合身，或者它是否比平时更紧或更松。 此信息对于每件 T 恤都是独一无二的，而不是大多数购物者想要过滤的信息，因此您最好将这些详细信息放在自定义字段中。

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

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

• 属性 –如果您要销售来自每位艺术家的多件衬衫，并且希望为购物者提供一个选项来过滤掉来自特定艺术家的所有衬衫，则可以使用此属性。
• 自定义字段- 如果您想存储和显示艺术家，您可以使用它，但您不需要使其可过滤。 例如，也许该艺术家并不是购物者真正感兴趣的对象，或者您可能只出售每位艺术家的一件衬衫。

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

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

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

创建自定义字段的方式取决于您是要显示其他产品数据字段还是要显示自定义输入字段。 让我们通过两者…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

就像设置 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 中显示此信息的另一种方式，您还可以创建一个包含自定义字段数据的产品表。

如果您使用上述插件之一（例如我们提到的官方产品附加组件插件）创建了自定义产品输入字段，这些插件通常会自动在您商店的前端显示这些字段，因此您不会需要手动将它们包含在您的 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 自定义字段还有任何疑问吗？ 发表评论，让我们知道！