Required custom WooCommerce checkout fields don't validate entered value

Question

I\'m adding WooCommerce custom checkout fields in a Storefront child theme functions.php file.
They have a \"required\" attribute.
The ai

Answer 1

As you can read in woocommerce_before_checkout_form hook, it's before checkout form (so outside the checkout form). For this reason this custom field can't work in this hook.

You can use instead woocommerce_checkout_update_order_meta action hook, making some little changes in your code as there is no $checkout argument available in it.

This will display the field "at the top of the page, before the billing fields"…

So your complete code should be now:

/**
 * Add the field to the checkout
 */
add_action( 'woocommerce_checkout_before_customer_details', 'my_custom_checkout_fields' );

function my_custom_checkout_fields() {

    echo '
' . __('name') . '
';

    woocommerce_form_field( 'developer_name', array(
        'type'          => 'text',
        'class'         => array('developer_name-class form-row form-row-first'),
        'label'         => __('name'),
        'placeholder'   => __('fill in your name'),
        'required'      => true,
    ), WC()->checkout->get_value( 'developer_name' ));

    echo '
';

}

/**
 * Process the checkout
 */
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');

function my_custom_checkout_field_process() {
    // Check if set, if its not set add an error.
    if ( ! $_POST['developer_name'] )
        wc_add_notice( __( 'Please fill in your name.' ), 'error' );
}


// Update the order meta with field value
add_action( 'woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta', 10, 1 );
function my_custom_checkout_field_update_order_meta( $order_id ) {
    if ( ! empty( $_POST['developer_name'] ) ) {
        update_post_meta( $order_id, 'Developer name', sanitize_text_field( $_POST['developer_name'] ) );
    }
}

// Display the custom-field in orders view
add_action( 'woocommerce_order_details_after_customer_details', 'display_my_custom_field_in_orde_details', 10, 1 );
function display_my_custom_field_in_orde_details( $order ) {

    $developer_name = get_post_meta( $order->get_id(), 'Developer name',  true );

    if ( ! empty( $developer_name ) ):
    ?>
        

            

                
Developer name:
                

            
        
    

This code goes in function.php file of your active child theme (or theme) or also in any plugin file.

This code is tested and works for WooCommerce version 3.0+