显示或隐藏其他 Checkout 自定义字段的自定义下拉选择器

Posted 2023-05-08

【中文标题】显示或隐藏其他 Checkout 自定义字段的自定义下拉选择器

【英文标题】：Custom dropdown selector showing or hiding other Checkout custom fields

【发布时间】：2016-12-31 22:36:52

【问题描述】：

我使用此代码创建自定义结帐字段和重新排序字段：

add_filter( 'woocommerce_checkout_fields', 'custom_checkout_billing_fields' );
function custom_checkout_billing_fields( $fields ) 

// 1. Creating the additional custom billing fields

    // The "status" selector
    $fields['billing']['billing_status']['type'] = 'select';
    $fields['billing']['billing_status']['class'] = array('form-row-wide, status-select');
    $fields['billing']['billing_status']['required'] = true;
    $fields['billing']['billing_status']['label'] = __('User status', 'my_theme_slug');
    $fields['billing']['billing_status']['placeholder'] = __('Chose an option', 'my_theme_slug');
    $fields['billing']['billing_status']['options'] = array(
        '' => 'Chose an option',
        '1' => 'Legal entity',
        '2' => 'Individual'
    );

    // The "Serial ID" text field
    $fields['billing']['billing_number_id']['type'] = 'text';
    $fields['billing']['billing_number_id']['class'] = array('form-row-wide', 'status-group1');
    $fields['billing']['billing_number_id']['required'] = true;
    $fields['billing']['billing_number_id']['label'] = __('Serial ID', 'my_theme_slug');
    $fields['billing']['billing_number_id']['placeholder'] = __('Enter your Serial ID', 'my_theme_slug');

    // Customizing 'billing_company' field ['required']
    $fields['billing']['billing_company']['required'] = false;

    // The "Serial ID" text field
    $fields['billing']['billing_serial']['type'] = 'text';
    $fields['billing']['billing_serial']['class'] = array('form-row-wide', 'status-group1');
    $fields['billing']['billing_serial']['required'] = false;
    $fields['billing']['billing_serial']['label'] = __('Serial ID', 'my_theme_slug');
    $fields['billing']['billing_serial']['placeholder'] = __('Enter your Serial ID', 'my_theme_slug');


// 2. Customizing 'billing_email' and 'billing_phone' fields ['class']

    $fields['billing']['billing_email']['class'] = array('form-row-first', 'status-group1');
    $fields['billing']['billing_phone']['class'] = array('form-row-last', 'status-group1');


// 3. Ordering the billing fields

    $fields_order = array(
        'billing_first_name', 'billing_last_name', 'billing_email',
        'billing_phone',      'billing_address_1', 'billing_address_2',
        'billing_postcode',   'billing_city',      'billing_country',
        'billing_status',
        'billing_company',   'billing_number_id',  'billing_serial'
    );
    foreach($fields_order as $field) $ordered_fields[$field] = $fields['billing'][$field];

    $fields['billing'] = $ordered_fields;


// Returning Checkout customized billing fields

    return $fields;

条件机制：

默认情况下，billing_status 下拉选择器将位于 Individual 选项值上，并且将仅显示 billing_serial 自定义字段。 当billing_status 下拉选择器将切换到"Company"** 选项值时，将出现另外2 个字段： billing_company 现有字段（在 billing_serial 之前） billing_number_id 自定义字段（最后）

我怎样才能做到这一点？

谢谢

---

参考：WooCommerce - Checkout conditional fields for different persons custom status

【问题讨论】：

很简单，用户只填写姓名和姓氏，然后选择个人身份，是法人还是个人。如果他将从下拉选择器菜单中选择个人状态，则需要显示的字段将是电话、地址、电子邮件和序列号。如果他是法人实体，我需要以下字段： - 电话 - 电子邮件 - 地址 - 公司的序列号 - 和其他 3 个字段

好的，我想要这种结构的原因是，如果我想在发票上携带这些数据，则取决于人的类型。现在有意义吗？

将数据带给thankyou和发票将是未来的其他问题，我认为:)

【参考方案1】：

对于 WooCommerce 3+ （更新）：

由于 WooCommerce 3.0 结帐字段发生了一些变化，因此无法像以前那样重新排序字段。

有一个新的'priority'参数处理字段顺序，也适用于结帐字段和我的帐户字段。

下面我只是更新与订购字段相关的部分：

## 3. Ordering the billing fields

// Set the order of the fields
$billing_fields_new_order = array(
    'billing_first_name', 'billing_last_name', 'billing_email',
    'billing_phone',      'billing_address_1', 'billing_address_2',
    'billing_postcode',   'billing_city',      'billing_country',
    'billing_status',
    'billing_company',   'billing_number_id',  'billing_ser_id'
);

$count = 0;
$priority = 10;

// Updating the 'priority' argument
foreach($billing_fields_new_order as $field_name)
    $count++;
    $fields['billing'][$field_name]['priority'] = $count * $priority;


// END: returning the customized checkout fields
return $fields;

参考：Reordering checkout fields in WooCommerce 3

---

原答案：

这是一个带有 jQ​​uery/JS 脚本的解决方案，可以让条件机制按您的预期工作...... php 代码完成了一些必要的功能......

PHP 代码（在 function.php 中）：

