Add Different Field Types To Checkout Page in WooCommerce

The code snippets on this page enable you to add different custom field types to your WooCommerce checkout page.

Note : The code in this post for adding custom fields works with the legacy woocommerce checkout shortcode NOT with the new block checkout which requires a plugin like this to add custom fields.

Field types include :

• Text Area
• Text
• Date Picker
• Checkbox
• Select
• Radio buttons

Text Area

This code adds a text area after the order notes.

add_action( 'woocommerce_after_order_notes', 'add_custom_checkout_field' );
function add_custom_checkout_field( $checkout ) {
    echo '<div id="custom_checkout_field"><h3>' . __('Extra Info') . '</h3>';

    woocommerce_form_field( 'delivery_instructions', array(
        'type'        => 'textarea',
        'class'       => array( 'form-row-wide' ),
        'label'       => __( 'Delivery Instructions' ),
        'placeholder' => __( 'Add any specific delivery instructions here' ),
        'required'    => false,
    ), $checkout->get_value( 'delivery_instructions' ) );

    echo '</div>';
}

add_action( 'woocommerce_checkout_process', 'validate_custom_checkout_field' );
function validate_custom_checkout_field() {
    // Add validation if field is required
    if ( isset($_POST['delivery_instructions']) && strlen($_POST['delivery_instructions']) > 500 ) {
        wc_add_notice( __( 'Delivery instructions are too long.' ), 'error' );
    }
}

add_action( 'woocommerce_checkout_update_order_meta', 'save_custom_checkout_field' );
function save_custom_checkout_field( $order_id ) {
    if ( ! empty( $_POST['delivery_instructions'] ) ) {
        update_post_meta( $order_id, '_delivery_instructions', sanitize_textarea_field( $_POST['delivery_instructions'] ) );
    }
}

add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_field_admin_order', 10, 1 );
function display_custom_field_admin_order( $order ) {
    $value = get_post_meta( $order->get_id(), '_delivery_instructions', true );
    if ( $value ) {
        echo '<p><strong>' . __( 'Delivery Instructions' ) . ':</strong> ' . nl2br( esc_html( $value ) ) . '</p>';
    }
}

Text

The following code adds a text field to the billing details

add_filter( 'woocommerce_checkout_fields', 'add_custom_billing_text_field' );
function add_custom_billing_text_field( $fields ) {
    $fields['billing']['billing_custom_text'] = array(
        'type'        => 'text',
        'label'       => __( 'Custom Text Field', 'woocommerce' ),
        'placeholder' => __( 'Enter your info here', 'woocommerce' ),
        'required'    => false,
        'class'       => array( 'form-row-wide' ),
        'priority'    => 120,
    );
    return $fields;
}

add_action( 'woocommerce_checkout_update_order_meta', 'save_custom_billing_text_field' );
function save_custom_billing_text_field( $order_id ) {
    if ( isset( $_POST['billing_custom_text'] ) ) {
        update_post_meta( $order_id, '_billing_custom_text', sanitize_text_field( $_POST['billing_custom_text'] ) );
    }
}

add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_billing_text_field_admin', 10, 1 );
function display_custom_billing_text_field_admin( $order ) {
    $value = get_post_meta( $order->get_id(), '_billing_custom_text', true );
    if ( $value ) {
        echo '<p><strong>' . __( 'Custom Text Field' ) . ':</strong> ' . esc_html( $value ) . '</p>';
    }
}

Date Picker

And this code adds a preferred delivery date picker

add_filter( 'woocommerce_checkout_fields', 'add_billing_datepicker_field' );
function add_billing_datepicker_field( $fields ) {
    $fields['billing']['billing_delivery_date'] = array(
        'type'        => 'text',
        'label'       => __( 'Preferred Delivery Date', 'woocommerce' ),
        'placeholder' => __( 'Select a date', 'woocommerce' ),
        'required'    => false,
        'class'       => array( 'form-row-wide' ),
        'clear'       => true,
        'priority'    => 130,
    );
    return $fields;
}

add_action( 'woocommerce_checkout_update_order_meta', 'save_billing_datepicker_field' );
function save_billing_datepicker_field( $order_id ) {
    if ( ! empty( $_POST['billing_delivery_date'] ) ) {
        update_post_meta( $order_id, '_billing_delivery_date', sanitize_text_field( $_POST['billing_delivery_date'] ) );
    }
}

add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_billing_datepicker_admin_order', 10, 1 );
function display_billing_datepicker_admin_order( $order ) {
    $value = get_post_meta( $order->get_id(), '_billing_delivery_date', true );
    if ( $value ) {
        echo '<p><strong>' . __( 'Preferred Delivery Date' ) . ':</strong> ' . esc_html( $value ) . '</p>';
    }
}


add_action( 'wp_enqueue_scripts', 'enqueue_datepicker_script' );
function enqueue_datepicker_script() {
    if ( is_checkout() ) {
        wp_enqueue_script( 'jquery-ui-datepicker' );
        wp_enqueue_style( 'jquery-ui-style', 'https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css' );
        wp_add_inline_script( 'jquery-ui-datepicker', "
            jQuery(function($) {
                $('#billing_delivery_date').datepicker({
                    dateFormat: 'yy-mm-dd',
                    minDate: 0
                });
            });
        " );
    }
}

Checkbox

This code adds a subscribe to newsletter checkbox

add_filter( 'woocommerce_checkout_fields', 'add_billing_checkbox_field' );
function add_billing_checkbox_field( $fields ) {
    $fields['billing']['billing_subscribe_newsletter'] = array(
        'type'     => 'checkbox',
        'label'    => __( 'Subscribe to our newsletter', 'woocommerce' ),
        'required' => false,
        'class'    => array( 'form-row-wide' ),
        'clear'    => true,
        'priority' => 140,
    );
    return $fields;
}

add_action( 'woocommerce_checkout_update_order_meta', 'save_billing_checkbox_field' );
function save_billing_checkbox_field( $order_id ) {
    $value = isset( $_POST['billing_subscribe_newsletter'] ) ? 'yes' : 'no';
    update_post_meta( $order_id, '_billing_subscribe_newsletter', $value );
}

add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_billing_checkbox_admin_order', 10, 1 );
function display_billing_checkbox_admin_order( $order ) {
    $value = get_post_meta( $order->get_id(), '_billing_subscribe_newsletter', true );
    echo '<p><strong>' . __( 'Subscribed to Newsletter' ) . ':</strong> ' . ( $value === 'yes' ? 'Yes' : 'No' ) . '</p>';
}

Select

This code adds a how did you hear about us select field

add_filter( 'woocommerce_checkout_fields', 'add_hear_about_us_dropdown' );
function add_hear_about_us_dropdown( $fields ) {
    $fields['billing']['billing_hear_about_us'] = array(
        'type'     => 'select',
        'label'    => __( 'How did you hear about us?', 'woocommerce' ),
        'required' => false,
        'class'    => array( 'form-row-wide' ),
        'options'  => array(
            ''               => __( 'Please select', 'woocommerce' ),
            'google'         => __( 'Google Search', 'woocommerce' ),
            'facebook'       => __( 'Facebook', 'woocommerce' ),
            'instagram'      => __( 'Instagram', 'woocommerce' ),
            'friend'         => __( 'Friend or Family', 'woocommerce' ),
            'newsletter'     => __( 'Email Newsletter', 'woocommerce' ),
            'other'          => __( 'Other', 'woocommerce' ),
        ),
        'priority' => 150,
    );
    return $fields;
}

add_action( 'woocommerce_checkout_update_order_meta', 'save_hear_about_us_field' );
function save_hear_about_us_field( $order_id ) {
    if ( isset( $_POST['billing_hear_about_us'] ) ) {
        update_post_meta( $order_id, '_billing_hear_about_us', sanitize_text_field( $_POST['billing_hear_about_us'] ) );
    }
}

add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_hear_about_us_in_admin', 10, 1 );
function display_hear_about_us_in_admin( $order ) {
    $value = get_post_meta( $order->get_id(), '_billing_hear_about_us', true );
    if ( $value ) {
        echo '<p><strong>' . __( 'Heard About Us From' ) . ':</strong> ' . esc_html( ucwords( str_replace( '_', ' ', $value ) ) ) . '</p>';
    }
}

Radio

This code adds radio buttons

add_filter( 'woocommerce_checkout_fields', 'add_billing_contact_method_radio' );
function add_billing_contact_method_radio( $fields ) {
    $fields['billing']['billing_contact_method'] = array(
        'type'     => 'radio',
        'label'    => __( 'Preferred Contact Method', 'woocommerce' ),
        'required' => true,
        'class'    => array( 'form-row-wide' ),
        'options'  => array(
            'email'   => __( 'Email', 'woocommerce' ),
            'phone'   => __( 'Phone', 'woocommerce' ),
            'none'    => __( 'Do not contact me', 'woocommerce' ),
        ),
        'priority' => 160,
    );
    return $fields;
}

add_action( 'woocommerce_checkout_update_order_meta', 'save_billing_contact_method_radio' );
function save_billing_contact_method_radio( $order_id ) {
    if ( isset( $_POST['billing_contact_method'] ) ) {
        update_post_meta( $order_id, '_billing_contact_method', sanitize_text_field( $_POST['billing_contact_method'] ) );
    }
}

add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_billing_contact_method_radio_admin', 10, 1 );
function display_billing_contact_method_radio_admin( $order ) {
    $value = get_post_meta( $order->get_id(), '_billing_contact_method', true );
    if ( $value ) {
        echo '<p><strong>' . __( 'Preferred Contact Method' ) . ':</strong> ' . esc_html( ucfirst( $value ) ) . '</p>';
    }
}

add_action( 'wp_head', 'custom_checkout_radio_inline_css' );
function custom_checkout_radio_inline_css() {
    // Only add CSS on the checkout page
    if ( is_checkout() ) {
        ?>
        <style>
        #billing_contact_method_field .woocommerce-input-wrapper {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            align-items: center;
        }

        #billing_contact_method_field .woocommerce-input-wrapper input[type="radio"],
        #billing_contact_method_field .woocommerce-input-wrapper label.radio {
            margin: 0;
            display: inline-flex;
            align-items: center;
        }

        #billing_contact_method_field .woocommerce-input-wrapper label.radio {
            margin-left: 0.25rem;
            margin-right: 1rem;
        }

        #billing_contact_method_field .required {
            margin-left: 0.15em;
        }
        </style>
        <?php
    }
}

Very Closely Related Solutions

• Conditional Fields For Contact Block Using Block Checkout
• Block Checkout Fields Plugin for WooCommerce
• Checkout Page Image Upload Field Plugin for WooCommerce
• Add Field To WooCommerce Checkout Block Address Location Conditionally