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

WooCommerce 單一商品頁加入自訂標題文字:add_action 函數教學

WooCommerce 客製發布 2019.06.03更新 2026.10.02閱讀約 5 分鐘
WooCommerce 單一商品頁加入自訂標題文字:add_action 函數教學

重點整理
在子主題 functions.php 用 add_action 掛到 WooCommerce 單一商品頁的位置,再用 echo 輸出 HTML,就能在每個商品頁顯示自訂標題與文字。本文提供兩種寫法,大量圖文建議用第二種。

WooCommerce 自訂函數 有很多種寫法,不同的狀況下可以衍生出更為快捷的建構方式,因此在這一次教學中鵠學苑將提供兩種不同的 funtion 給大家做參照,而這次所做的範例是在 WooCommerce 單一商品頁中加入自訂標題與文字,但在學習 funtion 函數前,請確保本身對 HTML 寫法與架構有一定的了解,比如基本的 <h1>標題標記、<p>段落標記、<img src=””>圖片來源等至少要有基礎的認識,那麼本文介紹的函數對你而言才有意義。
注意事項:適用 WordPress 5.0 ( Beta )或以上版本

加入 function dh_single_product_top 函數

第一步:下在網站後台中選擇外觀 → 主題編輯器,右上角選擇子主題目錄,看起來會像是 your-child-theme/function.php ,在 echo 後方單引號中間放入 HTML 標籤與及想要顯示的文字,再將此段函數貼至 function.php 內容結尾處,點擊更新就完成了。

兩者結果會是一樣,如果是要加入大量的圖文,推薦用下方的寫法會較方便。

在這兩段自訂函數中,運用了 echo 以及 add_action 兩種語法,echo 是用來輸出內容,讓文字或圖片遵循我們在函數中定義的位置顯示想要出現的文字或圖片,而 add_action 則是定義此段函數要在哪個位置觸發動作。

第二步:加入函數前的畫面。

WooCommerce
WooCommerce

可以看到加入函數後的標題文字有一些樣式上的問題,像是沒有垂直置中,字體與內文過於類似等,此時就能使用在函數中所自訂的 Class 或者 ID 寫入 CSS 語法來改變文字樣式,

WooCommerce
WooCommerce

單一商品頁常用的 hook 位置有哪些?

WooCommerce 傳統商品頁是由一連串 hook 組成,用 add_action( '位置', '函數名稱', 優先順序 ) 就能把內容插進去:

示意圖:WooCommerce 單一商品頁的 hook 位置,woocommerce_single_product_summary 內標題、價格、簡短說明、加入購物車的預設優先順序,優先順序 25 會插在簡短說明與加入購物車之間
示意圖:WooCommerce 單一商品頁的 hook 位置,woocommerce_single_product_summary 內標題、價格、簡短說明、加入購物車的預設優先順序,優先順序 25 會插在簡短說明與加入購物車之間
  • woocommerce_before_single_product:商品區塊之前,適合放公告。
  • woocommerce_single_product_summary:商品摘要區,預設依序為標題(5)、評分(10)、價格(10)、簡短說明(20)、加入購物車(30)、商品分類資訊(40)。例如優先順序設 25,內容就會出現在簡短說明與加入購物車按鈕之間。
  • woocommerce_after_single_product_summary:摘要區之後,商品頁籤與相關商品就在這裡。

只想在特定商品顯示文字怎麼做?

  • 在函數裡加條件判斷:用 has_term( '分類代稱', 'product_cat' ) 判斷商品是否屬於某個分類,或用 get_the_ID() 比對商品 ID,符合才輸出。
  • 用自訂欄位:搭配 ACF 等外掛替商品加一個欄位,函數讀取欄位內容後輸出,沒有填的商品就不顯示,行銷人員不必改程式就能更新文字。
  • 簡單需求用內建欄位:只是每個商品不同的補充說明,直接寫在商品「簡短說明」裡就好。

文字內容若會經常更動,建議用自訂欄位,避免每次都要修改 functions.php。

常見問題

WooCommerce 商品頁要加自訂文字,用哪個 hook?

最常用的是 woocommerce_single_product_summary,它是商品標題、價格、簡短說明、加入購物車按鈕所在的區塊,用 add_action 時設定不同的優先順序數字,就能把內容插在指定元素的前後。

這段函數加了之後商品頁沒有出現文字怎麼辦?

先確認程式碼是加在目前啟用的子主題中,並清除快取。若商品頁是用 Elementor 範本或區塊佈景主題的商品範本製作,WooCommerce 原本的 hook 可能不會執行,要改在範本裡加入文字或對應的區塊。

echo 和 return 在這裡要用哪個?

add_action 掛的函數是在頁面產生時直接輸出,所以用 echo 是正確的;這和短代碼函數必須用 return 不同。內容較長時可以先關閉 PHP 標籤直接寫 HTML,或用 printf 搭配跳脫函數輸出。

結語

自訂函數的方式有很多種,後續鵠學苑 會不間斷分享使用 funtion 客製化 WooCommerce 的方法,讓 WordPress 架站不再為了一個小功能花費大量時間尋找外掛,只需要一段簡單的函數就能夠解決問題,也不容易造成主機負擔,何樂而不為?

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

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

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