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

WooCommerce 加入購物車按鈕文字修改:用 add_filter 函數自訂

WooCommerce 客製發布 2019.06.10更新 2026.10.02閱讀約 5 分鐘
WooCommerce 加入購物車按鈕文字修改:用 add_filter 函數自訂

重點整理
不裝外掛也能改 WooCommerce 的加入購物車按鈕文字:在子主題 functions.php 用 add_filter 掛上對應的 hook 並回傳自訂文字。單一商品頁只有一個按鈕,直接回傳文字;商店與分類頁則用 switch 依簡單、可變等商品類型給不同文字。

WooCommerce 加入購物車功能 主要是以商品單頁或分類頁中的按鈕來執行,而使用 WooCommerce 作為銷售系統,一定會想要修改購物車按鈕的文字,使用更具吸引力的內容來讓使用者點擊按鈕,進而達成引導使用者消費的目標,修改按鈕文字的方式有很多種,無論是使用外掛或者修改 WooCommerce 原始碼都可以做到的,今天的教學也只是提供另外一種方式,能更快速的自訂按鈕文字。

本篇教學中,將以 php 函數 add_filiter 配合 return 以及 switch 來執行修改購物車按鈕文字的動作,如果對 WooCommerce 所定義的 hook 夠熟悉,也可以將這兩段函數運用在其他需要修改文字的地方,比如説加入會員、註冊按鈕等,但如果説只是想單純修改文字,只需要按照教學中的步驟做即可。

注意事項:適用 WordPress 5.0 ( Beta )或以上版本

使用 Funtion(函數)修改單一商品頁面購物車按鈕文字

第一步:將下方提供的函數加入  your-child-theme/function.php 內,在後台外觀選單中的主題編輯器畫面右方的列表中可以找到此檔案,開啟後將下方程式碼中文的位置更換為自己想要的文字內容,點選更新即可。

第二步:其中 add_filiter 是指篩選出想要顯示此文字的位置,也可以說是指派, 當 woocommerce_product_single_add_to_cart_text 在函數中指派後,定義 dh_change_add_to_cart_text 作為修改文字的變數,執行完畢後返回並取代(return)我們所給定的值,也就是下圖中文字的部分。

WooCommerce 加入購物車功能
WooCommerce 加入購物車功能

修改商品彙整頁購物按鈕文字

WooCommerce 商店頁套用 switch 寫法後的實際畫面:簡單商品顯示「馬上購買」、可變商品「選擇款式」、組合商品「查看組合」、外部商品「前往購買」
WooCommerce 商店頁套用 switch 寫法後的實際畫面:簡單商品顯示「馬上購買」、可變商品「選擇款式」、組合商品「查看組合」、外部商品「前往購買」

第一步:加入方式與第一小節相同,在此不贅述。第二小節中要說明的是如何在商店頁面或者商品分類、標籤頁中修改購物車按鈕文字,此時狀況與第一小節不同,在單一商品頁中只有一個按鈕,因此只需要單純指定並返回值即可,但是在商店頁面是具有多種不同屬性的商品,例如可變商品、組合商品等,因此我們要做的就是定義條件,當滿足不同條件時將自動顯示不同的文字,函數如下所示:

第二步:首先定義範圍為 WooCommerce 全域商品,並且將系統預設中的商品類型作為條件變數,當符合不同變數時,switch 將會執行符合條件的函數,並且返回我們所給定得值,結果如下圖所示,在商店頁面中不同類型的商品會顯示對應的類型名稱,在實際上最常見的應用方式,就是將組合商品的按鈕文字修改為” 3+ 1 …” 此類文字,而不是每一樣商品單純顯示 ” 加入購物車 “。

WooCommerce 加入購物車功能
WooCommerce 加入購物車功能

不寫程式也能改按鈕文字嗎?

可以,有幾種不碰程式碼的做法:

  • 翻譯外掛:用 Loco Translate 修改 WooCommerce 的中文翻譯字串,適合全站統一改成同一句話。缺點是無法依商品類型給不同文字。
  • 頁面編輯器設定:用 Elementor Pro 等編輯器做的商品頁,加入購物車小工具通常可以直接填寫按鈕文字。
  • 主題選項:部分電商主題在自訂器裡就有按鈕文字設定。

需要依簡單商品、可變商品分別給不同文字時,還是用本文的 switch 寫法最有彈性。

常見問題

WooCommerce 加入購物車按鈕文字要怎麼改?

在子主題 functions.php 加入 add_filter:單一商品頁用 woocommerce_product_single_add_to_cart_text,商店與分類頁用 woocommerce_product_add_to_cart_text,回傳想顯示的文字即可,不必裝外掛。

程式碼為什麼要放在子主題?

直接改父主題的 functions.php,主題一更新檔案就會被覆蓋,修改會消失。放在子主題,或用 Code Snippets 這類程式碼片段外掛管理,主題更新後設定仍會保留,也比較容易找到當初改了什麼。

改了程式碼但按鈕文字沒變怎麼辦?

先清除快取外掛與主機的頁面快取再看一次。若仍沒變,可能是佈景主題或頁面編輯器(例如 Elementor 的商品小工具)用自己的設定輸出按鈕,需到該小工具的設定修改文字,或確認主題沒有覆寫 WooCommerce 的範本檔。

結語

如果說覺得使用函數修改購物車文字太過複雜,可以參考這一篇教學:WordPress 網站翻譯 外掛 – Loco Translate 中文化網站主題與外掛 ,但是此外掛只能達到第一小節中修改單一商品頁面按鈕文字的效果,如果說要為不同類型商品都定義不一樣的文字,那麼只能使用第二小節所講述的方法,希望今天的教學可以對大家有所助益喔!

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

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

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