在構建線上商店時，客戶結賬環節的體驗至關重要。標準的 WooCommerce 結賬表單可能無法滿足所有業務需求，例如收集發票抬頭、生日祝福語、特殊的配送偏好說明等。這時，自定義結賬欄位就成為了一個強大的擴充套件工具。它不僅能夠提升使用者體驗的個性化程度，還能為商家收集到至關重要的業務資料，從而最佳化服務和營銷策略。
透過 WordPress 的鉤子系統和 WooCommerce 提供的豐富 API，開發者可以相對輕鬆地在結賬頁面的各個位置（“賬單地址”、“配送地址”區域之後，甚至建立全新的區塊）新增文字輸入框、下拉選擇框、單選框、複選框等不同型別的欄位。整個過程並非僅僅是前端展示，更重要的是後端的資料處理流程：如何確保使用者輸入的資料被準確、安全地儲存到訂單中，並在後臺管理介面、使用者賬戶頁面以及訂單通知郵件中清晰地顯示出來。
自定義結賬欄位的實現方法
WooCommerce 提供了兩大類鉤子用於處理結賬欄位：woocommerce_checkout_fields 以及 woocommerce_checkout_update_order_meta。前者用於定義和渲染欄位，後者用於儲存欄位資料。
推荐阅读 WordPress外掛開發從入門到精通：手把手教你打造自己的專屬功能。
使用鉤子新增欄位
最核心的步驟是透過 woocommerce_checkout_fields 過濾器鉤子，將自定義欄位新增到結賬欄位陣列中。這個陣列結構清晰，允許你將欄位放置在“賬單”（billing）、“配送”（shipping）、“訂單備註”（order）等現有分割槽，甚至可以建立自定義分割槽（custom）。
下面的程式碼示例展示瞭如何在“賬單”資訊區域底部新增一個“公司稅號”文字欄位和一個“是否需要發票”的單選框。
/**
* 在结账页面添加自定义字段
*/
add_filter( 'woocommerce_checkout_fields', 'custom_add_checkout_fields' );
function custom_add_checkout_fields( $fields ) {
// 在“账单”字段组中添加一个“公司税号”文本字段
$fields['billing']['billing_vat_number'] = array(
'label' => __( '公司税号 / VAT Number', 'your-text-domain' ),
'placeholder' => _x( '请输入您的公司税号', 'placeholder', 'your-text-domain' ),
'required' => false, // 非必填
'class' => array( 'form-row-wide' ), // 宽度样式
'clear' => true, // 清除浮动
'priority' => 25, // 显示顺序，数字越小越靠前
);
// 在“账单”字段组中添加一个“是否需要发票”单选框
$fields['billing']['billing_invoice_needed'] = array(
'type' => 'radio',
'label' => __( '是否需要纸质发票？', 'your-text-domain' ),
'required' => true,
'class' => array( 'form-row-wide' ),
'clear' => true,
'priority' => 30,
'options' => array(
'yes' => __( '是，需要纸质发票', 'your-text-domain' ),
'no' => __( '否，不需要', 'your-text-domain' )
)
);
return $fields;
}驗證和儲存欄位資料
新增欄位後，必須確保使用者輸入的資料被儲存到相應的訂單元資料中。這需要透過 woocommerce_checkout_update_order_meta 動作鉤子來實現。當用戶提交訂單時，WooCommerce 會觸發此鉤子，我們可以在此刻獲取並儲存自定義欄位的值。
/**
* 保存自定义结账字段的值到订单元数据
*/
add_action( 'woocommerce_checkout_update_order_meta', 'custom_save_checkout_fields' );
function custom_save_checkout_fields( $order_id ) {
if ( ! empty( $_POST['billing_vat_number'] ) ) {
// 使用 sanitize_text_field 进行清洁处理，防止恶意代码
update_post_meta( $order_id, '_billing_vat_number', sanitize_text_field( $_POST['billing_vat_number'] ) );
}
if ( ! empty( $_POST['billing_invoice_needed'] ) ) {
update_post_meta( $order_id, '_billing_invoice_needed', sanitize_text_field( $_POST['billing_invoice_needed'] ) );
}
}在後臺和郵件中顯示欄位資料
僅僅儲存資料是不夠的，商家在後臺管理訂單時需要看到這些資訊，客戶在訂單確認郵件和“我的賬戶”頁面中也應能看到自己填寫的內容。
在後臺訂單編輯頁面顯示
可以通过以下方式来实现： woocommerce_admin_order_data_after_billing_address 和類似的鉤子，將自定義欄位的值輸出到後臺訂單詳情頁的“賬單地址”或“配送地址”欄目之後。
推荐阅读 WordPress外掛開發入門指南：從零構建您的第一個功能擴充套件。
/**
* 在后台订单详情页显示自定义字段
*/
add_action( 'woocommerce_admin_order_data_after_billing_address', 'custom_display_admin_order_meta', 10, 1 );
function custom_display_admin_order_meta( $order ) {
$vat_number = $order->get_meta( '_billing_vat_number' );
$invoice_needed = $order->get_meta( '_billing_invoice_needed' );
if ( $vat_number ) {
echo '<p><strong>' . __( '公司税号:', 'your-text-domain' ) . '</strong> ' . esc_html( $vat_number ) . '</p>';
}
if ( $invoice_needed ) {
$display_text = ( $invoice_needed == 'yes' ) ? __( '是', 'your-text-domain' ) : __( '否', 'your-text-domain' );
echo '<p><strong>' . __( '需要纸质发票:', 'your-text-domain' ) . '</strong> ' . esc_html( $display_text ) . '</p>';
}
}在訂單郵件和感謝頁面中顯示
為了讓客戶也能看到這些資訊，我們需要將其加入到訂單郵件和訂單確認（感謝）頁面。使用 woocommerce_email_order_meta_keys 過濾器可以自動將指定的元資料鍵新增到所有通知郵件中。同時，使用 woocommerce_order_details_after_order_table 動作鉤子可以在前臺訂單詳情中顯示。
/**
* 将自定义字段添加到订单邮件中
*/
add_filter( 'woocommerce_email_order_meta_keys', 'custom_add_order_meta_to_email' );
function custom_add_order_meta_to_email( $keys ) {
$keys[] = '_billing_vat_number';
$keys[] = '_billing_invoice_needed'; // 邮件中会以键的格式显示，通常需要进一步美化
return $keys;
}
/**
* 在前台订单详情（感谢页面、我的账户-订单详情）中显示自定义字段
*/
add_action( 'woocommerce_order_details_after_order_table', 'custom_display_order_data_frontend', 10, 1 );
function custom_display_order_data_frontend( $order ) {
$vat_number = $order->get_meta( '_billing_vat_number' );
if ( $vat_number ) {
echo '<h2>' . __( '附加信息', 'your-text-domain' ) . '</h2>';
echo '<table class="shop_table shop_table_responsive additional_info">';
echo '<tr><th>' . __( '公司税号:', 'your-text-domain' ) . '</th><td>' . esc_html( $vat_number ) . '</td></tr>';
echo '</table>';
}
}高階應用與欄位條件邏輯
基礎欄位新增之外，更復雜的互動能夠極大提升使用者體驗，例如欄位的條件顯示和基於現有值的驗證。
實現欄位的條件顯示
使用 JavaScript/jQuery，你可以根據某個欄位的值（如國家、州或一個單選選項）來動態顯示或隱藏另一個欄位。例如，只有當用戶選擇“需要紙質發票”時，才顯示一個“發票寄送注意事項”的文字區域。
實現此功能需要在主題的 JavaScript 檔案中新增邏輯，或者透過 wp_enqueue_script 將指令碼排入佇列，並在結賬頁面監聽欄位變化，控制目標欄位的顯示狀態。
為欄位新增自定義驗證
雖然 WooCommerce 內建了“必填”（required => true）驗證，但有時你需要更復雜的驗證規則，比如稅號的特定格式。可以透過 woocommerce_checkout_process 動作鉤子來新增自定義驗證邏輯。
/**
* 在结账过程中验证自定义字段
*/
add_action( 'woocommerce_checkout_process', 'custom_validate_checkout_fields' );
function custom_validate_checkout_fields() {
// 如果“公司税号”字段不为空，则检查其格式（示例：假设是15位数字）
if ( ! empty( $_POST['billing_vat_number'] ) && ! preg_match( '/^d{15}$/', $_POST['billing_vat_number'] ) ) {
wc_add_notice( __( '错误：公司税号格式不正确，应为15位数字。', 'your-text-domain' ), 'error' );
}
}性能优化与最佳实践
在網站中新增過多自定義欄位或處理不當時，可能會影響結賬頁面的載入速度和使用者體驗。
推荐阅读 掌握 WooCommerce 自定义字段：从创建到显示的高级开发指南。
最佳化欄位載入與渲染
- 選擇性載入指令碼：僅將條件顯示欄位所需的 JavaScript 指令碼在結賬頁面載入。
- 合理設定優先順序：使用
priority引數合理排列欄位順序，避免不必要的佈局重排。 - 精簡
class陣列：只新增必要的樣式類，如form-row-wide或者form-row-first。
資料安全與清理
- 始終清理和驗證：在儲存（
update_post_meta）和顯示（echo）使用者資料前，務必使用sanitize_text_field(),esc_html(),wp_kses_post()等函式進行處理，這是防止跨站指令碼（XSS）攻擊的關鍵。 - 使用正確的資料型別：對於數字或特定格式的資料，應考慮使用
sanitize_key()或自定義正則表示式進行驗證和清理。
总结
自定義 WooCommerce 結賬欄位是一項強大的功能，它打通了商家與客戶在交易關鍵節點的資訊流。從透過 woocommerce_checkout_fields 鉤子定義前端欄位，到利用 woocommerce_checkout_update_order_meta 鉤子安全儲存資料，再到透過多個管理鉤子和郵件過濾器將資料呈現於後臺、郵件和使用者前臺，整個過程構成了一個完整的資料處理閉環。掌握這些核心方法後，結合條件顯示和自定義驗證等高階技巧，開發者可以構建出高度個性化、使用者友好且資料安全的結賬流程，從而滿足多樣化的電子商務需求，提升店鋪的專業度和客戶滿意度。
常见问题解答（FAQ）
自定義欄位的資料儲存在哪裡？
自定義欄位的資料作為“訂單元資料”儲存。當使用 update_post_meta( $order_id, ‘_field_key’, $value ); 儲存時，資料會存入 WordPress 的 wp_postmeta 資料庫表中，與訂單（一種自定義文章型別）透過 post_id 關聯。鍵名通常以下劃線開頭，表示其為隱藏的元資料。
如何讓自定義欄位在使用者註冊時也儲存到使用者賬戶？
如果你在結賬時允許建立賬戶，並希望將欄位（如“公司名”）也儲存為使用者資料，需要在儲存訂單元資料的同時，也更新使用者元資料。可以使用 update_user_meta( $customer_id, ‘billing_company’, $value );。注意，這通常需要在使用者註冊或登入的上下文中獲取到正確的使用者ID。
為什麼我的自定義欄位沒有在郵件中正確顯示？
如果欄位值沒有在郵件中顯示，最常見的原因是忘記透過 woocommerce_email_order_meta_keys 過濾器將其鍵名新增到郵件變數中。此外，郵件模板可能沒有呼叫顯示自定義元資料的部分。確保你的欄位鍵名已正確加入該過濾器陣列，並且郵件模板（如 email-order-details.php）支援顯示通用元資料。
能否在結賬頁面的不同位置新增欄位區塊？
可以。除了預設的 billing、shipping、order 分組，你可以在 woocommerce_checkout_fields 過濾器中建立一個全新的分組，例如 custom_section。然後，使用 woocommerce_checkout_after_customer_details 或者 woocommerce_before_order_notes 等動作鉤子，結合 do_action(‘woocommerce_checkout_’ . $section); 來將這個新分組的欄位渲染到頁面的任何你想要的位置。這需要對 WooCommerce 結賬模板的結構有一定了解。
下一步，该怎么做呢？
延伸阅读与实用知识
下方列出的内容与本文主题相关，适合继续深入阅读。建议先从与你当前问题最相关的文章开始阅读，然后逐步扩展到相关主题，这样效果通常会更好。