如何在 WooCommerce 中添加自定义产品标签

已发表: 2022-03-17

您想将自定义产品标签添加到您的 WooCommerce 产品页面吗？你来对地方了。在本文中，我们将展示如何在您的在线商店的产品页面上显示自定义产品选项卡。

但在我们深入研究之前，让我们更好地了解什么是产品标签，以及为什么您可能希望将自定义产品标签添加到您的 WooCommerce 产品页面。让我们从简而言之产品标签的基本概念开始。

WooCommerce 中的产品标签是什么？

产品选项卡通过将类似信息分组到一个或多个选项卡中来帮助组织产品页面。每个单独的选项卡都包含一组特定的数据，并与其他产品详细信息分开。这样，信息变得容易访问、不那么混乱、视觉上令人愉悦且易于理解。

WooCommerce 中的默认产品标签

如今，大多数产品都有许多必须传达给购物者的基本信息。但是，在一个地方容纳所有这些信息可能会很棘手。这就是为什么您经常会在产品页面上看到多个产品选项卡，例如简短描述、详细描述、技术规格、评论等。

我希望这能让您对产品标签有所了解。现在，让我们看看您可能需要在 WooCommerce 中添加自定义产品选项卡的一些原因。

为什么在 WooCommerce 中添加自定义产品标签？

上面，我们已经看到产品选项卡是组织产品信息的好方法。但是，默认选项卡没有足够的空间来填写所有附加信息。如果您想包含详细说明、技术规格、数据表、视频教程等，该怎么办？您会发现使用默认选项卡很难组织所有这些信息。

但是，通过为每组信息添加自定义产品选项卡，您可以更好地组织产品详细信息。它还使您可以自由地添加所有必要的信息，而不必担心填满页面并压倒用户。

在客户面前，产品标签使购物者更容易发现他们感兴趣的信息并忽略其余信息。例如，普通用户可能对详细的技术规格不感兴趣，而从产品描述和详细描述中就足够了。但是，精通技术的人会对技术规格和数据表更感兴趣，这使他们更容易找到所需的信息。

此外，作为店主，您可以利用自定义选项卡突出显示用户必须了解的关键公司政策。例如，您可以添加一个常见问题选项卡来回答最常见的问题。同样，您可以在单独的选项卡下添加退货政策等。

因此，始终建议将您的产品信息组织到易于遵循的产品选项卡中。这样您的用户就可以以最简单的方式获得他们想要的东西，而不会遇到任何麻烦。

到目前为止，我希望您已经了解自定义 WooCommerce 产品选项卡的重要性。现在让我们继续下一步，在 WooCommerce 中添加自定义产品选项卡。

如何添加自定义 WooCommerce 产品标签

我们可以通过2种主要方式在 WooCommerce 中添加自定义产品选项卡：

使用插件
以编程方式

让我们一一看看这两种方法。我们将从插件方法开始。所以，让我们潜入吧。

1. 使用插件添加自定义产品标签

有多个 WordPress 插件可以添加自定义 WooCommerce 产品选项卡，因此请随意使用其中的任何一个。但是，为了演示，我们将使用由YIKES, Inc.开发的适用于 WooCommerce 插件的自定义产品选项卡。

WooCommerce 插件的自定义产品标签

该插件有免费和高级版本。免费版本涵盖了基本要求。但是，如果您对更高级的功能感兴趣，您可以选择高级计划，起价为每年 29.99 美元，并提供 1 年的更新和支持。

现在让我们看看如何使用该插件在 WooCommerce 中添加自定义产品选项卡。我们走吧！

1.1。安装并激活插件

首先，您需要在您的网站上安装并激活插件。要安装插件，请转到您的WP 管理仪表板并导航到插件 > 添加新的。 搜索YIKES, Inc的 WooCommerce 插件的自定义产品选项卡。并单击立即安装按钮以安装插件。安装完成后，点击激活以激活您网站上的插件。

为 WooCommerce 插件安装自定义产品选项卡

如果您想使用高级版或高级插件，则需要手动安装插件。

伟大的！您现在已经成功地在您的站点上安装了该插件。是时候使用 WooCommerce 插件的自定义产品选项卡添加自定义产品选项卡了。

