[WooCommerce] 建立客製化結帳欄位、儲存欄位與顯示欄位資訊的開發流程整理

本篇文章更新時間:2023/06/12
如有資訊過時或語誤之處,歡迎使用 Contact 功能通知。
一介資男的 LINE 社群開站囉!歡迎入群聊聊~
如果本站內容對你有幫助,歡迎使用 BFX Pay 加密貨幣新台幣 贊助支持。


WooCommerce 這個「結帳欄位客製化」一直都是個不敗的議題。因為真的是每個電商網站中算最核心有變化的地方。

先不論金流、物流會利用這欄位來記錄資訊,有的店家想要知道結帳客人的生日又或是想問問一些關於產品的問題回饋等。這些操作都會在結帳頁面的欄位上做更動。

這篇筆記不是要把細節展開(過往筆記都偏細節),而是把這個大方向流程給寫一次!

建立客製化欄位

要改動客製化欄位,要先看 [WooCommerce] 調整結帳欄位的終極指南 這篇,理解一下欄位的設計與呼叫時機點。

比方說不是對帳號層級改動影響的客製化欄位,像是非一次性更改的結帳資訊或收件資訊等,其實只需要針對 woocommerce_checkout_fields 這個事件過濾器下手就好。

補上欄位、設定好權重(priority)排序 與class設定樣式等後,基本上欄位就建立出來了!

針對我的帳號(My Account)頁面的付款資訊欄位要調整的話是 woocommerce_billing_fields 勾點,收件資訊要改的話是 woocommerce_shipping_fields。 如果影響的層級是不論收款或收件欄位都要改的話,可以直接從預設欄位的 woocommerce_default_address_fields 勾點下手!

接收客製化欄位資料與儲存

儲存這些欄位有幾個時機點(流程),首先是「當某些欄位有更新的時候」會觸發的片段(fragments)互動,這是一個 AJAX 的行為,把當前結帳欄位的所有狀態都送回後端紀錄一次。

關於「片段」的程式互動可以參考這篇: [WooCommerce] 片段(fragments)互動程式設計要點

後端可以根據這個當下取得的狀態做即時的變化,增加互動的使用者體驗。

再來是資料送出(結帳)後的 woocommerce_checkout_process 這個事件動作勾點,記得驗證資料的正確性。比方說電話號碼是否為 09 開頭,生日欄位是否是正確的時間表示法等。

預設資料是會在前段驗證完後就一起儲存進訂單中。其他形式的儲存,像是外拋資料出去又或是寫到別的資料表等操作,就可以利用 woocommerce_checkout_create_orderwoocommerce_checkout_update_order_meta 等事件動作勾點來操作。

更多操作流程可以參考 includes/class-wc-checkout.php 這個 WooCommerce 原始碼。

另外不得不提暫存方法: WC()->session ,透過這方法的 getset 方法,就能將資料暫時記憶,用在一些跨頁面操作上!

其他針對顧客使用者常用的方法可以參考這篇 [WooCommerce] 結帳時取得顧客於購物車與結帳頁面當下狀態資訊的方法

訂單頁面顯示客製化欄位資訊

既然都儲存進訂單中了,再來就是需要後台管理訂單時顯示出來。這部分主要是三個勾點:

  1. woocommerce_admin_order_data_after_order_details 顧客資訊後
  2. woocommerce_admin_order_data_after_billing_address 付款資訊後
  3. woocommerce_admin_order_data_after_shipping_address 收件資訊後

一般來說如果客製化欄位是放在 billing 付款資訊的話,就是使用 woocommerce_admin_order_data_after_billing_address,如果是 shipping 收件資訊欄位的話就是 woocommerce_admin_order_data_after_shipping_address

透過這些勾點把當初寫入的訂單中繼資訊(Order meta)撈出來輸出顯示就可以了!

範例:

function mxp_custom_checkout_field_display_admin_order_billing_meta($order) {
    $display_meta = '

開立發票: ' . (get_post_meta($order->get_id(), 'billing_tax_checkbox', true) == 1 ? '是' : '否') . '

'; $display_meta .= '

公司名稱: ' . get_post_meta($order->get_id(), '_billing_company', true) . '

'; $display_meta .= '

公司統編: ' . get_post_meta($order->get_id(), '_billing_company_tax_id', true) . '

'; echo $display_meta; } add_action('woocommerce_admin_order_data_after_billing_address', 'mxp_custom_checkout_field_display_admin_order_billing_meta', 10, 1);

訂單信件中顯示客製化欄位資訊

除了後台訂單管理要可以看到這些客製化欄位資訊外,再來就是有些欄位也是發信一份出去給顧客看到當備存。

這部分的需求可以參考這篇 [WooCommerce] 訂單信件中加入客製化欄位的預設方法

看是要讓內建方法輸出欄位的 woocommerce_email_order_meta_fields 勾點,還是自己花俏一點補上 HTML 結構,更末端的 woocommerce_email_order_details 勾點,都可以!

後者要注意的是發信的內容是否為純文字($plain_text)格式。

訂單發信通知的範例:[WooCommerce] 綠界超商取貨付款資訊寫入訂單信件的方法


Share:

作者: Chun

資訊愛好人士。主張「人人都該為了偷懶而進步」。期許自己成為斜槓到變進度條 100% 的年輕人。[///////////____36%_________]

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *


文章
Filter
Apply Filters
Mastodon