如何添加 WooCommerce 相关产品：3 种方法

您是否正在寻找提高产品转化率的方法？ 为您的在线商店添加自定义相关产品部分可能是引导客户购买更多商品的好方法。 为了帮助您做到这一点，我们为您提供了有关如何添加 WooCommerce 相关产品的指南。

展示类似产品可能是提高转化率的好方法。 如果您向客户展示正确的产品系列，它肯定会提高您的销售量。 但在我们进入这样做的过程之前，让我们简要地看一下为什么需要相关产品部分。

为什么在 WooCommerce 中使用相关产品部分？

交叉销售是提高转化率的重要组成部分。 通过为客户提供购买类似产品的选项，您可以鼓励他们考虑购买更多产品以获得附加值。 同样，您也可以使用交叉销售来推广您看到一起购买的产品。 如果您可以很好地跟踪您的购买，您可以随时选择将特定产品添加到您的交叉销售列表中以获得更多利润。

这种方法本身在大型在线业务中非常突出。 例如，在亚马逊上，您可以看到他们使用标有“经常一起购买” 、“客户也购买过”或“类似品牌产品”的部分提供交叉销售。

因此，如果您想提高销售额，我们建议您添加和自定义您的 WooCommerce 相关产品部分。 现在您已经了解了它的重要性，让我们看看我们如何将它们添加到您的电子商务网站。

如何添加 WooCommerce 相关产品

默认情况下，WooCommerce 允许您自定义三种不同类型的相关产品。 这些选项是：

• 追加销售：查看产品页面时显示的产品。
• 交叉销售：查看购物车页面时显示的产品。
• 相关产品：根据产品标签和类别自动显示在产品页面上的产品。

虽然您可以手动添加要在每个 WooCommerce 的追加销售和交叉销售中显示的产品，但您只能通过正确设置标签和类别来配置相关产品部分。

总共有3 种主要方法可以在 WooCommerce 中添加相关产品。 他们是：

• 从 WooCommerce 仪表板
• 使用插件
• 以编程方式

注意：确保您已安装兼容的 WooCommerce 主题之一并在您的网站上正确设置 WooCommerce，以避免在此过程中出现任何不必要的问题。

在 WooCommerce 仪表板中配置 WooCommerece 相关产品

要为特定产品设置追加销售和交叉销售，请从WordPress 管理仪表板转到产品 > 所有产品。 然后，单击您要为其添加追加销售和交叉销售的任何特定产品的编辑按钮。

接下来，向下滚动并在产品数据下，单击链接产品。 现在，继续列出您希望显示为特定产品的相关产品的所有产品。 它们可以包括追加销售和交叉销售。

最后，更新产品。

当您在您的网站上预览特定产品时，您将能够在您的网站前端看到链接的产品。

同样，您也可以在预览购物车页面时看到交叉销售的相关产品。

但是， WooCommerce 相关产品与交叉销售和追加销售为您提供的“您可能喜欢”部分有很大不同。 默认情况下，WooCommerce 使用标签和类别随机选择要在“您可能喜欢”部分显示的产品。 使用 WooCommerce 的默认选项无法配置此选项。

您只能通过使用 WooCommerce 相关产品插件或以编程方式使用 WooCommerce Hooks 来自定义这些相关产品。

我们将在本指南中进一步讨论如何做到这两个。 因此，如果您想了解如何更多地定制您的 WooCommerce 相关产品，我们建议您继续阅读。 让我们从插件方法开始，因为它对初学者更友好。

如何使用插件添加 WooCommerce 相关产品

使用插件是添加和自定义相关产品的最简单方法之一。 这些插件专门设计用于帮助您手动选择要添加到 WooCommerce 相关产品部分的产品。

WordPress 中有许多具有各种功能的插件。 其中一些允许您添加可自定义的相关部分，您可以将其添加到网站的任何部分。 而其他工作则为您提供完全可定制的特色滑块和横幅。

当然，选择插件的选项取决于您。 但是对于今天的演示，我们将使用 Scott Nelle 的Custom Related Products for WooCommerce 插件。 该插件通过简单的方法工作，让您指定要为您想要的任何产品的相关产品添加的产品。

但是要开始使用该插件，您需要先安装并激活它。

1.安装并激活插件

打开您的WP 管理仪表板，然后单击Plugins > Add New开始。 然后，使用右上角的搜索栏搜索WooCommerce 的自定义相关产品。 接下来，单击插件选项卡上的立即安装，然后在安装完成后激活它。 现在，您应该完成激活和安装插件。

如果您希望使用 WordPress 存储库中未包含的插件，则必须手动安装它们。 如果您需要更多信息，我们会提供手动安装 WordPress 的详细指南。

2.通过产品页面添加相关产品

该插件本身的工作原理是让您向每个特定产品添加相关产品部分。 您可以通过打开任何 WooCommerce 产品并在产品数据下指定它来执行此操作。 如果您不将产品添加到相关产品部分，则插件会退回到使用标签随机选择 WooCommerce 相关产品的默认 WooCommerce 行为。

因此，再次从您的WP 管理仪表板打开产品 > 所有产品，然后单击您希望添加相关产品的产品的编辑。 这与 WooCommerce 仪表板中的先前方法相同。

再次，在Product data下向下滚动并单击Linked Products 。 现在，您应该会看到一个标有相关产品的新字段。 现在您所要做的就是手动输入您希望添加为特定产品的相关产品的产品名称。

更新产品，您将能够在产品页面上看到更改：

以编程方式添加 WooCommerce 相关产品

或者，如果您不想使用 WooCommerce 插件来管理和自定义 WooCommerce 相关产品，您也可以选择使用代码片段添加它们。 为此，您需要在主题的functions.php文件中添加几行代码。 但是，只有对编程有基本的了解，此方法才适用于您。

