相關商品? Related Prodcut 該怎變更名稱?
在 WooCommerce 中，「相關商品」是一個重要的功能，它可以顯示與當前商品相關的其他商品，從而增加交叉銷售的機會。然而，有時候網站擁有者可能希望改變這個部分的顯示名稱，以更好地符合他們的品牌和行銷策略。以下是一個簡單的教學，教你如何在 WooCommerce 的商品頁面下方改變「相關商品」的名稱，更多情況下是發生在誤以為那是修改翻譯就可以達成的情況，但翻譯本地化檔案變更後會因為外掛更新而遭到覆蓋之情況。
方式一、修改外掛的模板範本
- 理解 WooCommerce 的模板結構：WooCommerce 使用模板來顯示其各個部分。要更改「相關商品」的名稱，我們需要修改相關的模板文件。
- 建立子佈景主題：在進行任何更改之前，建議您建立一個子佈景主題，以避免未來更新時丟失自訂設定。
- 複製相關模板文件：從 WooCommerce 插件的 ‘templates’ 資料夾中複製 ‘single-product/related.php’ 文件到您的子佈景主題的 WooCommerce 文件夾中。
- 修改模板文件：打開複製到子佈景主題中的 ‘related.php’ 文件。尋找顯示「相關商品」標題的代碼行，通常是一個 <h2> 標籤。更改標籤內的文字為您想要的名稱。
- 上傳並啟用子佈景主題：確保您的子佈景主題已被上傳並啟用在您的 WordPress 網站上。
- 測試更改：前往任何商品頁面檢視更改後的「相關商品」標題，確認它顯示為您設定的新名稱。
透過這些步驟，您可以輕鬆地自訂 WooCommerce 商品頁面下方「相關商品」的顯示名稱，使其更貼合您的品牌風格和營銷策略。記得在進行任何更改之前，先備份您的網站，以免發生意外。
方式二、透過程式碼片段 functions.php 新增修改
這個方式可以使用 Code Snippet 或者修改佈景主題資料夾下的 functions.php 加入以下程式碼就可以達成，萬事屋推薦用這種方式達成，可以替換成任何想要的文字而且不受限於 WooCommerce 外掛更新。
function customize_woocommerce_related_products_text( $translated_text, $text, $domain ) {
if ( 'woocommerce' === $domain && 'Related products' === $text ) {
$translated_text = '您要的文字'; // 將 '您要的文字' 替換成您想要顯示的文字
}
return $translated_text;
}
add_filter( 'gettext', 'customize_woocommerce_related_products_text', 20, 3 );運作原理
- 過濾器函數註冊：使用 add_filter() 函數將自定義函數 customize_woocommerce_related_products_text 註冊到 WordPress 的 gettext 過濾器上。gettext 過濾器用於修改 WordPress 或任何插件（例如 WooCommerce）中的文本。
- 函數定義：customize_woocommerce_related_products_text 函數接受三個參數：$translated_text（翻譯後的文本）、$text（原始文本）、和 $domain（文本域）。文本域通常是用來指定文本屬於哪個插件或主題。
- 條件判斷：在函數內部，首先檢查 $domain 是否為 woocommerce，這確保我們只修改 WooCommerce 插件中的文本。接著檢查 $text 是否為「Related products」，這是 WooCommerce 中相關商品標題的默認文本。
- 修改文本：如果上述條件都成立，則將 $translated_text（即顯示在網站上的文本）修改為「您要的文字」。您可以將這裡的「您要的文字」替換為任何您希望顯示的文字。
- 返回修改後的文本：最後，函數返回修改後的文本，這樣當 WooCommerce 試圖顯示「Related products」時，它會顯示您指定的新文本。
透過這種方式，您可以輕鬆地更改 WooCommerce 商店中「相關商品」的標題，使其更符合您的網站風格或語境需求。這是一種常用於本地化或個性化網站元素的技術。
