如何在 WooCommerce 中隐藏和删除相关产品

您是否正在寻找一种简单的方法来隐藏商店中的相关产品？ 我们有东西给你。 在本文中，我们将向您展示在 WooCommerce 中删除相关产品的不同方法。

什么是相关产品？

顾名思义，相关产品是以某种方式与另一个项目相关联的产品。 在 WooCommerce 中，相关产品是与购物者正在查看的产品相关的推荐，并倾向于补充主要商品。 它们通常出现在您的产品页面底部，可以帮助您的企业增加销售额和收入。 例如，与手机相关的产品可能是耳机、手机壳、相机配件等。

为什么要删除 WooCommerce 中的相关产品？

如果相关产品可以帮助我们提高销售额，我们为什么要删除它们？ 在几种情况下，您可能希望在 WooCommerce 中隐藏相关产品。 例如，如果您只销售一些不相关的产品，您可能不想展示它们。 此外，如果您的主题在相关产品部分中表现不佳，您可能需要将其从商店中删除。

最重要的是，有时来自某些主题或插件的 CSS 代码可能会破坏您的网站或其中的一部分。 如果与相关产品部分有冲突，您可以将其删除。

此外，如果您的产品页面杂乱无章或相关产品过多，您可以显示更少的项目或完全删除该部分。

在向您展示如何删除它们之前，让我们看看如何在 WooCommerce 中设置相关产品。

如何在 WooCommerce 中设置相关产品

在 WooCommerce 中设置相关产品非常简单。 在您的WordPress 仪表板中，转到产品并打开任何产品。 在 WooCommerce 产品编辑器中，转到产品数据部分，选择链接产品选项卡，您将看到配置追加销售和交叉销售的选项。

尽管追加销售和交叉销售是 WooCommerce 默认提供的一种相关产品，但自定义选项非常有限。 如果要展示相关产品，可以使用专用插件。

对于这个演示，我们将使用一个名为 Custom Related Products for WooCommerce 的免费工具。 安装并激活插件后，您将在链接产品部分看到另一个选项。

您可以搜索要显示为相关产品的产品。 例如，我们将列出四种产品。

然后更新设置，如果您从前端检查产品页面，您将看到所选的相关产品。

或者，您可以删除一些相关产品并显示更少的项目。 例如，假设您想要显示三个而不是 4 个项目。 删除您要隐藏的产品，更新页面并检查前端。

这是您可以应用于商店的最佳自定义之一。 您可以选择要与每个产品关联的项目，而不是显示随机相关的产品。 我们建议您进行一些测试并检查转化率以找到最佳组合。

注意：值得注意的是，一些模板包含一个相关产品部分，该部分包含共享相同标签或类别的产品。 即使您无法指定这些项目，您也可以为要一起显示的产品使用相同的标签或类别。

让我们看看隐藏相关产品的不同方法。

如何在 WooCommerce 中隐藏和删除相关产品

有几种方法可以删除 WooCommerce 相关产品：

1. 带插件
2. 以编程方式（编码）
3. 使用页面构建器
4. 使用 CSS
5. 从主题选项

让我们仔细看看每种方法。

1) 使用插件隐藏相关产品

您可以使用几个插件来隐藏相关产品。 对于本教程，我们将使用 NS 删除相关产品。 首先，您需要安装并激活插件。 转到Plugins > Add new ，查找该工具，并将其安装在您的站点上。

激活插件后，您将看到您已成功从单个产品页面中删除所有相关产品。 这是一个即插即用的插件，不需要任何额外的配置。

如果您检查任何单个产品页面，您将看不到任何相关产品。

如果您想再次显示相关产品，请停用该插件。 由于 NS Remove Related Products 是一款轻量级工具，因此保持安装状态不会影响您网站的速度和性能。

2）以编程方式删除相关产品

如果您具有编码技能并且能够轻松地编辑代码和修改文件，那么这对您来说是一种非常有趣的方法。 在本节中，我们将教您如何调整主题的functions.php文件并从您的在线商店中删除 WooCommerce 相关产品。

注意：此方法涉及编辑您的一些主题文件，因此在继续之前，请确保您拥有 WordPress/WooCommerce 网站的完整备份。 这样，您可以在出现问题时恢复您的网站。

要删除相关产品，我们将编辑functions.php主题。 为此，有两种不同的方法：

• 通过儿童主题
• 通过特定于站点的插件

我们创建了一个分步指南来教您如何创建子主题。 为您的站点生成子主题后，您可以将自定义代码片段添加到子主题的functions.php文件中。 另一方面，如果您依赖专用插件，您将直接向其中添加自定义代码。

让我们快速浏览一下这两个选项。

2.1) 儿童主题

如果您一直关注我们的博客，您可能知道我们不建议编辑父主题文件，因为当主题更新时，您的所有修改都将丢失。 换句话说，您的自定义文件将被新版本中的新文件替换。

