WooCommerce - Checkout conditional fields for diff

Question

I need to modify the checkout process for an woocommere website. The process is determinated by the status of the person that could be one of this:
- 'legal entity'
- 'individual'

I need to have a selector 'User status' (or radio buttons), just after the 'billing_first_name' and 'billing_last_name'.

The selector should work this way:

1. If 'legal entity' is selected, it should display 3 fields:
   • 'phone_number'
   • 'email'
   • 'serial_id'
2. If 'individual' is selected, it should display 3 other fields:
   • 'custom_field1'
   • 'custom_field2'
   • 'custom_field3'

I tried WooCommerce Checkout Manager and another plugin but the problem is that I can't make matching conditions.

How can I achieve this?

Thanks.

Answer 1

For WooCommerce 3+ (update):

Since WooCommerce 3.0 checkout fields have changed a little bit so is not possible to reorder fields as before.

There is a new 'priority' argument that handle fields order, for checkout fields and my account fields as well.

Below I am just updating the part related to ordering fields:

## 3. Ordering the billing fields

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

$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;

Reference: Reordering checkout fields in WooCommerce 3

---

Original answer:

You need to use woocommerce_checkout_fields hook. Then first create the new fields. After Customize some field classes. To finish reorder the field to match your desire.

Here is the code:

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_serial_id']['type'] = 'text';
    $fields['billing']['billing_serial_id']['class'] = array('form-row-wide', 'status-group1');
    $fields['billing']['billing_serial_id']['required'] = true;
    $fields['billing']['billing_serial_id']['label'] = __('Serial ID', 'my_theme_slug');
    $fields['billing']['billing_serial_id']['placeholder'] = __('Enter your Serial ID', 'my_theme_slug');

    // The "Custom 1" text field
    $fields['billing']['billing_custom1']['type'] = 'text';
    $fields['billing']['billing_custom1']['class'] = array('form-row-wide', 'status-group2');
    $fields['billing']['billing_custom1']['required'] = true;
    $fields['billing']['billing_custom1']['label'] = __('Custom name 1', 'my_theme_slug');
    $fields['billing']['billing_custom1']['placeholder'] = __('Enter your custom1', 'my_theme_slug');

    // The "Custom 2" text field
    $fields['billing']['billing_custom2']['type'] = 'text';
    $fields['billing']['billing_custom2']['class'] = array('form-row-wide', 'status-group2');
    $fields['billing']['billing_custom2']['required'] = true;
    $fields['billing']['billing_custom2']['label'] = __('Custom name 2', 'my_theme_slug');
    $fields['billing']['billing_custom2']['placeholder'] = __('Enter your custom2', 'my_theme_slug');

    // The "Custom 3" text field
    $fields['billing']['billing_custom3']['type'] = 'text';
    $fields['billing']['billing_custom3']['class'] = array('form-row-wide', 'status-group2');
    $fields['billing']['billing_custom3']['required'] = true;
    $fields['billing']['billing_custom3']['label'] = __('Custom name 3', 'my_theme_slug');
    $fields['billing']['billing_custom3']['placeholder'] = __('Enter your custom3', '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_status',
        'billing_email',      'billing_phone',     'billing_serial_id',
        'billing_custom1',    'billing_custom2',   'billing_custom3',
        'billing_company',    'billing_address_1', 'billing_address_2',
        'billing_postcode',   'billing_city',      'billing_country',
    );
    foreach($fields_order as $field) $ordered_fields[$field] = $fields['billing'][$field];

    $fields['billing'] = $ordered_fields;


// Returning Checkout customized billing fields

    return $fields;

}

Naturally this goes on function.php file of your active child theme or theme

This code is tested and fully functional.

Now with this code, yo can ask a question to handle the "conditional" part of this question (as I have tell you in comments)…

Official reference: WooThemes - Customizing checkout fields using actions and filters