為什麼需要自定義結賬欄位
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( $gift_message ) . '</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 類名。在正式部署前，務必在多種場景下進行測試，包括不同的主題和啟用了常用外掛的情況。使用瀏覽器開發者工具檢查元素和指令碼錯誤是除錯相容性問題的重要手段。
总结
透過本文的指南，我們從理解需求開始，逐步深入 WooCommerce 自定義結賬欄位的開發流程。我們學習瞭如何利用 woocommerce_checkout_fields、woocommerce_checkout_process 以及 woocommerce_checkout_update_order_meta 這三個核心鉤子來新增、驗證和儲存欄位。並透過一個“禮品留言”的實戰案例，完整演示了從欄位建立到資料展示的全過程。最後，探討了條件欄位、安全處理與相容性等高階議題。
掌握這些技能，你將能夠靈活應對各種電商業務中獨特的資料收集需求，打造更專業、更個性化的 WooCommerce 商店，從而提升轉化率和客戶滿意度。
常见问题解答（FAQ）
自定義欄位的資料儲存在哪裡？
自定義欄位的資料通常作為“訂單元資料”儲存在 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 檔案可能會影響渲染。
下一步，该怎么做呢？
延伸阅读与实用知识
下方列出的内容与本文主题相关，适合继续深入阅读。建议先从与你当前问题最相关的文章开始阅读，然后逐步扩展到相关主题，这样效果通常会更好。