WooCommerce 加入購物車功能 – 使用函數自訂按鈕文字內容

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

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

PHP 手冊 return 終止動作返回參數值
https://www.php.net/manual/zh/function.return.php
PHP 手冊 switch 判定條件給定數值
https://www.php.net/manual/zh/control-structures.switch.php
WordPress Codex 函數參考
https://developer.wordpress.org/reference/functions/add_filter/

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

WooCommerce 加入購物車功能

結語:

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

今天的教學到這裡告一段落了,不要忘記在右側訂閱鵠學苑電子報,確保收到最新 WordPress 教學文章,如果有網頁設計相關需求,或者想了解最新網站知識,也可以到 鵠崙設計 做線上免費諮詢喔!我們下次的教學見~

woocommerce相關文章:

網站資訊文章推薦

無障礙網站介紹-規範說明、檢測工具與操作影片
Google Search2020再進化,如何提升網頁品質?
重複內容 會影響SEO?如何正確把內容分享到社群平台!

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

返回頂端