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:
- If
'legal entity'
is selected, it should display 3 fields:
- 'phone_number'
- 'email'
- 'serial_id'
- 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.
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