// Registering external jQuery/JS file
function cfields_scripts() 
    
    /* IMPORTANT NOTE: For a child theme replace get_template_directory_uri() by get_stylesheet_directory_uri()
                       The external cfields.js file goes in a subfolder "js" of your active child theme or theme.*/
    
    wp_enqueue_script( 'checkout_script', get_template_directory_uri().'/js/cfields.js', array('jquery'), '1.0', true );

add_action( 'wp_enqueue_scripts', 'cfields_scripts' );


add_filter( 'woocommerce_checkout_fields', 'custom_checkout_billing_fields' );
function custom_checkout_billing_fields( $fields ) 

// 1. Creating the additional custom billing fields

    // The "status" selector
    $fields['billing']['billing_status']['type'] = 'select';
    $fields['billing']['billing_status']['class'] = array('form-row-wide, status-select');
    $fields['billing']['billing_status']['required'] = true;
    $fields['billing']['billing_status']['label'] = __('User status', 'my_theme_slug');
    $fields['billing']['billing_status']['placeholder'] = __('Chose an option', 'my_theme_slug');
    $fields['billing']['billing_status']['options'] = array(
        '1' => __( 'Individual', '' ),
        '2' => __( 'Company', '' )
    );

    // Customizing 'billing_company' field ['required']
    $fields['billing']['billing_company']['required'] = false;
    $fields['billing']['billing_company']['class'] = array('form-row-wide', 'status-group2');

    // The "Number ID" text field
    $fields['billing']['billing_number_id']['type'] = 'text';
    $fields['billing']['billing_number_id']['class'] = array('form-row-wide');
    $fields['billing']['billing_number_id']['required'] = true;
    $fields['billing']['billing_number_id']['label'] = __('Number ID', 'my_theme_slug');
    $fields['billing']['billing_number_id']['placeholder'] = __('Enter your Number ID', 'my_theme_slug');

    // The "Serial identification" text field
    $fields['billing']['billing_ser_id']['type'] = 'text';
    $fields['billing']['billing_ser_id']['class'] = array('form-row-wide', 'status-group2');
    $fields['billing']['billing_ser_id']['required'] = false;
    $fields['billing']['billing_ser_id']['label'] = __('Serial identification', 'my_theme_slug');
    $fields['billing']['billing_ser_id']['placeholder'] = __('Enter your Serial identification', 'my_theme_slug');


// 3. Ordering the billing fields

    $fields_order = array(
        'billing_first_name', 'billing_last_name', 'billing_email',
        'billing_phone',      'billing_address_1', 'billing_address_2',
        'billing_postcode',   'billing_city',      'billing_country',
        'billing_status',
        'billing_company',   'billing_number_id',  'billing_ser_id'
    );
    foreach($fields_order as $field) $ordered_fields[$field] = $fields['billing'][$field];

    $fields['billing'] = $ordered_fields;


// Returning Checkout customized billing fields

    return $fields;




// Process the checkout
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');
function custom_checkout_field_process() 
    // Check if set, if its not set add an error.
    if ( ! $_POST['billing_number_id'] )
        wc_add_notice( __( 'Please enter your Number ID.', 'my_theme_slug' ), 'error' );
    if ( ! $_POST['billing_ser_id'] )
        wc_add_notice( __( 'Please enter your Serial id.' , 'my_theme_slug' ), 'error' );


// Update the order meta with field value
add_action( 'woocommerce_checkout_update_order_meta', 'custom_checkout_field_update_order_meta' );
function custom_checkout_field_update_order_meta( $order_id ) 
    if ( ! empty( $_POST['billing_number_id'] ) )
        update_post_meta( $order_id, 'billing_number_id', sanitize_text_field( $_POST['billing_number_id'] ) );
    if ( ! empty( $_POST['billing_ser_id'] ) )
        update_post_meta( $order_id, 'billing_ser_id', sanitize_text_field( $_POST['billing_ser_id'] ) );



// Display field value on the order edit page
add_action( 'woocommerce_admin_order_data_after_billing_address', 'custom_checkout_field_display_admin_order_meta', 10, 1 );
function custom_checkout_field_display_admin_order_meta($order)
    echo '<p><strong>'.__('My number ID').':</strong> ' . get_post_meta( $order->id, 'billing_number_id', true ) . '</p>';
    echo '<p><strong>'.__('My serial identification').':</strong> ' . get_post_meta( $order->id, 'billing_ser_id', true ) . '</p>';

javascript cfields.js 代码（外部文件）：

// This file named "cfields.js" goes in a subfolder "js" of your active child theme or theme

jQuery(document).ready(function($)

    $('#billing_company_field').hide(function()
        $(this).removeClass("validate-required");
    );
    $('#billing_ser_id_field').hide(function()
        $(this).removeClass("validate-required");
    );
    $("#billing_number_id_field").addClass("validate-required");

    $("#billing_status").change(function()
        if($("#billing_status option:selected").val() == "2")
            $('#billing_company_field').show(function()
                $(this).addClass("validate-required");
            );
            $('#billing_ser_id_field').show(function()
                $(this).addClass("validate-required");
            );
         else if($("#billing_status option:selected").val() == "1")
            $('#billing_company_field').hide(function()
                $(this).removeClass("validate-required");
            );
            $('#billing_ser_id_field').hide(function()
                $(this).removeClass("validate-required");
            );
        

    );

);

所有这些代码都已经过测试并且可以工作

【讨论】：

你好 Loic，我有一个小问题，我想为法人实体添加 3 个字段：银行名称、银行账户和注册号.. 我做不到，你能帮帮我吗，提前谢谢.. @loictheaztec