Add a new custom field to WooCommerce checkout

Question

I have the code that should work, but for some reason it doesnt. I want to add a new custom field called "City" under Woocommerce checkout, using this code:

    // Display a custom checkout select field after Billing form
add_action( 'woocommerce_after_checkout_billing_form', 'my_custom_checkout_field', 10, 1 );
function my_custom_checkout_field( $checkout ) {
    echo '<div id="my_custom_checkout_field">
    ' . __('City') . '';

    woocommerce_form_field( 'delivery_date', array(
        'type'          => 'select',
        'options'     => array(
            'Colombo 01' => __('Colombo 01', 'woocommerce' ),
            'Colombo 02' => __('Colombo 02', 'woocommerce' ),
            'Colombo 03' => __('Colombo 03', 'woocommerce' ),
            'Colombo 04' => __('Colombo 04', 'woocommerce' ),
            'Colombo 06' => __('Colombo 06', 'woocommerce' ),
            'Colombo 07' => __('Colombo 07', 'woocommerce' ),
            'Colombo 08' => __('Colombo 08', 'woocommerce' ),
            'Colombo 09' => __('Colombo 09', 'woocommerce' ),
            'Colombo 10' => __('Colombo 10', 'woocommerce' ),
            'Colombo 11' => __('Colombo 11', 'woocommerce' ),
            'Colombo 01' => __('Colombo 01', 'woocommerce' ),
            'Dehiwela' => __('Dehiwela', 'woocommerce' ),
            'Attidiya' => __('Attidiya', 'woocommerce' ),
            'Mount Lavinia' => __('Mount Lavinia', 'woocommerce' ),
            'Ratmalana' => __('Ratmalana', 'woocommerce' ),
            'Maligawatte' => __('Maligawatte', 'woocommerce' ),
            'Kotikawatta' => __('Kotikawatta', 'woocommerce' ),
            'Rajagiriya' => __('Rajagiriya', 'woocommerce' ),
            'Peliyagoda' => __('Peliyagoda', 'woocommerce' ),
            'Kelaniya' => __('Kelaniya', 'woocommerce' ),
            'Kiribathgoda' => __('Kiribathgoda', 'woocommerce' ),
            'Wattala' => __('Wattala', 'woocommerce' )),
        'class'         => array('my-field-class form-row-wide'),
        'placeholder'   => __('Select City'),
        ), $checkout->get_value( 'city_custom' ));

    echo '</div>';
}

// Save the dropdown custom field selected value as order custom meta data:
add_action( 'woocommerce_checkout_create_order', 'my_custom_checkout_field_update_order_meta', 10, 2 );
function my_custom_checkout_field_update_order_meta( $order, $data ) {
    if ( isset($_POST['city_custom']) && ! empty($_POST['city_custom']) ) {
        $order->update_meta_data( 'City', sanitize_text_field( $_POST['city_custom'] ) );
    } 
}

// Display the custom field value on admin order pages after billing adress:
add_action( 'woocommerce_admin_order_data_after_billing_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 );
function my_custom_checkout_field_display_admin_order_meta( $order ) {
    echo '<p><strong>'.__('City').':</strong> ' . $order->get_meta('city_custom') . '</p>'; 
}

// Display the custom field value on email notifications:
add_action( 'woocommerce_email_after_order_table', 'custom_woocommerce_email_order_meta_fields', 10, 4 );
function custom_woocommerce_email_order_meta_fields( $order, $sent_to_admin, $plain_text, $email ) {
    echo '<p><strong>'.__('City').':</strong> ' . $order->get_meta('city_custom') . '</p>';
}

but for some reason, i cant see into order details into backend (cust see City as label, but without selected data from customer) , and in mail too.. Also is possible to show this value into other billing inforamtions too? Some help here? i use latest Woocommerce 4.0.1

Many thanks

replace the slug delivery_date by city_custom in your first function, and it should work — LoicTheAztec
Do that , and placed the new order, but still empty without sellected data. See. i.imgur.com/BYs6vBw.png?1 also in mail i.imgur.com/bXGjcPv.png — DrMTR

7uc1f3r 7uc1f3r · Accepted Answer · 2020-04-14T13:19:15

You're using delivery_date, city_custom & Citymixed up, this gives you different values, so that is your problem

// Display a custom checkout select field after Billing form
add_action( 'woocommerce_after_checkout_billing_form', 'my_custom_checkout_field', 10, 1 );
function my_custom_checkout_field( $checkout ) {
    echo '<div id="my_custom_checkout_field">
    ' . __('City') . '';

    woocommerce_form_field( 'city_custom', array(
        'type'          => 'select',
        'options'     => array(
            'Colombo 01' => __('Colombo 01', 'woocommerce' ),
            'Colombo 02' => __('Colombo 02', 'woocommerce' ),
            'Colombo 03' => __('Colombo 03', 'woocommerce' ),
            'Colombo 04' => __('Colombo 04', 'woocommerce' ),
            'Colombo 06' => __('Colombo 06', 'woocommerce' ),
            'Colombo 07' => __('Colombo 07', 'woocommerce' ),
            'Colombo 08' => __('Colombo 08', 'woocommerce' ),
            'Colombo 09' => __('Colombo 09', 'woocommerce' ),
            'Colombo 10' => __('Colombo 10', 'woocommerce' ),
            'Colombo 11' => __('Colombo 11', 'woocommerce' ),
            'Colombo 01' => __('Colombo 01', 'woocommerce' ),
            'Dehiwela' => __('Dehiwela', 'woocommerce' ),
            'Attidiya' => __('Attidiya', 'woocommerce' ),
            'Mount Lavinia' => __('Mount Lavinia', 'woocommerce' ),
            'Ratmalana' => __('Ratmalana', 'woocommerce' ),
            'Maligawatte' => __('Maligawatte', 'woocommerce' ),
            'Kotikawatta' => __('Kotikawatta', 'woocommerce' ),
            'Rajagiriya' => __('Rajagiriya', 'woocommerce' ),
            'Peliyagoda' => __('Peliyagoda', 'woocommerce' ),
            'Kelaniya' => __('Kelaniya', 'woocommerce' ),
            'Kiribathgoda' => __('Kiribathgoda', 'woocommerce' ),
            'Wattala' => __('Wattala', 'woocommerce' )),
        'class'         => array('my-field-class form-row-wide'),
        'placeholder'   => __('Select City'),
        ), $checkout->get_value( 'city_custom' ));

    echo '</div>';
}

// Save the dropdown custom field selected value as order custom meta data:
add_action( 'woocommerce_checkout_create_order', 'my_custom_checkout_field_update_order_meta', 10, 2 );
function my_custom_checkout_field_update_order_meta( $order, $data ) {
    if ( isset($_POST['city_custom']) && ! empty($_POST['city_custom']) ) {
        $order->update_meta_data( 'city', sanitize_text_field( $_POST['city_custom'] ) );
    } 
}

// Display the custom field value on admin order pages after billing adress:
add_action( 'woocommerce_admin_order_data_after_billing_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 );
function my_custom_checkout_field_display_admin_order_meta( $order ) {
    echo '<p><strong>'.__('City').':</strong> ' . $order->get_meta('city') . '</p>'; 
}

// Display the custom field value on email notifications:
add_action( 'woocommerce_email_after_order_table', 'custom_woocommerce_email_order_meta_fields', 10, 4 );
function custom_woocommerce_email_order_meta_fields( $order, $sent_to_admin, $plain_text, $email ) {
    echo '<p><strong>'.__('City').':</strong> ' . $order->get_meta('city') . '</p>';
}

Add a new custom field to WooCommerce checkout

1 Answers