如何在WooCommerce结账页面创建个人与法人账单选项卡？

嗨，我来帮你搞定WooCommerce结账页面的个人/法人账单选项卡问题！要实现类似你提到的罗马尼亚站点的效果，咱们可以分五步来操作，从前端UI搭建到后台数据处理，一步步来：

首先咱们要在账单表单上方插入选项卡的切换按钮，用WooCommerce的钩子来实现，不会破坏原有结构：

add_action('woocommerce_before_checkout_billing_form', 'add_billing_tabs_checkout');
function add_billing_tabs_checkout() {
    ?>
    <div class="billing-tabs">
        <button class="billing-tab active" data-tab="personal">个人账单</button>
        <button class="billing-tab" data-tab="company">法人账单</button>
    </div>
    <?php
}

接下来要处理选项卡的点击切换效果，控制对应字段组的显示和隐藏：

jQuery(document).ready(function($) {
    // 选项卡切换逻辑
    $('.billing-tab').click(function() {
        // 移除所有选项卡的激活状态
        $('.billing-tab').removeClass('active');
        // 给当前点击的选项卡添加激活样式
        $(this).addClass('active');
        
        var targetTab = $(this).data('tab');
        
        // 隐藏所有字段组
        $('.billing-personal-fields, .billing-company-fields').hide();
        // 显示选中的字段组
        $('.billing-' + targetTab + '-fields').show();
    });
});

现在要给法人账单添加专属字段（比如公司税号、注册号），同时给个人/法人字段分别标记类名，方便JS控制：

add_filter('woocommerce_billing_fields', 'add_company_billing_fields');
function add_company_billing_fields($fields) {
    // 给默认个人字段添加专属类
    $fields['billing_first_name']['class'][] = 'billing-personal-fields';
    $fields['billing_last_name']['class'][] = 'billing-personal-fields';
    $fields['billing_email']['class'][] = 'billing-personal-fields';
    $fields['billing_phone']['class'][] = 'billing-personal-fields';
    
    // 添加法人专属字段
    $fields['billing_company_tax_id'] = array(
        'label'       => '公司税号',
        'required'    => true,
        'class'       => array('form-row-wide', 'billing-company-fields'),
        'priority'    => 35,
        'hidden'      => true // 默认隐藏，切换到法人选项卡后显示
    );
    
    $fields['billing_company_reg_no'] = array(
        'label'       => '公司注册号',
        'required'    => true,
        'class'       => array('form-row-wide', 'billing-company-fields'),
        'priority'    => 36,
        'hidden'      => true // 默认隐藏
    );
    
    // 给默认公司字段也加上法人类
    $fields['billing_company']['class'][] = 'billing-company-fields';
    
    return $fields;
}

要确保提交订单后，法人专属字段的数据能保存到订单里，还要在后台订单详情中展示：

// 保存法人字段到订单元数据
add_action('woocommerce_checkout_update_order_meta', 'save_company_billing_fields');
function save_company_billing_fields($order_id) {
    if (!empty($_POST['billing_company_tax_id'])) {
        update_post_meta($order_id, '_billing_company_tax_id', sanitize_text_field($_POST['billing_company_tax_id']));
    }
    if (!empty($_POST['billing_company_reg_no'])) {
        update_post_meta($order_id, '_billing_company_reg_no', sanitize_text_field($_POST['billing_company_reg_no']));
    }
}

// 在后台订单详情页面显示法人字段
add_action('woocommerce_admin_order_data_after_billing_address', 'display_company_billing_fields_admin');
function display_company_billing_fields_admin($order) {
    $taxId = get_post_meta($order->get_id(), '_billing_company_tax_id', true);
    $regNo = get_post_meta($order->get_id(), '_billing_company_reg_no', true);
    
    if ($taxId || $regNo) {
        echo '<div class="address"><p><strong>' . __('公司税号', 'woocommerce') . ':</strong> ' . $taxId . '</p>';
        echo '<p><strong>' . __('公司注册号', 'woocommerce') . ':</strong> ' . $regNo . '</p></div>';
    }
}

最后调整样式，让选项卡更贴近你想要的示例效果，你可以根据自己的主题修改颜色、间距：

.billing-tabs {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
}

.billing-tab {
    padding: 10px 20px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    cursor: pointer;
    border-radius: 4px 4px 0 0;
    transition: all 0.3s ease;
}

.billing-tab.active {
    background: #007cba;
    color: white;
    border-color: #007cba;
}

/* 默认隐藏法人字段组 */
.billing-company-fields {
    display: none;
}

注意事项 #

• 把这些代码放到你的子主题functions.php文件里，或者用Code Snippets这类自定义代码插件，不要直接修改WooCommerce核心文件，避免插件更新后代码丢失。
• 你可以根据实际需求调整字段的必填项、标签文字、样式细节，完全匹配你的业务场景。

内容的提问来源于stack exchange，提问作者Gps Caini