How to add custom fields to WooCommerce checkout

WooCommerce checkout consists of basic checkout fields for billing, shipping and order notes but what if we need to add additional fields in the checkout ??

New fields in the WooCommerce checkout can be added using the hooks/filters provided by the WooCommerce plugin.

Required Filter

In WooCommerce checkout billing and shipping fields are passed through “woocommerce_checkout_fields” filter so we can hook our function to add/remove/edit these fields.

Example

Lets suppose we want to add a shipping phone number in the WooCommerce checkout. Add the following code into your theme functions.php

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'wc_shippping_phone' );

// Our hooked in function - $fields is passed via the filter!
function wc_shippping_phone( $fields ) {
     $fields['shipping']['shipping_phone'] = array(
        'label'     => __('Phone', 'woocommerce'),
    'placeholder'   => _x('Phone', 'placeholder', 'woocommerce'),
    'required'  => false,
    'class'     => array('form-row-wide'),
    'clear'     => true
     );

     return $fields;
}

Go to your checkout page and you will shipping phone number there.

Under the hood Woocomemrce take care of saving and displaying the value of your newly created field so you don’t need to worry about this.

Now that we have added our shipping phone number it is time to show this under the order screen. Add the following code into your functions.php

/**
 * Display field value on the order edit page
 */
 
add_action( 'woocommerce_admin_order_data_after_shipping_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 );

function my_custom_checkout_field_display_admin_order_meta($order){
echo '<p><strong>'.__('Shipping Phone').':</strong> ' . get_post_meta( $order->id, '_shipping_phone', true ) . '</p>';
}

With the above code added you can see your shipping phone number on the order screen.

Adding Custom Fields

“woocommerce_checkout_fields” filter is good if you want to add Billing and Shipping fields but when you need to add custom fields outside billing and shipping fields then you need to adopt different approach.

Lets suppose you want to add extra field after the order notes in the checkout. Add the following code into your functions.php file

add_action( 'woocommerce_after_order_notes', 'wc_custom_checkout_field' );

function wc_custom_checkout_field( $checkout ) {

    echo '<div id="my_custom_field_id"><h2>' . __('Your Age') . '</h2>';

    woocommerce_form_field( 'my_field_name', array(
        'type'          => 'text',
        'class'         => array('my-field-class form-row-wide'),
        'label'         => __('Please enter your page'),
        'placeholder'   => __('Age'),
        ), $checkout->get_value( 'my_field_name' ));

    echo '</div>';

}

The above code will add a custom field under order notes.

Now that our custom field is added, add the following code to save it into the datbase

add_action( 'woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta' );

function my_custom_checkout_field_update_order_meta( $order_id ) {
    if ( ! empty( $_POST['my_field_name'] ) ) {
        update_post_meta( $order_id, 'My Field', sanitize_text_field( $_POST['my_field_name'] ) );
    }
}

Our newly created field is now saved into the database with other fields.