[WooCommerce] 調整結帳欄位的終極指南

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


先前也有節錄過一篇文章,是關於 WooCommerce 如何發揮它加入購物車的組合技, [WooCommerce] 商品頁快速結帳按鈕功能 ,文內也是有一篇很詳細的終極指南!

這篇來紀錄調整結帳欄位的部分,可以對照這篇 [WordPress] 調整適合 WooCommerce 在台銷售結帳頁欄位(含地址郵遞區號選擇) 來看,因為那篇內的程式碼片段就是一個掌控整個 WooCommerce 結帳欄位的精華了。

首先要來先說一個事實!就是結帳欄位的修改其實是很精密的,對於一般人來說,透過外掛可以改沒錯,但接下來外掛做不到的你也只能跟著沒辦法了。或許在哪裡(可能是我這邊XD)聽到可以補上某個程式碼就能處理,或許能解決你的問題,但只能說是運氣好。

結帳表單、購買人資料表單與收貨人資料表單的這三個表單欄位都是全系統唯一且特別的資料。如果外掛正在對他作用,那正常狀況下有其他外力再干擾就會出錯,不是你錯就是我錯的概念。

對於開發 WooCommerce 應用的正確起手式就是避開使用外掛的干擾,全權由開發者端接手處理,確保問題出錯的點。(對,很難,但如果這塊先給一些結帳欄位表單外掛改過的話之後也是可能要拆掉,造成開發者浪費時間也浪費你的錢。)

看到這邊,就知道本篇其實對於使用外掛來修改結帳表單的人來說深了點。但至少讀到這邊應該要有基礎概念了!

關於開發 WooCommerce 結帳欄位,官方有說明文件 Customizing checkout fields using actions and filters ,一樣如同 WordPress ,使用 Actions 與 Filters 做控制。

內建的方法要先了解一下:

  1. woocommerce_default_address_fields 這個 filter 事件過濾器是掌管預設表單欄位的功能,在這邊適合取消使用或翻譯某些預設欄位。
  2. woocommerce_billing_fieldswoocommerce_shipping_fields 是掌管我的帳號(my-account)下的地址(my-account/edit-address/)表單,包含付款人與收件人,如果改了結帳表單,這兩邊也是不能不跟著改。
  3. woocommerce_checkout_fields 是管理結帳欄位的 filter 事件過濾器,能跟消費者要到資料的地方就是這邊(另一個是純註冊會員表單),是一級戰區要處理好的部分。

目前這幾個方法就能夠對整個購物車網站表單欄位全面一點的掌控。細節的部分要看一下 WooCommerce 核心方法(外掛路徑):

  • includes/class-wc-countries.php

    get_default_address_fields()
    get_address_fields( $country = '', $type = 'billing_' )

  • includes/class-wc-checkout.php

    get_checkout_fields( $fieldset = '' )

  • includes/wc-template-functions.php

    woocommerce_form_field( $key, $args, $value = null )

都建議去看一下那些方法的實作方式。再來不論是哪邊的欄位都會有一個前綴(Prefix),付款的是 billing_ 收件的是 shipping_。主要的結構如下(舉例付款):

$fields['billing']['billing_first_name'] = array(
        'label' => __('姓名', 'mxp-wc-checkout-fields-custom'),
        'placeholder' => _x('姓名', 'placeholder', 'mxp-wc-checkout-fields-custom'),
        'required' => true,
        'class' => array('form-row-first'),
        'clear' => true,
        'type' => 'text',
        'label_class' => array(),
        'options' => array(),
        'priority' => 1,
);

陣列裡包的欄位可以在 woocommerce_form_field 看到最完整的。有包含:

- `type`              => 'text',//欄位類型 input type="這裡的類型"
- `label`             => '',//欄位標籤名
- `description`       => '',//欄位說明
- `placeholder`       => '',//欄位的預留位置文字
- `maxlength`         => false,//限制最大長度
- `required`          => false,//是否為必填
- `autocomplete`      => false,//是否為自動完成功能
- `id`                => $key,//欄位的 ID 屬性值
- `class`             => array('class-name'),//欄位的 class 屬性值
- `label_class`       => array('class-name'),//欄位標籤 class 屬性值
- `input_class`       => array('class-name'),//輸入 input 欄位的 class 屬性值 
- `options`           => array('key'=>'value'),//下拉欄位的選項
- `custom_attributes` => array('key'=>'value'),//欄位其他屬性 ex: 'readonly' => 'readonly'
- `validate`          => array(),//欄位是否需驗證
- `default`           => '',//欄位的預設值
- `autofocus`         => '',//autofocus 功能的屬性值
- `priority`          => '',//權重,也是顯示順序

第一個 type 欄位類型其實就是 HTML 的元件,而 WooCommerce 有包裝過,內建預設的有 18 個類型:

  • country
  • state
  • textarea
  • checkbox
  • text
  • password
  • datetime
  • datetime-local
  • date
  • month
  • time
  • week
  • number
  • email
  • url
  • tel
  • select
  • radio

沒看錯,那些國家、縣市的也是特別處理的欄位,真有需要還是可以呼叫來用。

知道這些欄位怎定義後的下一步就是要補這些欄位的控制,像是生日欄位希望可以顯示出日曆來選填,縣市的選擇可以下拉選單等等的使用者體驗(UX)問題就需要工程師發點功補完啦!

後面的部分偏向前端工程 CSS 或 JavaScript 的技巧,還要搭配延伸閱讀:

  1. [WooCommerce] 結帳欄位的本地化功能 Address i18n
  2. [WooCommerce] 片段(fragments)互動程式設計要點
  3. [WooCommerce] 程式客製化結帳欄位紀錄方法(Session)

其他關於 WooCommerce 玩轉的技巧順著本文的標籤應該可以看到其他篇就不一一列出了。


Share:

作者: Chun

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

文章
Filter
Apply Filters