如何拆分WooCommerce结账页面字段？自定义结账页技术求助

要实现拆分结账字段的自定义效果，核心逻辑就是隐藏WooCommerce原生字段，替换为自定义HTML结构，再通过钩子同步数据到订单系统，下面是具体落地步骤：

一、隐藏默认结账字段 #

可以选择CSS前端隐藏（快速直观）或PHP彻底移除（适合不需要原生字段逻辑的场景）：

• CSS方式：

/* 隐藏整个账单地址字段组 */
.woocommerce-billing-fields {
    display: none !important;
}
/* 单独隐藏某一个原生字段 */
#billing_address_1_field {
    display: none;
}

• PHP方式：

add_filter( 'woocommerce_checkout_fields', 'remove_default_checkout_fields' );
function remove_default_checkout_fields( $fields ) {
    // 按需移除原生字段，示例为移除账单地址相关项
    unset($fields['billing']['billing_address_1']);
    unset($fields['billing']['billing_address_2']);
    return $fields;
}

二、插入自定义拆分字段 #

在结账页面的合适位置添加自己的HTML字段结构，比如拆分地址为街道、门牌号、公寓号：

add_action( 'woocommerce_before_checkout_billing_form', 'add_custom_checkout_fields' );
function add_custom_checkout_fields() {
    ?>
    <div class="custom-billing-fields">
        <p class="form-row form-row-wide">
            <label for="custom_street"><?php _e( '街道名称', 'woocommerce' ); ?> <span class="required">*</span></label>
            <input type="text" class="input-text" name="custom_street" id="custom_street" value="<?php echo esc_attr( $_POST['custom_street'] ?? '' ); ?>" />
        </p>
        <p class="form-row form-row-first">
            <label for="custom_house_number"><?php _e( '门牌号', 'woocommerce' ); ?> <span class="required">*</span></label>
            <input type="text" class="input-text" name="custom_house_number" id="custom_house_number" value="<?php echo esc_attr( $_POST['custom_house_number'] ?? '' ); ?>" />
        </p>
        <p class="form-row form-row-last">
            <label for="custom_apartment"><?php _e( '公寓号', 'woocommerce' ); ?></label>
            <input type="text" class="input-text" name="custom_apartment" id="custom_apartment" value="<?php echo esc_attr( $_POST['custom_apartment'] ?? '' ); ?>" />
        </p>
    </div>
    <?php
}

三、验证字段并同步到订单 #

确保自定义字段通过验证，同时把数据同步到WooCommerce订单系统（包括原生字段，保证后续订单功能正常）：

// 自定义字段验证
add_action( 'woocommerce_checkout_process', 'validate_custom_checkout_fields' );
function validate_custom_checkout_fields() {
    if ( empty( $_POST['custom_street'] ) ) {
        wc_add_notice( __( '请填写街道名称。', 'woocommerce' ), 'error' );
    }
    if ( empty( $_POST['custom_house_number'] ) ) {
        wc_add_notice( __( '请填写门牌号。', 'woocommerce' ), 'error' );
    }
}

// 同步字段数据到订单
add_action( 'woocommerce_checkout_update_order_meta', 'save_custom_checkout_fields_to_order' );
function save_custom_checkout_fields_to_order( $order_id ) {
    if ( ! empty( $_POST['custom_street'] ) ) {
        // 存储自定义字段
        update_post_meta( $order_id, '_custom_street', sanitize_text_field( $_POST['custom_street'] ) );
        update_post_meta( $order_id, '_custom_house_number', sanitize_text_field( $_POST['custom_house_number'] ) );
        update_post_meta( $order_id, '_custom_apartment', sanitize_text_field( $_POST['custom_apartment'] ) );
        
        // 拼接为原生地址字段，保证订单导出、物流对接等功能正常
        $full_address = sanitize_text_field( $_POST['custom_street'] ) . ' ' . sanitize_text_field( $_POST['custom_house_number'] );
        if ( ! empty( $_POST['custom_apartment'] ) ) {
            $full_address .= ', ' . sanitize_text_field( $_POST['custom_apartment'] );
        }
        update_post_meta( $order_id, '_billing_address_1', $full_address );
    }
}

四、在订单页面显示自定义字段 #

让自定义字段在后台订单详情和用户前端订单页可见：

// 后台订单详情页显示
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_fields_in_admin_order' );
function display_custom_fields_in_admin_order( $order ) {
    echo '<p><strong>' . __( '街道名称', 'woocommerce' ) . ':</strong> ' . get_post_meta( $order->get_id(), '_custom_street', true ) . '</p>';
    echo '<p><strong>' . __( '门牌号', 'woocommerce' ) . ':</strong> ' . get_post_meta( $order->get_id(), '_custom_house_number', true ) . '</p>';
    echo '<p><strong>' . __( '公寓号', 'woocommerce' ) . ':</strong> ' . get_post_meta( $order->get_id(), '_custom_apartment', true ) . '</p>';
}

// 用户前端订单页显示
add_action( 'woocommerce_order_details_after_order_table', 'display_custom_fields_in_frontend_order' );
function display_custom_fields_in_frontend_order( $order ) {
    echo '<h2>' . __( '详细地址信息', 'woocommerce' ) . '</h2>';
    echo '<ul class="woocommerce-order-overview order_details">';
    echo '<li><strong>' . __( '街道名称', 'woocommerce' ) . ':</strong> ' . get_post_meta( $order->get_id(), '_custom_street', true ) . '</li>';
    echo '<li><strong>' . __( '门牌号', 'woocommerce' ) . ':</strong> ' . get_post_meta( $order->get_id(), '_custom_house_number', true ) . '</li>';
    echo '<li><strong>' . __( '公寓号', 'woocommerce' ) . ':</strong> ' . get_post_meta( $order->get_id(), '_custom_apartment', true ) . '</li>';
    echo '</ul>';
}

注意事项 #

• 自定义字段要同步到原生WooCommerce字段，避免订单导出、物流对接等功能异常；
• 自定义HTML的CSS样式要适配当前主题，防止布局错乱；
• 务必测试完整结账流程，验证字段验证、数据存储、页面显示全链路正常。

内容的提问来源于stack exchange，提问作者Tarik Biševac