How to add a custom field to checkout tab in woocommerce?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

function custom_checkout_field($fields) {
    $fields['extra_field'] = array(
        'type' => 'text',
        'label' => 'Custom Field Label',
        'placeholder' => 'Custom Field Placeholder',
    );
    
    return $fields;
}
add_filter('woocommerce_checkout_fields', 'custom_checkout_field');

1
2
3
4
5
6
7
8

function display_custom_checkout_field() {
    woocommerce_form_field('extra_field', array(
        'type' => 'text',
        'label' => 'Custom Field Label',
        'placeholder' => 'Custom Field Placeholder',
    ), WC()->checkout->get_value('extra_field'));
}
add_action('woocommerce_after_order_notes', 'display_custom_checkout_field');

1
2
3
4
5
6

function save_custom_checkout_field($order_id) {
    if (!empty($_POST['extra_field'])) {
        update_post_meta($order_id, 'Extra Field', esc_attr($_POST['extra_field']));
    }
}
add_action('woocommerce_checkout_update_order_meta', 'save_custom_checkout_field');