1.2. 将自定义产品标签添加到 WooCommerce 产品

插件激活后，您可以从产品编辑页面将自定义产品选项卡添加到 WooCommerce 产品。从您的WP 管理仪表板，导航到产品 > 所有产品。 现在，将鼠标悬停在您希望添加自定义选项卡的产品上，然后单击编辑。

在 WooCommerce 中编辑产品

这将打开产品编辑页面。向下滚动到产品数据部分，然后单击自定义选项卡。您将获得两个选项，添加选项卡和添加已保存的选项卡（稍后会详细介绍）。单击“添加选项卡”按钮，它将打开“新建自定义选项卡”表单。

将自定义选项卡添加到 WooCommerce 产品

在 New Tab 表单中，指定 Tab 标题并添加相关内容。随意添加文本、图像、链接、多媒体等。此外，您可以通过单击底部的“添加选项卡”按钮添加多个自定义选项卡。如果您有多个自定义选项卡，您可以通过移动选项卡顺序箭头更改它们的顺序。完成后，点击保存选项卡以保存新创建的自定义选项卡。

自定义 WooCommerce 产品选项卡的详细信息

瞧！就这么简单。您现在已经创建了自己的自定义产品选项卡。现在，导航到您的产品页面的前端，以查看您网站上的自定义标签。

技术规格产品标签

但是，将自定义选项卡逐个添加到多个产品可能会让人筋疲力尽，而且不是一种有效的方法。这就是该插件带有“已保存标签”功能的原因。

让我们看一下保存的标签，看看我们如何将它们添加到 WooCommerce 产品中。

1.3. 创建已保存的选项卡

已保存的选项卡充当模板，您可以保存以供以后使用。创建保存的选项卡后，只需几个简单的步骤即可将其添加到产品中。因此，保存的标签可以快速轻松地向多个产品添加自定义标签。

要创建已保存的选项卡，请转到您的WP 管理员仪表板并单击自定义产品选项卡。在这里，您将看到您之前创建的所有已保存选项卡的列表。现在，单击顶部的“添加选项卡”按钮，它将带您进入“新选项卡”表单。

添加已保存的自定义产品选项卡

在“新选项卡”表单中，指定选项卡标题并添加一个名称供您参考。接下来，添加选项卡内容。这可能包括文本、图像、多媒体、链接等。一旦您对所有更改感到满意，请单击“保存选项卡”按钮以保存选项卡。

创建自定义产品选项卡模板

就像这样，您可以添加任意数量的选项卡以供以后使用。要查找您创建的所有已保存选项卡，只需转到WP 管理仪表板 > 自定义产品选项卡。 在这里，您会找到所有已保存的选项卡，您可以从这里编辑、删除或添加新选项卡。

查看所有已保存的自定义产品选项卡

创建自己的“已保存标签”后，只需单击几下即可将它们添加到任何产品中。让我们看看如何做到这一点。

1.4. 将保存的标签添加到 WooCommerce 产品

将保存的标签添加到产品遵循与添加常规标签类似的过程。转到产品编辑页面并向下滚动到产品数据部分。单击自定义选项卡，然后单击添加保存的选项卡按钮。

将保存的产品选项卡添加到 WooCommerce 产品

从“已保存选项卡”列表中选择要添加的选项卡。它将加载所有选定选项卡的数据。现在，您可以按原样保存或根据您的要求对其进行修改。您可以通过单击相应的按钮进一步添加更多自定义选项卡，并根据您的喜好重新排列选项卡。

最后，有一个复选框可以覆盖已保存的选项卡。基本上，它将选项卡与原始“保存的选项卡”断开链接。因此，将来，如果您对已保存的选项卡进行任何更改，它们将不会反映在该产品中。

修改产品选项卡详细信息

保存自定义产品选项卡后，它将立即出现在产品页面上。要进行验证，只需导航到您网站的前端并转到该产品页面并查看您的自定义选项卡。

产品页面上显示的常见问题选项卡

上面，我们已经看到了如何使用第三方插件在 WooCommerce 中添加自定义产品选项卡。但是，还有另一种方法可以实现相同的功能，即使用自定义代码片段。让我们看看如何以编程方式将自定义产品选项卡添加到 WooCommerce 产品页面。

