WooCommerce, 實用技巧

如何在 WooCommerce 中自訂「相關商品」顯示名稱

如何在 WooCommerce 中自訂「相關商品」顯示名稱

相關商品? Related Prodcut 該怎變更名稱?

在 WooCommerce 中,「相關商品」是一個重要的功能,它可以顯示與當前商品相關的其他商品,從而增加交叉銷售的機會。然而,有時候網站擁有者可能希望改變這個部分的顯示名稱,以更好地符合他們的品牌和行銷策略。以下是一個簡單的教學,教你如何在 WooCommerce 的商品頁面下方改變「相關商品」的名稱,更多情況下是發生在誤以為那是修改翻譯就可以達成的情況,但翻譯本地化檔案變更後會因為外掛更新而遭到覆蓋之情況。

如何在 WooCommerce 中自訂「相關商品」顯示名稱

方式一、修改外掛的模板範本

  1. 理解 WooCommerce 的模板結構:WooCommerce 使用模板來顯示其各個部分。要更改「相關商品」的名稱,我們需要修改相關的模板文件。
  2. 建立子佈景主題:在進行任何更改之前,建議您建立一個子佈景主題,以避免未來更新時丟失自訂設定。
  3. 複製相關模板文件:從 WooCommerce 插件的 ‘templates’ 資料夾中複製 ‘single-product/related.php’ 文件到您的子佈景主題的 WooCommerce 文件夾中。
  4. 修改模板文件:打開複製到子佈景主題中的 ‘related.php’ 文件。尋找顯示「相關商品」標題的代碼行,通常是一個 <h2> 標籤。更改標籤內的文字為您想要的名稱。
  5. 上傳並啟用子佈景主題:確保您的子佈景主題已被上傳並啟用在您的 WordPress 網站上。
  6. 測試更改:前往任何商品頁面檢視更改後的「相關商品」標題,確認它顯示為您設定的新名稱。

透過這些步驟,您可以輕鬆地自訂 WooCommerce 商品頁面下方「相關商品」的顯示名稱,使其更貼合您的品牌風格和營銷策略。記得在進行任何更改之前,先備份您的網站,以免發生意外。

方式二、透過程式碼片段 functions.php 新增修改

這個方式可以使用 Code Snippet 或者修改佈景主題資料夾下的 functions.php 加入以下程式碼就可以達成,萬事屋推薦用這種方式達成,可以替換成任何想要的文字而且不受限於 WooCommerce 外掛更新。

如何在 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 );

運作原理

  1. 過濾器函數註冊:使用 add_filter() 函數將自定義函數 customize_woocommerce_related_products_text 註冊到 WordPress 的 gettext 過濾器上。gettext 過濾器用於修改 WordPress 或任何插件(例如 WooCommerce)中的文本。
  2. 函數定義:customize_woocommerce_related_products_text 函數接受三個參數:$translated_text(翻譯後的文本)、$text(原始文本)、和 $domain(文本域)。文本域通常是用來指定文本屬於哪個插件或主題。
  3. 條件判斷:在函數內部,首先檢查 $domain 是否為 woocommerce,這確保我們只修改 WooCommerce 插件中的文本。接著檢查 $text 是否為「Related products」,這是 WooCommerce 中相關商品標題的默認文本。
  4. 修改文本:如果上述條件都成立,則將 $translated_text(即顯示在網站上的文本)修改為「您要的文字」。您可以將這裡的「您要的文字」替換為任何您希望顯示的文字。
  5. 返回修改後的文本:最後,函數返回修改後的文本,這樣當 WooCommerce 試圖顯示「Related products」時,它會顯示您指定的新文本。

透過這種方式,您可以輕鬆地更改 WooCommerce 商店中「相關商品」的標題,使其更符合您的網站風格或語境需求。這是一種常用於本地化或個性化網站元素的技術。

相關文章