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