因此，如果您需要向主题添加自定义代码，我们建议您使用子主题。 创建子主题非常简单。 对于这个演示，我们将使用一个名为 Child Themify 的插件。

首先，在您的商店中安装并激活 Child Themify。

在外观部分下，您将看到一个名为Create Child Theme的新选项。

从那里，您可以为您的父主题生成一个子主题。

创建子主题后，将其激活，然后转到主题编辑器。

在这里，我们将在主题的functions.php文件中添加一些代码。 默认情况下，WordPress 在编辑器中显示style.css文件，但您可以从右侧栏中选择functions.php文件。

选择文件后，从下面复制代码。

 remove_action('woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20);

然后将其粘贴到编辑器中并更新文件。

而已！ 现在从前端检查您的产品页面，您将看到相关产品部分不再可见。

2.2) 代码片段

另一种选择是使用插件添加自定义代码片段。 对于本教程，我们将使用 Code Snippets，它是市场上提供的免费的特定于站点的插件之一。

首先，在您的站点上安装并激活插件。

然后，您将在左侧看到新设置。

默认情况下，插件会显示一些自定义代码片段，但它们是不活动的，因此不会影响您的网站。

要删除 WooCommerce 中的相关产品，我们将向网站添加一个新片段。

为代码段命名，然后复制此代码。

 remove_action('woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20);

将其粘贴到代码部分，选择到处运行代码片段选项，然后激活它。

一旦您的代码段处于活动状态，请检查您的单个产品页面，您会发现相关产品不存在。

这就是您可以通过一些编码删除或隐藏 WooCommerce 相关产品的方法。 现在让我们看看如何使用页面构建器来做到这一点。

3）使用页面构建器隐藏相关产品

从单个 WooCommerce 产品页面隐藏相关产品的另一个有趣选项是使用专用的页面构建器插件。

在本教程中，我们将使用 Divi 构建器，它是目前最流行且易于使用的页面构建器之一。 首先，您需要在您的站点上安装并激活该插件。 由于它是高级产品，您必须从优雅主题网站购买。

从您的优雅主题帐户下载插件后，安装并激活它。

Divi 构建器带有可视化编辑体验，可帮助您直接从前端编辑页面。

现在让我们看看如何使用它来删除 WooCommerce 相关产品。 打开任何产品页面，然后单击顶部栏中的Enable Visual Builder按钮。

WordPress 将加载 Divi 构建器，您将能够从那里编辑页面模板。

现在单击“相关产品”元素，您将看到几个选项。 要删除此部分，只需选择删除按钮。

您将立即看到该部分从页面中消失。

最重要的是，您可以编辑产品页面的其他元素，但现在，让我们保持原样并保存更改。

Divi builder 的一大优势是您可以实时查看更改。 为确保一切看起来都不错，您可以从前端检查产品页面并查看结果。

值得注意的是，Divi 构建器适用于大多数主题，而不仅仅是 Divi 或 Extra by Elegant Themes。

有关如何使用 Divi 自定义网站的更多指南，请查看以下指南：

• 如何使用 Divi 自定义 WooCommerce 产品页面
• 在 Divi 商店页面中添加“添加到购物车”按钮
• Divi联系表不起作用？ 如何修复它

4）用CSS删除相关产品

如果您不想编辑主题文件或使用任何插件，有一个简单的 CSS 片段可以帮助您从单个产品页面中隐藏相关产品。

首先，在您的WordPress 仪表板中，转到外观 > 自定义。

打开附加 CSS部分。

并添加以下 CSS 代码：

 。相关产品 {
 显示：无；
 }

WordPress 定制器带有一个实时预览向导，可让您实时查看所有更新，如下所示。

如您所见，使用 CSS 隐藏相关产品非常简单。 粘贴代码后只需更新配置即可。

5）从主题选项中删除产品

一些高级主题带有一个专门的主题面板，其中包括一些自定义 WooCommerce 商店的选项。 在大多数情况下，删除相关产品的选项位于单个产品页面选项下。

最重要的是，一些 WordPress 主题带有专用模板，其中包括您可以启用/禁用的相关产品部分。 我们建议您查看您的主题或联系他们的支持团队以找出答案。

奖励：如何单独关闭相关产品

这是从产品页面中删除 WooCommerce 相关产品的高级方法。 我们将添加一个代码片段以在您的 WooCommerce 仪表板中添加一个复选框，您可以勾选该复选框以启用/禁用每个产品上的相关产品。

您需要在子主题的functions.php文件中添加以下代码或使用特定于站点的插件。 对于这个演示，我们将使用代码片段插件，因此我们只需转到插件的设置并创建一个新片段。

我们给它一个名字并粘贴下面的内容。

代码说明

这段代码将向产品页面添加一个复选框，您可以勾选该复选框以删除相关产品部分。 我们已将复选框称为“删除相关产品”，但您可以通过更改标签行对其进行自定义。

 // 1. 在产品页面添加一个复选框以删除相关产品
add_action（'woocommerce_product_options_general_product_data'，'quadlayers_add_related_products_checkbox'）； 
函数 quadlayers_add_related_products_checkbox()
 {woocommerce_wp_checkbox（数组（
 'id' => 'hide_related',
 '类' => '',
 'label' => '删除相关产品'
 )
 );
 }