2. 以编程方式添加自定义产品选项卡

在我们跳入代码片段以在 WooCommerce 中添加自定义产品选项卡之前，让我们先看看如何将代码片段添加到 WooCommerce。

2.1。访问 WordPress 的代码编辑器

首先，我们强烈建议您创建站点的完整备份并使用子主题来编辑functions.php文件。如果您不知道，请查看我们关于如何创建子主题的指南。或者，如果您不想手动操作，请查看这些子主题插件。

完成创建子主题后，转到WP 管理仪表板并导航到外观 > 主题编辑器。 确保选择子主题并打开functions.php文件。现在您可以在functions.php文件的末尾添加您的自定义代码片段。完成后，单击更新文件按钮以使更改生效。

编辑 functions.php 文件

或者，您可以使用代码片段插件将自定义代码片段添加到您的站点。首先，您需要从 WordPress 存储库安装插件。只需转到WP 管理仪表板 > 插件 > 添加新的。 搜索代码片段插件并将其安装在您的网站上。

代码片段插件

然后，从您的WP Admin Dashboard转到插件设置，然后单击Add New Snippet按钮以添加您的自定义代码段。就像这样，您可以根据需要添加任意数量的自定义代码片段。

添加新片段

使用这个插件的一件很酷的事情是你不需要创建任何子主题，因为插件会自己处理代码片段。但是，如果出现问题，仍然建议使用子主题来保护您的网站。

现在您已经了解了如何将代码片段添加到 WordPress 网站，让我们看看我们如何使用自定义代码片段在 WooCommerce 中添加自定义产品选项卡。

2.2. 将自定义产品标签添加到 WooCommerce 中的所有产品

一次向所有产品添加自定义产品选项卡非常有效，因为所有产品的信息都保持不变。例如，您可以添加在所有产品中或至少在指定产品类别中基本保持不变的常见问题解答。

以下代码片段可用于添加全局自定义产品选项卡并使用相关内容填充它。

 //添加一个新的自定义产品选项卡
add_filter('woocommerce_product_tabs', 'ql_new_custom_product_tab');

功能 ql_new_custom_product_tab( $tabs ) {

//要添加多个选项卡，请更新 $tabs['xyz'] 数组中每个新选项卡的标签，例如 custom_tab2、my_new_tab 等。
$tabs['custom_tab'] = 数组（
'title' => __( 'Custom Product Tab', 'woocommerce' ), //将“Custom Product tab”更改为您想要的任何文本
'优先级' => 50,
'回调' => 'ql_custom_product_tab_content'
);
返回$标签；
}

// 将内容添加到自定义产品选项卡
功能 ql_custom_product_tab_content() {

// 自定义标签内容
//您可以在此处添加任何 php 代码，它将显示在您新创建的自定义选项卡中
echo '<h2>自定义产品标签内容</h2>';
echo '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 在 dui eget rutrum 中的 Aenean facilisis。 Morbi quis sodales felis。</p>';
echo '<img src="http://hypernova/wp-content/uploads/2021/10/logo-1.jpg" width="300" height="400" align="center">';
}

完毕！现在，您可以导航到站点的前端并验证更改。

将自定义产品选项卡添加到 WooCommerce 所有产品

现在，上面的代码片段只能用于向 WooCommerce 中的所有产品添加自定义产品选项卡。但是，如果您只需要为特定产品添加自定义产品标签怎么办？好吧，我们为您准备了一个片段，可以完成工作。我们来看一下。

2.3. 仅将自定义产品选项卡添加到特定产品

首先，您需要获取要添加自定义选项卡的产品的产品 ID。只需转到您的WP 管理仪表板并导航到产品 > 所有产品。 将鼠标悬停在您想要的产品上，它将显示产品 ID。保存此 Product-ID，因为稍后我们需要将其添加到我们的代码片段中。

在 WooCommerce 中获取产品 ID

将以下代码片段复制并粘贴到functions.php文件或 Code Snippets 插件中，无论您使用哪种方法。请记住将占位符 Product-ID 替换为您的实际 Product-ID。

 //添加一个新的自定义产品选项卡
