WooCommerce: Add A New Checkout Field.

To add a new checkout field in WooCommerce, you can use the `woocommerce_after_order_notes` action hook to display the new field on the checkout page. Additionally, you’ll need to use the `woocommerce_checkout_process` and `woocommerce_checkout_update_order_meta` filter hooks to handle the validation and saving of the field data.

To add a new checkout field with various `woocommerce_form_field` types (text, select, textarea, number, email, checkbox, radio, etc.), you can customize the `custom_add_checkout_field` function to include different field types based on your requirements.

Here’s an example of how to add a new checkout field with different `woocommerce_form_field` types:

// Step 1: Display the new checkout fields on the checkout page
function custom_add_checkout_field() {
    echo '<div id="custom_checkout_field">';
    
    // Text Field
    woocommerce_form_field('custom_text_field', array(
        'type' => 'text',
        'class' => array('my-field-class form-row-wide'),
        'label' => __('Custom Text Field', 'text-domain'),
        'placeholder' => __('Enter your text', 'text-domain'),
        'required' => true, // Set to true if the field is required
    ), '');
    
    // Select Field
    woocommerce_form_field('custom_select_field', array(
        'type' => 'select',
        'class' => array('my-field-class form-row-wide'),
        'label' => __('Custom Select Field', 'text-domain'),
        'required' => true, // Set to true if the field is required
        'options' => array(
            '' => __('Select an option', 'text-domain'),
            'option_1' => __('Option 1', 'text-domain'),
            'option_2' => __('Option 2', 'text-domain'),
            'option_3' => __('Option 3', 'text-domain'),
        ),
    ), '');
    
    // Textarea Field
    woocommerce_form_field('custom_textarea_field', array(
        'type' => 'textarea',
        'class' => array('my-field-class form-row-wide'),
        'label' => __('Custom Textarea Field', 'text-domain'),
        'placeholder' => __('Enter your text', 'text-domain'),
        'required' => true, // Set to true if the field is required
    ), '');
    
    // Checkbox Field
    woocommerce_form_field('custom_checkbox_field', array(
        'type' => 'checkbox',
        'class' => array('my-field-class form-row-wide'),
        'label' => __('Custom Checkbox Field', 'text-domain'),
        'required' => false, // Set to true if the field is required
    ), '');
    
    // Radio Field
    woocommerce_form_field('custom_radio_field', array(
        'type' => 'radio',
        'class' => array('my-field-class form-row-wide'),
        'label' => __('Custom Radio Field', 'text-domain'),
        'options' => array(
            'option_1' => __('Option 1', 'text-domain'),
            'option_2' => __('Option 2', 'text-domain'),
            'option_3' => __('Option 3', 'text-domain'),
        ),
        'default' => 'option_1', // Set the default selected option
        'required' => true, // Set to true if the field is required
    ), '');
    
    echo '</div>';
}
add_action('woocommerce_after_order_notes', 'custom_add_checkout_field');

// Step 2: Validate the new checkout fields during checkout
function custom_validate_checkout_fields($posted_data) {
    $custom_text = sanitize_text_field($posted_data['custom_text_field']);
    $custom_select = $posted_data['custom_select_field'];
    $custom_textarea = sanitize_textarea_field($posted_data['custom_textarea_field']);
    $custom_checkbox = isset($posted_data['custom_checkbox_field']) ? 1 : 0;
    $custom_radio = sanitize_text_field($posted_data['custom_radio_field']);
    
    if (empty($custom_text)) {
        wc_add_notice(__('Please enter a value for the custom text field.', 'text-domain'), 'error');
    }
    
    if (empty($custom_select) || $custom_select === '') {
        wc_add_notice(__('Please select an option for the custom select field.', 'text-domain'), 'error');
    }
    
    if (empty($custom_textarea)) {
        wc_add_notice(__('Please enter a value for the custom textarea field.', 'text-domain'), 'error');
    }
    
    // Add additional validation rules for other fields if needed
    
    // Check for any errors and display them
    if (wc_notice_count('error') > 0) {
        wc_print_notices();
    }
}
add_action('woocommerce_checkout_process', 'custom_validate_checkout_fields');

// Step 3: Save the new checkout fields to the order meta
function custom_save_checkout_fields($order_id) {
    $custom_text = sanitize_text_field($_POST['custom_text_field']);
    $custom_select = $_POST['custom_select_field'];
    $custom_textarea = sanitize_textarea_field($_POST['custom_textarea_field']);
    $custom_checkbox = isset($_POST['custom_checkbox_field']) ? 1 : 0;
    $custom_radio = sanitize_text_field($_POST['custom_radio_field']);
    
    // Save the fields to the order meta
    update_post_meta($order_id, 'Custom Text Field', $custom_text);
    update_post_meta($order_id, 'Custom Select Field', $custom_select);
    update_post_meta($order_id, 'Custom Textarea Field', $custom_textarea);
    update_post_meta($order_id, 'Custom Checkbox Field', $custom_checkbox);
    update_post_meta($order_id, 'Custom Radio Field', $custom_radio);
}
add_action('woocommerce_checkout_update_order_meta', 'custom_save_checkout_fields');

In this example, we have added fields with different woocommerce_form_field types: text, select, textarea, checkbox, and radio. The validation rules are implemented in the custom_validate_checkout_fields function, and the data is saved to the order meta using the custom_save_checkout_fields function.