我们建议您创建一个子主题并备份您的 WordPress 网站以执行此操作。 即使您更新了 WordPress 主题，这也可以确保保存您的更改。 如果您需要帮助，您甚至可以使用 WordPress 最好的子主题插件之一来创建一个。

切换到子主题后，您可以通过单击外观 > 主题编辑器来访问您的 functions.php 文件。 然后，单击Theme Functions或functions.php文件。 这将在主题编辑器中打开文件。

然后，您可以使用以下代码片段并将其粘贴到编辑器中。

 add_filter('woocommerce_related_products', 'QuadLayers_related_products_by_same_title', 9999, 3); 

功能 QuadLayers_related_products_by_same_title( $related_posts, $product_id, $args ) {
$product = wc_get_product( $product_id );
$title = $product->get_name();
$related_posts = get_posts（数组（
'post_type' => '产品',
'post_status' => '发布',
'标题' => $标题，
'字段' => 'ids',
'posts_per_page' => -1,
'排除' => 数组（$product_id），
));
返回 $related_posts;
} 

代码片段的工作原理是简单地为您提供具有相同标题的相关产品。 这样，如果您有相同名称的相同产品，它们将被添加到您的 WooCommerce 相关产品部分。 通过单击更新文件更新您的functions.php 文件，您应该完成了。

归功于此处代码的原始作者。

如何删除 WooCommerce 相关产品

此外，您还可以选择使用与上述相同的方法从您的网站中删除 WooCommerce 相关产品部分。 您可以选择完全删除所有相关产品，也可以只删除特定产品。

1.删​​除所有相关产品

要从每个产品页面中删除所有相关产品部分，只需打开子主题的functions.php文件并粘贴以下代码片段。

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

最后。 更新文件。 这应该从您的所有 WooCommerce 产品中完全删除相关产品部分。

在此感谢代码作者。

2.删除特定产品的相关产品

如果需要，您还可以使用代码片段仅针对您网站上的特定产品删除相关产品部分。 以下代码将简单地添加一个选项以将其隐藏在您的所有产品上。

首先，让我们以与以前相同的方式将其粘贴到主题的functions.php文件中。

 add_action（'woocommerce_product_options_general_product_data'，'QuadLayers_add_related_checkbox_products'）；

函数 QuadLayers_add_related_checkbox_products() { 
woocommerce_wp_checkbox（数组（ 
'id' => 'hide_related', 
'类' => '', 
'标签' => '隐藏相关产品'
) 
); 
}

// -----------------------------------------
// 2. 将复选框保存到自定义字段中

add_action('save_post_product', 'QuadLayers_save_related_checkbox_products');

函数 QuadLayers_save_related_checkbox_products( $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_checkbox_products'，1）；

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

然后，再次从 WordPress 仪表板转到产品 > 所有产品，然后单击要隐藏相关产品的产品的编辑。 当您像以前的方法一样在产品数据下滚动时，单击常规选项卡。

您应该会看到一个新的隐藏相关产品选项。 启用此选项可在特定产品页面中隐藏相关产品。

感谢这里的代码作者。

如何自定义相关产品编号和列

此外，您还可以通过配置显示的产品数量以及网站上的行和列来自定义相关产品部分。

为此，我们还将在functions.php文件中使用 WooCommerce 钩子和自定义函数。 继续并再次使用您的主题编辑器打开文件并粘贴此代码片段：

 add_filter('woocommerce_output_related_products_args', 'QuadLayers_change_number_related_products', 9999);

函数 QuadLayers_change_number_related_products( $args ) {
$args['posts_per_page'] = 4; // # 相关产品
$args['columns'] = 4; // # 每行的列数
返回 $args;
} 

此代码只需将您的 WooCommerce 相关产品部分配置为 4 列和 4 行即可。 您始终可以使用$args['posts_per_page'] = 4和$args['columns'] = 4.

此外，您还可以使用其他 CSS 代码配置此部分。 它们可用于更改列和行的布局和对齐方式，以便该部分更适合您的网站。 您可以使用以下 CSS 片段。

 @media（最小宽度：768px）{
.site-main .related.products ul.products li.product {
宽度：22%；
向左飘浮;
保证金权利：4％；
}

只需将其粘贴到主题定制器中的Additional CSS下即可。 您可以通过单击 WordPress 仪表板中的外观 > 自定义来访问它。 这将打开主题定制器。

然后，单击Additional CSS选项卡并在此处粘贴 CSS 脚本。 您可以根据您网站的需要调整相关产品的对齐方式。 最后，完成后单击发布。

感谢这里的代码作者。

结论

我们的添加 WooCommerce 相关产品指南到此结束。 这是提高电子商务网站销量的最佳方法之一。 但是通过本指南，您应该能够根据需要添加、自定义甚至删除它们。

总而言之，您可以使用 3 种方式在 WooCommerce 中添加相关产品：

• 从 WooCommerce 仪表板
• 使用插件
• 以编程方式

此外，我们甚至为您提供了一些更有帮助的步骤来定制这些相关产品。 它们包括从产品页面中删除它们并修改相关产品的数量及其列。 我们希望它们在您添加相关产品时也能派上用场。 您可以在我们的详细教程中找到更多信息，以自定义 WooCommerce 相关产品。

如果您想了解有关自定义其他各种 WooCommerce 部分和页面的更多信息，请考虑查看我们的其他一些文章，例如：

• 如何在 WooCommerce 中向产品添加图像
• 自定义 WooCommerce 结帐错误消息
• 如何自定义 WooCommerce 模板

让我们知道您是否能够使用我们的文章自定义和管理您的WooCommerce 相关产品部分。 如果有任何问题，请在评论部分告诉我们。 我们将尽我们所能为您提供尽可能多的帮助。