
重點整理
想把 WooCommerce 商品頁的「描述」頁籤改成「商品介紹」等文字,除了用 CSS 偽元素或 Loco Translate 翻譯外掛,也可以在子主題 functions.php 加入一段 add_filter 函數,直接回傳你要的標題文字。
WooCommerce 商品描述標題修改 方法有很多種,包含使用 CSS :before 偽元素來取代文字,或者是使用 Loco Translate 網站翻譯外掛來將預設的英文翻譯為中文等,而在本篇教學中將以加入函數的方式,直接將 dh_rename_description_product_tab_label 這個位置的文字替換成我們想要的內容,相較起前面兩種方法,加入簡單的 funtion 能更快達到目的。
注意事項:適用 WordPress 5.0 ( Beta )或以上版本
使用 Funtion add_filter 替換商品描述標題
加入函數至網站子主題:在網站主題編輯器畫面中選擇子主題後,點選 funtion.php 檔案,將下方的函數加入到結尾處。在更新前請先修改下方 ‘ 商品介紹 ‘ 文字內容為你想修改的文字。
函數說明:基本上就是以 add_filter hook 過濾器,來定義 WooCommerce 函數中 dh_rename_description_product_tab_label 這個位置要顯示的值,最後給定 return 讓我們輸入的文字在網頁載入時可以在 dh_rename_description_product_tab_label 返回取代原本文字。
修改完成示意:下方圖一圖二分別是標題修改前與修改後,提供給各位參考。


其他頁籤的文字也能改嗎?
可以。WooCommerce 商品頁的頁籤都透過 woocommerce_product_tabs 這個 filter 產生,裡面每個頁籤都有 title(標題)與 priority(順序):

- 改標題:把
$tabs['additional_information']['title']改成「規格」、$tabs['reviews']['title']改成「顧客評價」。 - 調順序:改
priority數字,數字越小越前面。 - 移除頁籤:用
unset()拿掉不需要的頁籤。
另外,描述頁籤內容區上方的小標題由 woocommerce_product_description_heading 控制,回傳空字串就能隱藏。
修改 functions.php 前要注意什麼?
- 先備份:functions.php 只要少一個分號或括號,整個網站可能變成白畫面或出現嚴重錯誤。
- 準備好 FTP 或主機檔案管理員:後台打不開時,才能直接把出錯的程式碼刪掉。
- 用子主題或程式碼片段外掛:Code Snippets 外掛遇到錯誤時會自動停用該片段,對新手比較安全。
- 注意引號:從網頁複製的程式碼常帶全形或彎引號,要改成半形。
只是要改幾個字時,用 Loco Translate 修改翻譯也是不碰程式碼的做法。
常見問題
WooCommerce 商品頁的「描述」頁籤標題要用哪個 filter?
用 woocommerce_product_description_tab_title 這個 filter,回傳你要的文字即可,例如「商品介紹」。dh_rename_description_product_tab_label 只是自訂函數的名稱,可以改成任何不重複的名字。
這段程式碼要放在哪裡?
放在子主題的 functions.php,或用 Code Snippets 這類程式碼片段外掛新增。直接改父主題的 functions.php,主題更新時修改會被覆蓋。
改了之後頁籤文字沒變怎麼辦?
先清除快取外掛與瀏覽器快取再看;如果還是沒變,可能是佈景主題或頁面編輯器(例如 Elementor 的商品頁範本)用自己的方式輸出頁籤,要到主題設定或範本裡修改。