add_filter('woocommerce_product_tabs', 'ql_specific_custom_product_tab');

功能 ql_specific_custom_product_tab( $tabs ) {
全球$产品；

//获取产品ID。 将其替换为您的实际产品 ID
if( $product->get_id() == 1911 ) {

// 添加新标签
//要添加多个标签，更新$tabs['xyz']中每个新标签的标签，例如custom_tab，my_new_tab等。
$tabs['specific_product_tab'] = array(
'title' => __( 'Specific Product Tab', 'woocommerce' ), //将“Specific Product tab”更改为您想要的任何文本
'优先级' => 50,
'回调' => 'ql_specific_product_tab_content'
);
}
返回$标签；
}

//将内容添加到自定义产品选项卡
功能 ql_specific_product_tab_content() {

// 自定义标签内容
//您可以在此处添加任何 php 代码，它将显示在您新创建的自定义选项卡中
echo '<h2>特定产品标签内容</h2>';
echo '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 在 dui eget rutrum 中的 Aenean facilisis。 Morbi quis sodales felis。</p>';
echo '<img src="http://hypernova/wp-content/uploads/2021/10/logo-1.jpg" width="300" height="400" align="center">';
}

就是这样。您新创建的自定义产品选项卡现在已应用于您所需的产品，并且只会针对该产品显示。

在 WooCommerce 中为特定产品添加自定义产品选项卡

到目前为止，您已经看到了在 WooCommerce 中为单个产品和所有产品添加自定义产品选项卡的代码片段。让我们更进一步，看看更多代码片段来自定义产品选项卡。

2.4. 重命名产品标签

有时，您可能需要替换自定义选项卡的标题，甚至更改默认选项卡的名称。例如，对于电视节目或电影，您可能希望将“评论”选项卡更改为“评分”。使用下面的代码片段可以让您轻松更改自定义产品的标题。

 //重命名 WooCommerce 中的产品选项卡
add_filter('woocommerce_product_tabs', 'ql_rename_product_tabs', 98);

功能 ql_rename_product_tabs( $tabs ) {
//将 $tabs['xyz'] 数组中的标签标签替换为您的实际标签标签
$tabs['reviews']['title'] = __('Ratings'); // 重命名评论标签
$tabs['custom_tab']['title'] = __('自定义标签更新'); // 重命名用户创建的自定义选项卡。
返回$标签；
}

伟大的！您的产品选项卡现已重命名。您现在可以导航到站点的前端并自己验证更改。

重命名 WooCommerce 产品选项卡

2.5. 重新排序选项卡

以下代码片段允许您更改产品选项卡的顺序。它基于优先级值工作。

数字越小表示优先级越高，数字越大表示优先级越低。因此，优先级最高的选项卡首先显示，然后是下一个选项卡，最低优先级的选项卡将位于最后一个位置。

如果您查看下面的代码，它会使用一些产品选项卡来演示其工作原理。如果需要，您可以添加更多产品选项卡，然后根据您的喜好重新排序。只需确保将标签标题替换为您的实际标签标题即可。

 //在 WooCommerce 中重新排序产品选项卡
add_filter('woocommerce_product_tabs', 'ql_reorder_product_tabs', 98);

功能 ql_reorder_product_tabs( $tabs ) {
//根据优先级值重新排序选项卡
//将 $tabs['xyz'] 数组中的标签标签替换为您的实际标签标签
$tabs['description']['priority'] = 5; // 先描述
$tabs['custom_tab']['priority'] = 10; // 自定义选项卡第二个。
$tabs['specific_product_tab']['priority'] = 15; // 产品特定标签第三个。
$tabs['reviews']['priority'] = 20; //最后评论
返回$标签；
}

就是这样！您现在已经按照自己的自定义顺序对产品选项卡进行了排序。现在您可以导航到 WooCommerce 商店的前端以验证更改。

重新排序 WooCommerce 产品标签

2.6. 删除标签

现在，您已经添加了所有这些选项卡，但是如果您现在想删除它们怎么办？好吧，事实证明有一个代码片段可以从您的产品页面中删除所有不需要的产品选项卡。

