找我們做網站
↑
Woocommerce · WooCommerce 客製

WooCommerce 商品描述標題修改:用 add_filter 函數改頁籤文字

WooCommerce 客製發布 2019.07.01更新 2026.10.02閱讀約 4 分鐘
WooCommerce 商品描述標題修改:用 add_filter 函數改頁籤文字

重點整理
想把 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商品描述修改
WooCommerce商品描述修改
WooCommerce商品描述修改

其他頁籤的文字也能改嗎?

可以。WooCommerce 商品頁的頁籤都透過 woocommerce_product_tabs 這個 filter 產生,裡面每個頁籤都有 title(標題)與 priority(順序):

示意圖:用 woocommerce_product_tabs 把「描述、額外資訊、評價」頁籤改成「商品介紹、規格、顧客評價」,並說明改標題、調順序、移除頁籤的方法
示意圖:用 woocommerce_product_tabs 把「描述、額外資訊、評價」頁籤改成「商品介紹、規格、顧客評價」,並說明改標題、調順序、移除頁籤的方法
  • 改標題:把 $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 的商品頁範本)用自己的方式輸出頁籤,要到主題設定或範本裡修改。

結語

鵠學苑・鵠崙設計鵠崙設計 2014 年成立,專注 WordPress 網站開發,400 多個網站在我們自己的主機上運作。鵠學苑的文章由團隊實際操作後整理,工具與外掛的功能以撰文當時為準。
鵠崙設計

不想自己摸索,
就交給我們做。

外掛設定、主機效能、改版搬家,這裡寫的每一件事,都是我們每天在客戶網站上做的工作。留下需求,1 個工作天內回覆。