Search

How to Add Custom Fields to WooCommerce Checkout Page

Listen to this article

eCommerce-advantagesThe 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.

Like for instance recently I wrote about Integrating WooCommerce with an External Order Management System. Today I am going to talk about the various steps that you must to go through to add custom fields to WooCommerce checkout page.

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.

You might also like 6

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.
//global array to reposition the elements to display as you want (e.g. kept 'title' before 'first_name' )
    $wdm_address_fields = array('country',
            'title', //new field
            'first_name',
            'last_name',
            //'company',
            'address_2',
            'address_1',
            'city',
            'state',
            'postcode');

//global array only for extra fields
    $wdm_ext_fields = array('title',
            'address_3',
            'address_4');

[space]

Step 2: Add Custom Fields to WooCommerce Checkout Page

  • A function will then have to written to add custom fields to checkout page. This function should be written on the ‘woocommerce_default_address_fields’ hook provided by WooCommerce.
     add_filter( 'woocommerce_default_address_fields' , 'wdm_override_default_address_fields' );

     function wdm_override_default_address_fields( $address_fields ){
    
     $temp_fields = array();

     $address_fields['title'] = array(
    'label'     => __('Title', 'woocommerce'),
    'required'  => true,
    'class'     => array('form-row-wide'),
    'type'  => 'select',
    'options'   => array('Mr' => __('Mr', 'woocommerce'), 'Mrs' => __('Mrs', 'woocommerce'), 'Miss' => __('Miss', 'woocommerce'))
     );
     
    $address_fields['address_1']['placeholder'] = '';
    $address_fields['address_1']['label'] = __('Street', 'woocommerce');
    
    $address_fields['address_2']['placeholder'] = '';
    $address_fields['address_2']['label'] = __('Building', 'woocommerce');
    
    $address_fields['address_3'] = array(
    'label' => __('House No / Name', 'woocommerce'),
    'placeholder'=> '',
    'required'   => true,
    'class'      => array('form-row-wide', 'address-field'),
    'type'  => 'text'
     );
      
    $address_fields['address_4'] = array(
    'label' => __('Area', 'woocommerce'),
    'placeholder'=> '',
    'class'     => array('form-row-wide', 'address-field'),
    'type'  => 'text'
     );
           
    global $wdm_address_fields;

    foreach($wdm_address_fields as $fky){       
    $temp_fields[$fky] = $address_fields[$fky];
    }
    
    $address_fields = $temp_fields;
    
    return $address_fields;
}
  • 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.

add-custom-fields-to-WooCommerce-checkout-page

[space]

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

    function wdm_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;
}

[space]

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.
<?php
add_filter( 'woocommerce_order_formatted_billing_address', 'wdm_update_formatted_billing_address', 99, 2);

function wdm_update_formatted_billing_address( $address, $obj ){

    global $wdm_address_fields;
         
    if(is_array($wdm_address_fields)){
        
        foreach($wdm_address_fields as $waf){
            $address[$waf] = $obj->{'billing_'.$waf};
        }
    }
         
    return $address;    
}

add_filter( 'woocommerce_order_formatted_shipping_address', 'wdm_update_formatted_shipping_address', 99, 2);

function wdm_update_formatted_shipping_address( $address, $obj ){

    global $wdm_address_fields;
         
    if(is_array($wdm_address_fields)){
        
        foreach($wdm_address_fields as $waf){
            $address[$waf] = $obj->{'shipping_'.$waf};
        }
    }   
    
    return $address;    
}
?>

[space]

Step 5: Display Fields on Account Page

  • Just like we displayed updated list of fields on the order page the custom fields will also have to be displayed on the user’s account page. This can be done with the following block of code.
<?php
add_filter('woocommerce_my_account_my_address_formatted_address', 'wdm_my_account_address_formatted_address', 99, 3);

function wdm_my_account_address_formatted_address( $address, $customer_id, $name ){
    
    global $wdm_address_fields;
    
    if(is_array($wdm_address_fields)){
        
        foreach($wdm_address_fields as $waf){
            $address[$waf] = get_user_meta( $customer_id, $name.'_'.$waf, true );
        }
    }
    
    return $address;
}
?>

[space]

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');

function wdm_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.

add-custom-fields-to-WooCommerce-checkout-page-single-order-page

[space]

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.

[space]

Praveen Chauhan

Praveen Chauhan

5 Responses

  1. This is great stuff.

    One more thing, how do you then make the new fields viewable and editable from the wordpress “users” on the dashboard?

  2. I found a wonderful plugin which is very easy to customize and add fields to the checkout page, WooCommerce Custom Field Editor Pro by ThemeHigh

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads

    WordPress Tips & Tricks
    Ketan Vyawahare

    How to Make Responsive Tables using CSS without Tag Read More »