如何添加 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 相關產品部分。 如果有任何問題，請在評論部分告訴我們。 我們將盡我們所能為您提供盡可能多的幫助。