Reading list Switch to dark mode

    Add Custom Fields WooCommerce Checkout Page

    Updated 31 May 2023

    Add Custom Fields WooCommerce Checkout Page – In this post we’ll see how we can add custom fields to checkout page in WooCommerce.

    Now question arises that why we need custom fields on checkout page. Sometimes, we need some extra information from customer like delivery time priority, shipping address is of office address or residence, etc.

    We’ll perform this by creating one test plugin and with the help of filters and actions. WooCommerce provides hooks which can be used to add custom fields on WooCommerce Checkout Page.

    Let’s start with example plugin –

     *  Plugin Name: Custom Checkout Field Webkul
     *  Description: A plugin to add custom field in checkout form
     *  Author: Webkul
     *  Author URI:
    add_filter( 'woocommerce_checkout_fields', 'wk_add_custom_checkout_field' );
    function wk_add_custom_checkout_field( $fields ) {
      return $fields;

    In above code snippet, we added filter on hook ‘woocommerce_checkout_fields’ and return all default fields in callback function. This is a filter so it provides all default fields and we can append our custom field data in this array.

    Searching for an experienced
    WordPress Company ?
    Find out More

    Lets add one custom field to shipping address section for address type. After that we’ll see how we can add special custom field other than with default one’s.

    add_filter( 'woocommerce_checkout_fields', 'wk_add_custom_checkout_field' );
    function wk_add_custom_checkout_field( $fields ) {
      $fields['shipping']['address_type'] = array(
        'label'     => __( 'Address Type', 'example' ),
        'type'      => 'text',
        'placeholder'   => _x( 'Type', 'placeholder', 'example'),
        'required'  => false,
        'class'     => array( 'address-type' ),
        'clear'     => true
      return $fields;

    In above code, we define arguments for our custom field like label, type, placeholder, etc.

    This will add a field labeled Address Type in shipping address section. Please check below –

    Add Custom Fields WooCommerce Checkout Page

    Now, if we want to add special or we can say separate custom field from default sections then we can do so by adding action on hook ‘woocommerce_after_order_notes’. Like this –


    add_action( 'woocommerce_after_order_notes', 'wk_add_custom_checkout_field' );
    function wk_add_custom_checkout_field( $checkout ) {
      echo '<div><h2>' . __( 'Shipping Address Type' ) . '</h2>';
      woocommerce_form_field( 'address_type', array(
          'type'          => 'text',
          'class'         => array( 'address-type' ),
          'label'         => __( 'Address Type' ),
          'placeholder'   => __( 'type' ),
        ), $checkout->get_value( 'address_type' ) );
      echo '</div>';

    This will add the field after order notes section. Check below –

    Now, we’ll see how to save these custom fields data. For this, we can use action hook ‘woocommerce_checkout_update_order_meta’.

    add_action( 'woocommerce_checkout_update_order_meta', 'wk_save_custom_field_data' );
    function wk_save_custom_field_data( $order_id ) {
        if ( ! empty( $_POST['address_type'] ) ) {
            update_post_meta( $order_id, 'address_type', sanitize_text_field( $_POST['address_type'] ) );

    We saved custom field data as metadata to order.

    Reference –


    Still have any issue feel free to add a ticket and let us know your views to make the code better

    Thanks for Your Time! Have a Good Day!

    . . .

    Leave a Comment

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

    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content