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 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

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

(adsbygoogle = window.adsbygoogle || []).push({});

熱門文章

(adsbygoogle = window.adsbygoogle || []).push({});

最新文章

(adsbygoogle = window.adsbygoogle || []).push({});

相關文章

(adsbygoogle = window.adsbygoogle || []).push({});

標籤雲

(adsbygoogle = window.adsbygoogle || []).push({});

Sign up for our Newsletter

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

Scroll to Top