How to Add Custom Fields to WooCommerce Checkout Page

The one aspect that I have learnt about the WooCommerce ecosystem is that it is a huge pool of absolutely innovative functionalities, which if used effectively can prove to be advantageous to your eCommerce business in a variety of ways.

This also means that there is always something new to explore and learn in the WooCommerce domain. Weirdly enough I have recently gotten the opportunity to be involved in some interesting WooCommerce development work. And as always I am going to share it with you.

By default WooCommerce checkout page provides users with predefined fields which have been placed in a particular order on the checkout page.

Now let us imagine we want to add ‘Title’ field just before the First name field on the checkout page. To achieve this output along with making changes to the default Checkout page certain changes will have to be made to the Order page. Minor tweaks will then have to be done to the user’s Account page too as these changes need to be reflected there too. While the best way to incorporate the code into the website would be through the use of a plugin it can also be included in the functions.php file of theme.

Step 1: Define an Array of Fields on Checkout Page

The foremost step to add custom fields to WooCommerce checkout page would be to define an array with the fields that you want to display.

The order of the fields that will be displayed on the checkout page will be same as that defined in the array.

Also, the array of already existing fields will be separate from the array of custom fields that are added to the checkout page.

In our example we will remove the ‘Company’ field from the checkout page and add the ‘Title’ field before the ‘First Name’ field on the checkout page. The following block of code can be used to define the array.

Once this has been done the additional fields will be now be visible on the checkout page. Furthermore the updated fields will also be displayed on the user’s account page.

Below is a representation of the checkout page after the custom fields have been added to the page.

Step 3: Concatenate Fields as per Requirement

Some might want to concatenate two or more strings to display them on the ‘Order Page’. For example you might want to display the title, first name and last name together on a single line.

To do so the contents of the three fields will have to be concatenated as below.

add_filter('woocommerce_formatted_address_replacements', 'wdm_formatted_address_replacements', 99, 2);
functionwdm_formatted_address_replacements( $address, $args ){
$address['{name}'] = $args['title']." ".$args['first_name']." ".$args['last_name']; //show title along with name
$address['{address_1}'] = $args['address_1']."\r\n".$args['address_2']; //reposition to display as it should be
$address['{address_2}'] = $args['address_3']."\r\n".$args['address_4']; //reposition to display as it should be return $address;
}

Step 4: Display Custom Fields on Order Page

By default the the checkout page fields are displayed on the order page too.

However, when fields are added or removed from the checkout page these changes should also be reflected on the order page. In order to do so the following block of code should be used.

With this code the billing address and shipping address will be displayed along with the updated list of fields on the order page in the back end as well as on the single order page in the WooCommerce dashboard.

Step 6: Edit Option on Single Order Page

Another, tweak that will have to be made is to add the custom fields in the edit option on the single order page in the dashboard.

<?php
add_filter('woocommerce_admin_billing_fields', 'wdm_add_extra_customer_field');
add_filter('woocommerce_admin_shipping_fields', 'wdm_add_extra_customer_field');
functionwdm_add_extra_customer_field( $fields ){
//take back up of email and phone fields as they will be lost after repositioning
$email = $fields['email'];
$phone = $fields['phone'];
$fields = wdm_override_default_address_fields( $fields );
//reassign email and phone fields
$fields['email'] = $email;
$fields['phone'] = $phone;
global $wdm_ext_fields;
if(is_array($wdm_ext_fields)){
foreach($wdm_ext_fields as $wef){
$fields[$wef]['show'] =false; //hide the way they are display by default as we have now merged them within the address field
}
}
return $fields;
}
?>

Once the above code is implemented the changes in the single order page of the dashboard will look as below.

With that last piece of code there we are good to go. If you follow all the above steps properly you should be able to add the custom data to the the checkout page in WooCommerce with ease. However if you are still having difficulties you can revert to me with your queries. Also, let me know your views on the post in the comment section.