Adding an additional custom field in Woocommerce Edit Account page

Question

IN WooCommerce, I have been able to add a custom fields in Edit Account page. I have tried adding a 2nd custom field "Favorite Color 2" but I ca't get it working, There is something that I am doing wrong.

How I can make to add/save an additional custom field in Edit Account page?

// Add the custom field "favorite_color"
add_action( 'woocommerce_edit_account_form', 'add_favorite_color_to_edit_account_form' );
function add_favorite_color_to_edit_account_form() {
    $user = wp_get_current_user();
    ?>
        <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
        <label for="favorite_color"><?php _e( 'Favorite color', 'woocommerce' ); ?>
        <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="favorite_color" id="favorite_color" value="<?php echo esc_attr( $user->favorite_color ); ?>" />
    </p>
    <?php
}

// Save the custom field 'favorite_color' 
add_action( 'woocommerce_save_account_details', 'save_favorite_color_account_details', 12, 1 );
function save_favorite_color_account_details( $user_id ) {
    // For Favorite color
    if( isset( $_POST['favorite_color'] ) )
        update_user_meta( $user_id, 'favorite_color', sanitize_text_field( $_POST['favorite_color'] ) );

    // For Billing email (added related to your comment)
    if( isset( $_POST['account_email'] ) )
        update_user_meta( $user_id, 'billing_email', sanitize_text_field( $_POST['account_email'] ) );

Answer 1

Use woocommerce_edit_account_form hook as the below example

 add_action( 'woocommerce_edit_account_form', 'cssigniter_add_account_details' );
    function cssigniter_add_account_details() {
        woocommerce_form_field(
            'billing_company',
            array(
                'type'        => 'text',
                'required'    => true, // remember, this doesn't make the field required, just adds an "*"
                'label'       => 'Company Name'
            ),
            get_user_meta( get_current_user_id(), 'billing_company', true ) // get the data
        );
        woocommerce_form_field(
            'company_id',
            array(
                'type'        => 'number',
                'required'    => true, // remember, this doesn't make the field required, just adds an "*"
                'label'       => 'Company ID'
            ),
            get_user_meta( get_current_user_id(), 'company_id', true ) // get the data
        );
        
    
    }
    // Save field value
    add_action( 'woocommerce_save_account_details', 'misha_save_account_details' );
    function misha_save_account_details( $user_id ) {
        
        update_user_meta( $user_id, 'billing_company', wc_clean( $_POST[ 'phone_number' ] ) );
            update_user_meta( $user_id, 'company_id', wc_clean( $_POST[ 'phone_number' ] ) );
    
    }
    // Make it required
    add_filter( 'woocommerce_save_account_details_required_fields', 'misha_make_field_required' );
    function misha_make_field_required( $required_fields ){
        
        $required_fields[ 'billing_company' ] = 'Company Name';
            $required_fields[ 'company_id' ] = 'Company ID';
    
        return $required_fields;
    
    }

Add the above code to you theme functions.php file.

Answer 2

This can be done very easily Making some changes in your code this way:

// Add the custom field "favorite_color"
add_action( 'woocommerce_edit_account_form', 'add_favorite_color_to_edit_account_form' );
function add_favorite_color_to_edit_account_form() {
    $user = wp_get_current_user();

    // First Field
    ?>
    <p class="woocommerce-form-row woocommerce-form-row--first form-row form-row-first">
        <label for="favorite_color"><?php _e( 'Favorite color', 'woocommerce' ); ?>
        <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="favorite_color" id="favorite_color" value="<?php echo esc_attr( $user->favorite_color ); ?>" />
    </p>
    <?php
    // Second Field
    ?>
    <p class="woocommerce-form-row woocommerce-form-row--last form-row form-row-last">
        <label for="favorite_color"><?php _e( 'Favorite color 2', 'woocommerce' ); ?>
        <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="favorite_color2" id="favorite_color2" value="<?php echo esc_attr( $user->favorite_color2 ); ?>" />
    </p>
    <div class="clear"></div>
    <?php
}

// Save the custom field 'favorite_color'
add_action( 'woocommerce_save_account_details', 'save_favorite_color_account_details', 12, 1 );
function save_favorite_color_account_details( $user_id ) {
    // For Favorite color
    if( isset( $_POST['favorite_color'] ) )
        update_user_meta( $user_id, 'favorite_color', sanitize_text_field( $_POST['favorite_color'] ) );

    // For Favorite color 2
    if( isset( $_POST['favorite_color2'] ) )
        update_user_meta( $user_id, 'favorite_color2', sanitize_text_field( $_POST['favorite_color2'] ) );

    // For Billing email (added related to your comment)
    if( isset( $_POST['account_email'] ) )
        update_user_meta( $user_id, 'billing_email', sanitize_text_field( $_POST['account_email'] ) );
}

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

Tested and works.

You will get this: