Add custom checkout fields in WooCommerce

You can add many fields in the billing and shipping form by following snippets but what if we want to add fields outside it on the checkout form so to do that follow this code. In the below image check the default fields provided.

Before applying snippet

Now let’s add the field to the form. Add the following to the function.php in your child theme.

 * Add delivery date picker on the Checkout page, after order note

function wps_delivery_date_picker_checkout_field( $checkout ) {

    echo '<div id="delivery_date_checkout_field">';

    woocommerce_form_field( 'order_delivery_date', array(
        'type'          => 'text',
        'class'         => array('delivery-date-class form-row-wide'),
        'label'         => __('Delivery Date'),
        'placeholder'   => __('04/26/2020'),
        ), $checkout->get_value( 'order_delivery_date' ));

    echo '</div>';


add_action('woocommerce_after_order_notes', 'wps_delivery_date_picker_checkout_field' );

 * Update the order meta with a field value

function wps_save_delivery_date_to_order_detail( $order_id ) {

    if ( ! empty( $_POST['order_delivery_date'] ) ) {
        update_post_meta( $order_id, 'order_delivery_date', sanitize_text_field( 
        $_POST['order_delivery_date'] ) );


add_action( 'woocommerce_checkout_update_order_meta', 'wps_save_delivery_date_to_order_detail' );

 * Show custom field value in the order detail

function wps_show_delivery_date_in_order_detail($order){

    echo '<p><strong>'.__('Delivery Date').':</strong> ' . get_post_meta( 
    $order->id, 'order_delivery_date', true ) . '</p>';


add_action( 'woocommerce_admin_order_data_after_billing_address', 'wps_show_delivery_date_in_order_detail', 10, 1 );
After applying snippet

Edit WooCommerce Products from Frontend

Leave a Comment

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

Scroll to Top