Add New Fields to WooCommerce Checkout Form

Start by adding a new field to the billing checkout form

add_filter( 'woocommerce_checkout_fields' , 'dc_extra_checkout_fields' );

function dc_extra_checkout_fields( $fields ) {
     $fields['billing']['billing_new_field'] = 
        array(
            'label'         => __('New Field', 'woocommerce'),
            'placeholder'   => _x( 'New Field', 'placeholder', 'woocommerce' ),
            'required'      => false,
            'clear'         => true
         );

     return $fields;
}

I end up with a new input field that looks like:


Now, we need to save the value of that field to the user_meta table, like so:

add_action( 'woocommerce_checkout_process', 'dc_billing_fields_save', 10, 1 );

function dc_billing_fields_save( $user_id ){
    if ( isset( $_POST['billing_new_field'] ) ) {
        update_user_meta( $user_id, 'billing_new_field', $_POST['billing_new_field'] );
    }
}

Now that data is stored in user_meta, we need to hook in to the profile area to display it and allow it to be edited by the user or admins.

add_action( 'show_user_profile', 'dc_update_user_profile' );
add_action( 'edit_user_profile', 'dc_update_user_profile' );

function dc_update_user_profile( $user ){ ?>

Additional Fields

add_action( 'personal_options_update', 'dc_save_extra_fields' );
add_action( 'edit_user_profile_update', 'dc_save_extra_fields' );

function dc_save_extra_fields( $user_id ){
    update_user_meta( $user_id, 'billing_new_field', sanitize_text_field( $_POST['billing_new_field'] ) );
}

I chose to break my additional fields into their own table just above the default Woocommerce fields as I have many of them and they are more specific to the user rather than the order processing itself, so I keep them organized in their own table titled “Additional Fields”.

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *