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

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

1. 單一商品頁修改購物車按鈕文字

2. 商店頁及商品分類頁購物車按鈕文字修改

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 函數參考: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 教學文章,如果有網頁設計相關需求,或者想了解最新網站知識,也可以到 鵠崙設計 做線上免費諮詢喔!我們下次的教學見~

WordPress Funtion (函數) 教學相關文章:

WordPress 禁用 Gutenberg 編輯器的兩種方法(外掛與函數)

WooCommerce 關閉密碼強度 – WordPress 加入函數與啟用外掛

WordPress 自訂欄位,網站後台公佈欄自訂資訊內容,PHP語法應用

使用 Google 自訂搜尋引擎取代WordPress站內搜尋步驟教學

關閉WordPress圖片自動縮圖 – 提升整體網站速度及載入網頁速度

WordPress PHP 教學 網頁修改及網站設定

網站架設知識推薦閱讀:

如何清除瀏覽器快取(Cache) ? 查看最真實正確的網站狀況

Google 我的商家收費機制 即將開啟?線上調查表全新功能展示

無障礙網站介紹-規範說明、檢測工具與操作影片

鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

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

熱門文章

最新文章

相關文章

標籤雲

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top