以下代码片段适用于默认和自定义产品选项卡。请记住用您的实际标签标题更改标签标题。

 //删除 WooCommerce 中的产品选项卡
add_filter('woocommerce_product_tabs', 'ql_remove_custom_product_tabs', 98);
功能 ql_remove_custom_product_tabs( $tabs ) {

//将 $tabs['xyz'] 数组中的标签标签替换为您的实际标签标签
未设置（$tabs['reviews']）； // 移除评论标签
未设置（$tabs['description']）； // 移除描述标签
未设置（$tabs['custom_tab']）； // 删除用户创建的自定义选项卡。
返回$标签；
}

就是这样。您不需要的产品标签现已成功删除。您现在可以导航到 WooCommerce 商店的前端并验证更改。

上面，我们已经看到了如何使用第三方插件和以编程方式在 WooCommerce 中添加自定义产品选项卡。现在让我们继续看看组织 WooCommerce 产品的其他一些方法。

奖金：如何对 WooCommerce 产品进行排序

按特定顺序对产品进行分类有两件事。首先，它允许您通过将某些产品置于页面顶部来突出显示它们。其次，由于产品以合乎逻辑的方式组织，它使客户更容易找到或滚动浏览产品。

WooCommerce 中的产品排序选项

默认情况下，WooCommerce 提供六个排序选项，并允许您选择其中一个作为默认排序方法。这些选项包括：

默认排序（自定义排序+名称）：产品默认按名称排序，但同时允许您自定义排序产品。这对于突出显示不符合单一标准的产品很有用。

人气（销售额）：按销售额降序排列商品，将您最畅销的商品排在首位。

平均评分：按产品的平均评分以降序对产品进行排序。评分最高的产品获得最高位置，其次是下一个，依此类推。

按最近排序：根据产品添加到商店的时间对产品进行排序。这会将您的最新产品带到顶部，这有利于突出显示最新添加的产品。

按价格排序（asc，desc）：根据您的选择，根据产品价格按升序或降序对产品进行排序。

更改 WooCommerce 中的默认产品排序方法

现在，为了更改 WooCommerce 中的默认排序方法，请转到WP Admin Dashboard并导航到Appearance > Customize 。这将带您进入主题定制器。

WordPress 定制器手册

在主题定制器中，转到产品目录菜单。现在，转到默认产品排序部分，然后单击下拉菜单。选择您喜欢的排序方法并点击发布以保存更改。

WooCommerce 中的默认产品排序选项

太棒了！您现在已经选择了您喜欢的产品分类方法。但是，这些并不是对产品进行分类的唯一方法。您可以通过许多其他方式和方法对 WooCommerce 产品进行分类。如果您有兴趣，请查看我们关于如何对 WooCommerce 产品进行分类的详细指南。

结论

总而言之，自定义产品选项卡非常有用，因为它们可以帮助您以更有条理的方式呈现有关产品的信息。在单独的选项卡中组织产品信息可以让客户轻松发现他们所需的信息并做出更好的购买决定。

此外，它还允许店主添加有关产品的所有基本信息，而不会填满整个页面并使用户不知所措。在某种程度上，这对每个人来说都是双赢的。

总而言之，我们已经看到了在 WooCommerce 中添加自定义产品选项卡的多种方法：

使用插件
以编程方式

我们从 WooCommerce 插件的自定义产品选项卡开始，了解如何使用该插件添加自定义产品选项卡。我们还看到了它的“已保存标签”功能，该功能允许我们保存常用标签以供以后使用。

之后，我们查看了在 WooCommerce 中添加自定义产品选项卡的代码片段。我们看到了将产品标签添加到所有产品以及仅特定产品的片段。此外，我们还查看了重命名、重新排序和删除产品选项卡的代码片段。最后，我们通过查看 WooCommerce 产品分类选项来组织商店页面。

您是否尝试过在 WooCommerce 中添加自定义产品选项卡？你用了什么方法？你的经历如何？请在下面的评论中告诉我们。

如果您想了解有关改进 WooCommerce 网站的更多信息，这里有一些您可能感兴趣的帖子：

如何自定义 WooCommerce 模板
自定义 WooCommerce 产品页面的最佳插件
如何删除 WooCommerce 中的附加信息选项卡