以下部分代码会将复选框保存到自定义字段中。

 // 2. 保存复选框字段

add_action('save_post_product', 'quadlayers_save_related_products_checkbox');
 函数 quadlayers_save_related_products_checkbox( $product_id ) {
 全局 $pagenow, $typenow;
 if ('post.php' !== $pagenow || 'product' !== $typenow ) 返回；
 如果（定义（'DOING_AUTOSAVE'）&& DOING_AUTOSAVE）返回；
 if ( isset( $_POST['hide_related'] ) ) {
 update_post_meta( $product_id, 'hide_related', $_POST['hide_related'] );
 } 否则 delete_post_meta( $product_id, 'hide_related' );
 }

最后，这部分代码检查我们刚刚创建的复选框是否被勾选，如果是，则删除相关产品部分。

 // 3. 隐藏单个商品页面中的相关商品

add_action（'woocommerce_after_single_product_summary'，'quadlayers_hide_related_products_checkbox'，1）；
 函数 quadlayers_hide_related_products_checkbox() {
 全球$产品；
 if ( !empty ( get_post_meta( $product->get_id(), 'hide_related', true ) ) ) {
 remove_action('woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20);
 }
 }

将所有代码粘贴在一起并保存更改。 现在是时候看看它是否有效，因此请转到您的产品页面并选择任何已发布的产品。

在编辑器中，您将看到一个名为“隐藏相关产品”的新选项。

当您启用此复选框时，相关产品部分将不会显示在该产品页面上。 所以现在如果你检查前端，你会看到类似这样的东西。

这是一个很好的选择，可以灵活地仅在某些产品页面上显示相关产品部分。 有关此的更多信息，您可以查看此内容。

更改您可以在页面上显示的相关产品的数量

这是更改每页显示的相关产品数量的另一个有趣选项。 这对于拥有一个更简洁的相关产品部分或当您只想显示几个相关项目时很有用。

为此，您可以将以下代码添加到子主题的functions.php或使用代码片段插件。

 /**
 * 更改相关产品的数量
*/
 功能 woo_related_products_limit() {
 全球$产品；
 $args['posts_per_page'] = 6;
 返回 $args;
 }
 add_filter（'woocommerce_output_related_products_args'，'quadlayers_related_products_args'，20）；
 函数 quadlayers_related_products_args( $args ) {
 $args['posts_per_page'] = 3; // 3 个相关产品
$args['columns'] = 1; // 排列成 1 列
返回 $args;
 }

如果您仔细查看代码，您会发现我们将在 1 列中显示 3 个相关产品。 只需根据您的要求调整代码并保存更改。 您将看到在前端反映的所有更改。

如何使用相关产品提高转化率

相关产品的主要好处之一是帮助您提高转化率。 这个想法是展示与购物者正在查看的商品相关的产品，以便他们购买更多产品。 这些相关产品通常补充或增强主要项目的性能。 例如，如果您正在查看笔记本电脑，相关产品可以是笔记本电脑外壳、外置硬盘驱动器、HDMI 电缆等。

这是电子商务中流行的策略。 例如，亚马逊或 Flipkart 等流行的在线商店会根据用户过去的订单、搜索历史、品牌等显示几个相关的产品。

结论

总而言之，相关产品可以帮助您提高销售额。 但是，在某些情况下您可能需要隐藏它们。

在本指南中，我们看到了在 WooCommerce 中删除相关产品的不同方法：

• 使用插件
• 以编程方式（编码）
• 使用专用的页面构建器
• 使用 CSS 片段
• 从主题选项

隐藏相关产品部分的最简单方法是使用插件。 您只需激活插件，它就会自动隐藏相关产品。 另一方面，如果您对编码感到满意，您可以编辑 functions.php 文件或添加一个小的 CSS 脚本。

或者，如果您想从各个页面中删除相关产品，您可以使用页面构建器执行此操作。 最后，如果您有高级主题，请检查它是否为您提供了从主题面板中隐藏相关产品的选项。 安装页面构建器后，您可以使用它来隐藏商店中的相关产品。

有关充分利用商店的更多提示，请查看以下指南：

• 如何添加 WooCommerce 产品
• 自定义 WooCommerce 产品页面
• 如何编辑 WooCommerce 商店页面

您是否从商店中删除了 WooCommerce 相关产品？ 您使用了哪种方法？ 在下面的评论部分让我们知道！