How to reconfigure and rearrange WooCommerce checkout fields – Part 1

In this tutorial I’ll talk about reordering WooCommerce checkout fields using php which also include custom WooComerce fields. The solution had worked for me for WooCommerce 2.x and works on the current version 3.0 as well 

Overview

One of my projects required memberships and concert seats to be sold online using WooCoomerce. But I won’t be discussing that today. Instead I’ll be discussing something that was eventually very simple but I had almost given up on. The requirement was to present the WooCommerce checkout fields in a custom order. There is an addon for this but at that time (2014) it was relatively new, and the budget was tight. After hours of hunting on the web I found a code snippet that saved the day. 

Part 1 – Woocommerce-Customizations.php

This will cover the basic requirement, setup and best practices. Here is how the final checkout page looked like –

We’ll be writing a lot of custom code for requirements like these, and it’s not the best option to constantly bloat functions.php. WooCommerce has suggested best practices, and a child theme and plugin architecutre are the recommended ways. I only and always use WordPress child themes on the Genesis framework. For this job I didn’t use a plugin; instead I kept all of the WooCommerce customizations in a separate php file – woocommerce-customizations.php

Basic Setup

We will use the WooCommerce template structure for customizing their pages. We will only be altering the checkout page, and so copying all the template files didn’t make sense. As WooComemerce updates, it eventually updates the template files as well (not the template files in your theme’s folder), and you’ll have to keep a track and update the template files in your theme’s folder to maintain compatibility. We want to modify the order of the fields on checkout page which is controlled by form-billing.php

To override this file, first create the following directory stucture woocommerce/checkout/ in your Child theme’s directory as below:

 wp-content/themes/yourtheme/woocommerce/checkout/

Now copy form-billing.php from the WooCommerce plugins directory – wp-content/plugins/woocommerce/templates/checkout to the woocommerce/checkout/ directory under your theme’s directory. This is how it should look like:

wp-content/themes/yourtheme/woocommerce/checkout/form-billing.php

I also made a woocommerce-customizations.php file inside wp-content/themes/yourtheme/woocommerce which will hold all our customziations to WooCommerce

Add the following to your functions.php to load this file.

Creating WooCommerce custom fields

The WooCommerce documentation has the internals well explained. Before rearranging the checkout field, a few additional fields were required. These included – title of the person (mandatory field), additional text box for address, option buttons for newsletters and to receive emails.

The following code snippet does this for us. I have put these in woocommerce-customizations.php, you could use functions.php as well.

function nds_configure_checkout_fields( $fields ) {
    
    $fields['billing']['title'] = array(
    'label'         => __('Prefix','woocommerce'),
    'placeholder'   => _x('Mr, Captain, etc.', 'placeholder', 'woocommerce'),        
    'class'     => array('form-row-first'),      
    'required'  => true,
    'autofocus'  => true, //controls the default textbox to autofocus on
    'clear' => false,
     );

    $fields['billing']['newsletter'] = array(
        'label'         => __('Send me a hard copy of the newsletter', 'woocommerce'),
        'type'          => 'checkbox',
        'class'         => array('input-checkbox'),        
        'required'  => false,
     );

    $fields['billing']['receive_emails'] = array(
        'label'         => __('Send me emails', 'woocommerce'),
        'type'          => 'checkbox',
        'class'         => array('input-checkbox'),        
        'required'  => false        
     );

    $fields['billing']['billing_address_3'] = array(        
    'placeholder'   => _x('Address Line 3 (Optional)', 'placeholder', 'woocommerce'),
    'required'  => false,
    'class'     => array('form-row-wide'),
    'clear'     => true
     ); 
    return $fields;    
}
add_filter('woocommerce_checkout_fields', 'nds_configure_checkout_fields', 15);

Reconfiguring existing WooCommerce fields

I also wanted to reconfigure the labels and placeholders of the existing woocommerce fields.

function nds_override_default_address_fields($address_fields) {
    
    $address_fields['address_2']['placeholder'] = _x('Address Line 2 (Optional)', 'placeholder', 'woocommerce');    
    $address_fields['city']['label'] = _x('City', 'woocommerce');
    $address_fields['city']['placeholder'] = _x('City', 'woocommerce');   
    $address_fields['state']['label'] = _x('State', 'woocommerce'); 
    $address_fields['postcode']['label'] = _x('Zipcode', 'woocommerce');
    $address_fields['postcode']['placeholder'] = _x('Zipcode', 'woocommerce');
    
    return $address_fields; 
}
add_filter( 'woocommerce_default_address_fields' , 'nds_override_default_address_fields' );

You will also need to save the meta for each of your custom fields with the order. The documentation on their website has that covered as well.

function nds_save_order_field_meta( $order_id ) {
    if ( ! empty( $_POST['title'] ) ) {
        update_post_meta( $order_id, 'title', sanitize_text_field( $_POST['title'] ) );        
    }
        if ( ! empty( $_POST['newsletter'] ) ) {
        update_post_meta( $order_id, 'newsletter', sanitize_text_field( $_POST['newsletter'] ) );       
    }
    //and so on
}
add_action( 'woocommerce_checkout_update_order_meta', 'nds_save_order_field_meta' );

In another tutorial I will discuss how to associate the custom fields with the WordPress user meta, and also show the custom fields in the User’s profile as well as in the Dashboard.

Part 2 of this tutorial will cover the rearranging bit of all our woocommerce checkout fields.