點解需要自訂結帳欄位
WooCommerce 默認嘅結賬頁面提供咗姓名、地址、電郵等基本欄位，但對於好多特定業務場景，呢啲欄位遠遠唔夠。例如，賣訂製蛋糕嘅舖頭可能需要收集「蛋糕上嘅祝福語」，B2B批發網站可能需要「公司稅號」，而活動票務網站就可能需要「參加者身份證號碼」用嚟核實。喺呢啲情況下，開發者就需要透過自訂結賬欄位嚟擴展功能，以滿足獨特嘅業務數據收集需求。
自訂欄位唔單止可以提升用戶體驗，令結賬流程更貼合業務，仲可以為後續嘅客戶管理、訂單處理以至營銷活動提供關鍵數據支援。透過喺後台同電郵中正確顯示呢啇欄位，可以確保成個訂單流程嘅資訊完整性。
核心方法同鉤子詳解
WooCommerce 提供咗強大而靈活嘅鉤子（Hooks）系統，令我哋可以唔使修改核心代碼嘅前提下，對結賬頁面進行深度訂製。實現自訂欄位主要涉及三個核心步驟：添加欄位、驗證欄位、保存同顯示欄位數據。每個步驟都對應住特定嘅 WooCommerce 動作鉤子或者過濾器鉤子。
用於添加欄位嘅篩選器
添加欄位主要透過 woocommerce_checkout_fields 篩選器嚟實現。呢個篩選器容許我哋向結賬表單嘅各個部分（例如「賬單」區域、「配送」區域或者自訂嘅「訂單附加資訊」區域）插入新嘅輸入框、下拉式選單或者核取方塊。
開發者需要編寫一個回呼函數，接收現有嘅欄位陣列，修改之後返回新嘅陣列。喺函數內部，可以精細咁定義每個新欄位嘅類型、標籤、佔位符、係咪必填、優先級（用於排序）同埋 CSS 類等屬性。
用嚟驗證欄位嘅掛鈎
當用戶提交結帳表格嗰陣，我哋必須確保自訂欄位嘅資料符合要求。呢個時候就需要用 woocommerce_checkout_process 動作掛鈎。喺呢個掛鈎嘅回呼函數入面，我哋可以存取透過 $_POST 全域變數提交嘅資料，並對其進行驗證。
例如，可以檢查某個必填欄位係咪留空，或者驗證電話號碼嘅格式啱唔啱。如果驗證失敗，可以用 wc_add_notice() 函數向用戶顯示一條錯誤信息，阻止結賬流程繼續進行。
用嚟保存同顯示數據嘅勾
用戶提交訂單之後，自訂欄位嘅數據需要安全噉保存到訂單嘅元數據入面。呢個透過 woocommerce_checkout_update_order_meta 動作鉤子嚟完成。喺呢個鉤子嘅回調函數入面，我哋可以用 update_post_meta() 函數，將驗證通過嘅表單值儲存到對應訂單嘅 wp_postmeta 數據庫表入面。
保存之後，我哋通常仲需要喺三個地方顯示呢啲數據：管理員後台嘅訂單詳情頁、用戶收到嘅訂單確認電郵，同埋客戶帳戶入面嘅訂單視圖。呢度分別涉及到管理介面、電郵模板同前端帳戶頁面嘅定制。
實戰：加一個「禮品留言」欄位
下面我哋會用一個完整嘅例子，示範點樣為網上花店加一個「禮品留言」文字框。呢個欄位會喺訂單資料區出現，係可選欄位，內容會保存並喺後台同電郵度顯示。
第一步：將欄位加到結賬頁面
首先，我哋需要用 woocommerce_checkout_fields 用過濾器註冊呢個新欄位。我哋會將佢加喺「訂單備註」欄位之後。以下係實現代碼，應該加喺子主題嘅 functions.php 文件入面或者透過自訂功能插件加添。
add_filter( 'woocommerce_checkout_fields', 'add_custom_checkout_field' );
function add_custom_checkout_field( $fields ) {
$fields['order']['gift_message'] = array(
'type' => 'textarea',
'class' => array('form-row-wide'),
'label' => __('礼品祝福留言', 'your-text-domain'),
'placeholder' => __('请输入您想写在贺卡上的祝福语（可选）', 'your-text-domain'),
'required' => false,
'priority' => 25, // 显示在订单备注（priority 21）之后
);
return $fields;
}呢段代碼建立咗一個 textarea 類型嘅欄位，標籤為「禮品祝福留言」，同埋設定咗相應嘅佔位符同 CSS 類。priority 參數控制佢嘅顯示位置。
步驟二：保存字段數據到訂單
接下來，我哋需要喺訂單創建嗰陣，將用戶填寫嘅留言保存起嚟。使用 woocommerce_checkout_update_order_meta 鉤子嚟實現。
add_action( 'woocommerce_checkout_update_order_meta', 'save_custom_checkout_field' );
function save_custom_checkout_field( $order_id ) {
if ( ! empty( $_POST['gift_message'] ) ) {
update_post_meta( $order_id, '_gift_message', sanitize_textarea_field( $_POST['gift_message'] ) );
}
}呢度，我哋檢查 $_POST['gift_message'] 有冇數值，如果有，就使用 sanitize_textarea_field() 函數進行安全清理之後，通過 update_post_meta() 將佢保存為訂單元數據，元鍵名叫做 _gift_message。
第三步：喺後台同電郵度顯示數據
數據保存之後，我哋需要令到佢可以睇到。以下嘅代碼示範點樣喺管理員後台嘅訂單詳情頁同埋客戶電郵度顯示呢個欄位。
// 在管理员订单详情页显示
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_field_admin' );
function display_custom_field_admin( $order ) {
$gift_message = get_post_meta( $order->get_id(), '_gift_message', true );
if ( $gift_message ) {
echo '<p><strong>' . __( '礼品留言:', 'your-text-domain' ) . '</strong><br />' . esc_html( $禮物訊息 ) . '</p>';
}
}
// 在订单确认邮件中显示
add_filter( 'woocommerce_email_order_meta_fields', 'display_custom_field_in_email', 10, 3 );
function display_custom_field_in_email( $fields, $sent_to_admin, $order ) {
$gift_message = get_post_meta( $order->get_id(), '_gift_message', true );
if ( $gift_message ) {
$fields['gift_message'] = array(
'label' => __( '礼品留言', 'your-text-domain' ),
'value' => wptexturize( $gift_message ),
);
}
return $fields;
}第一個函數會將留言顯示喺後台訂單嘅賬單地址下面。第二個函數會將留言當做一個新嘅數據行，加到 WooCommerce 發出嘅訂單確認電郵度。
高級技巧同注意事項
掌握咗基本方法之後，我哋可以探索更加複雜嘅應用場景同埋優化方案，令到自訂欄位更加強大同埋易用。
創建條件顯示欄位
有時，一個欄位係咪顯示會取決於另一個欄位嘅值。例如，只有當用戶揀咗「需要發票」嗰陣，先會顯示「發票抬頭」欄位。呢個需要結合 JavaScript 嚟實現前端互動。我哋可以畀觸發欄位（例如核取方塊）加一個 change 事件監聽器，然後動態控制目標欄位嘅顯示或者隱藏。同時，喺伺服器端驗證邏輯入面都要做相應嘅處理。
欄位數據嘅安全同清理
安全至關重要。處理用戶輸入嗰陣，必須時刻進行驗證同清理。對於文字框，用 sanitize_text_field() 或 sanitize_textarea_field()；對於電郵，用 sanitize_email()。輸出數據到前端嗰陣，一定要用 esc_html() 或 wp_kses_post() 等函數進行轉義，以防跨站腳本（XSS）攻擊。
同第三方插件同主題嘅兼容性
喺加自訂欄位嗰陣，可能會同某啲主題或者其他插件（特別係結賬優化插件）嘅樣式或者腳本有衝突。建議永遠喺子主題度開發，同埋為自訂欄位嘅容器元素加獨特嘅 CSS class 名。正式上線之前，一定要喺唔同場景下測試，包括唔同主題同開咗常用插件嘅情況。用瀏覽器開發者工具檢查元素同腳本錯誤係調試兼容性問題嘅重要方法。
摘要
透過呢篇指南，我哋由理解需求開始，逐步深入 WooCommerce 自訂結賬欄位嘅開發流程。我哋學識咗點樣利用 woocommerce_checkout_fields、woocommerce_checkout_process 同埋 woocommerce_checkout_update_order_meta 呢三個核心鉤子嚟加、驗證同保存欄位。並透過一個「禮物留言」嘅實戰案例，完整示範咗由欄位創建到數據展示嘅全過程。最後，探討咗條件欄位、安全處理同兼容性等高級議題。
掌握呢啲技能，你就可以靈活應對各種電商業務中獨特嘅數據收集需求，打造更專業、更個人化嘅 WooCommerce 商店，從而提升轉化率同客戶滿意度。
常見問題
自訂欄位嘅數據儲存喺邊度？
自訂欄位嘅數據通常作為「訂單元數據」儲存喺 WordPress 數據庫嘅 wp_postmeta 表入面。每一條數據都包含對應嘅訂單ID（post_id）、你定義嘅元鍵（例如 _gift_message）同元值。你可以透過 WooCommerce 訂單物件嘅方法 $order->get_meta(‘_gift_message’) 或者 WordPress 函數 get_post_meta() 嚟攞呢啲數據。
點樣為自訂欄位加前端驗核（例如格式驗核）？
除咗使用 woocommerce_checkout_process 除咗用鉤子做伺服器端驗核之外，你仲可以為欄位加 HTML5 原生屬性做基礎驗核，例如 pattern 用於正則表達式，type=”email” 用於電郵格式。要處理更複雜嘅即時驗核，就要寫 JavaScript/jQuery 程式碼，監聽欄位嘅 blur 或 input 事件，檢查值係咪符合規則，並即時俾返意見。
可唔可以將自訂欄位加落用戶註冊頁面？
可以，但流程有少少唔同。WooCommerce嘅結帳欄位鉤子係專用嚟結帳頁面。如果想喺「我嘅帳戶」註冊頁面加欄位，你需要用WordPress同WooCommerce提供嘅其他鉤子，例如 woocommerce_register_form 嚟加欄位，woocommerce_created_customer 用嚟保存欄位數據到用戶元數據。佢嘅原理同結帳欄位差唔多，不過目標掛鈎同數據儲存位置（用戶元數據）唔同。
點解我自訂嘅欄位冇顯示出嚟？
首先，檢查吓你嘅程式碼係咪已經正確加咗落去 functions.php 同埋冇語法錯誤。其次，確認欄位陣列嘅鍵係咪正確，例如你將佢加咗去 $fields[‘order’] 定係 $fields[‘billing’] 部份。再嚟，檢查吓有冇其他插件或者主題嘅程式碼覆蓋咗或者移除咗你嘅欄位。最後，試吓清除網站同瀏覽器嘅快取，因為舊嘅 CSS/JS 檔案可能會影響渲染。
下一步應該點做?
延伸閱讀及實用知識
以下內容與本文主題相關,適合進一步閱讀。一般而言,最好由與你目前問題最緊密相關的文章開始,然後逐步擴展到周邊主題。