Adding an Additional Custom Field in Woocommerce Edit Account Page

Adding an additional custom field in Woocommerce Edit Account page

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:

Sample Image

Add a custom field in Woocommerce Edit Account page

This can be done without overriding template files, just using available hooks 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();
    ?>
        <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
        <label for="favorite_color"><?php _e( 'Favorite color', 'woocommerce' ); ?></label>
        <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'] ) );
}

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

Tested and works.

If you want to override the template to display the custom field, you just have to keep the 2nd hooked function (the one who saves the data when edited).

Add custom fields to WooCommerce new account Page

The following will optimize and compact your code, adding field validation and allowing to save all fields values as user meta data:

// Custom function with all extra field data arrays
function extra_register_fields() {
    $text_domain  = 'woocommerce';
    return array(
        'first_name' => array('type' => 'text',    'class' => ['form-row-first'], 'required' => 1, 'label' => __('First name', $text_domain) ),
        'last_name'  => array('type' => 'text',    'class' => ['form-row-last'],  'required' => 1, 'label' => __('Last name', $text_domain) ),
        'phone'      => array('type' => 'tel',     'class' => ['form-row-wide'],  'required' => 1, 'label' => __( 'Phone', $text_domain ) ),
        'facebook'   => array('type' => 'text',    'class' => ['form-row-wide'],  'required' => 1, 'label' => __( 'Facebook ', $text_domain ) ),
        'whatsapp'   => array('type' => 'text',    'class' => ['form-row-wide'],  'required' => 1, 'label' => __( 'WhatsApp', $text_domain ) ),
        'country'    => array('type' => 'country', 'class' => ['address-field'],  'required' => 1, 'label' => __( 'Country', $text_domain ) ),
        'state'      => array('type' => 'state',   'class' => ['address-field'],  'required' => 1, 'label' => __( 'State', $text_domain ) ),
    );
}

// Add extra register fields
add_action( 'woocommerce_register_form_start', 'wooc_extra_register_fields' );
function wooc_extra_register_fields() {
    foreach ( extra_register_fields() as $fkey => $values ) {
        if( $fkey === 'phone' ) $values['clear'] = 1;
        if( $fkey === 'state' ) $values['validate'] = ['state'];

        $value = isset($_POST['billing_'.$fkey]) ? esc_attr($_POST['billing_'.$fkey]) : '';

        woocommerce_form_field( 'billing_'.$fkey, $values, $value );
    }
    wp_enqueue_script('wc-country-select', get_site_url().'/wp-content/plugins/woocommerce/assets/js/frontend/country-select.min.js', array('jquery'), true);
}

// Extra register fields validation
add_action( 'woocommerce_register_post', 'wc_validate_reg_form_fields', 10, 3 );
function wc_validate_reg_form_fields( $username, $email, $validation_errors ) {
    foreach ( extra_register_fields() as $fkey => $values ) {
        if (isset($_POST['billing_'.$fkey]) && empty($_POST['billing_'.$fkey]) && $values['required'] ) {
            $validation_errors->add( 'extra_fields', sprintf('%s is a required field', $values['label']) );
        }
    }
    return $validation_errors;
}

// Save extra register fields values
add_action( 'woocommerce_created_customer', 'wooc_save_extra_register_fields' );
function wooc_save_extra_register_fields( $customer_id ) {
    foreach( extra_register_fields() as $fkey => $values ) {
        if ( isset($_POST['billing_'.$fkey]) ) {
            $value = in_array($fkey, ['country', 'state']) ? sanitize_text_field($_POST['billing_'.$fkey]) : esc_attr($_POST['billing_'.$fkey]);

            update_user_meta( $customer_id, 'billing_'.$fkey, $value );

            if ( in_array($fkey, ['first_name', 'last_name']) )
                update_user_meta( $customer_id, $fkey, $value );
        }
    }
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.

To display "Facebook" and "WhatsApp" fields in My account edit billing address use the following:

// Display Facebook and WhatsApp fields in My account eddit billing address
add_filter( 'woocommerce_billing_fields', 'additional_billing_fields', 20, 1 );
function additional_billing_fields($billing_fields) {
    if ( is_wc_endpoint_url( 'edit-address' ) ) {
        foreach ( extra_register_fields() as $fkey => $values ) {
            if ( in_array($fkey, ['facebook', 'whatsapp']) ) {
                $billing_fields['billing_'.$fkey] = $values;
            }
        }
    }
    return $billing_fields;
}

To add "Facebook" and "WhatsApp" fields to Admin user billing section use the following:

// WordPress User: Add Facebook and WhatsApp fields to billing section
add_filter('woocommerce_customer_meta_fields', 'wordpress_user_account_billing_birthdate_field');
function wordpress_user_account_billing_birthdate_field( $fields ) {
    foreach ( extra_register_fields() as $fkey => $values ) {
        if ( in_array($fkey, ['facebook', 'whatsapp']) ) {
            $fields['billing']['fields']['billing_'.$fkey] = array(
                'label'       => $values['label'],
                'description' => ''
            );
        }
    }
    return $fields;
}

Provide custom registration fields in Woocommerce edit profile My account page

You may try this example,

add_action( 'woocommerce_edit_account_form', 'my_woocommerce_edit_account_form' );
add_action( 'woocommerce_save_account_details', 'my_woocommerce_save_account_details' );

function my_woocommerce_edit_account_form() {

$user_id = get_current_user_id();
$user = get_userdata( $user_id );

if ( !$user )
  return;

$twitter = get_user_meta( $user_id, 'twitter', true );
$url = $user->user_url;

?>

<fieldset>
<legend>Social information</legend>
<p>Fill in this information about your social media accounts.</p>
<p class="form-row form-row-thirds">
  <label for="twitter">Twitter Username:</label>
  <input type="text" name="twitter" value="<?php echo esc_attr( $twitter ); ?>" class="input-text" />
</p>
</fieldset>

<fieldset>
<legend>Additional Information</legend>
<p class="form-row form-row-thirds">
  <label for="url">Website:</label>
  <input type="text" name="url" value="<?php echo esc_attr( $url ); ?>" class="input-text" />
</p>
</fieldset>

<?php
}

function my_woocommerce_save_account_details( $user_id ) {

update_user_meta( $user_id, 'twitter', htmlentities( $_POST[ 'twitter' ] ) );

$user = wp_update_user( array( 'ID' => $user_id, 'user_url' => esc_url( $_POST[ 'url' ] ) ) );

}

For more information,

Custom User Fields on Woocommerce My Account Page
Custom WooCommerce User Account Fields
add user custom field in My Account page in Woocommerce?

Hope this will helps you.

How do I re-order or add priority to a custom field on WooCommerce My Account page

As can be seen in myaccount/form-edit-account.php template file the woocommerce_edit_account_form action hook is executed after the already existing fields are added.

So if you want to add the field between the existing fields you will have to edit the template file

This template can be overridden by copying it to yourtheme/woocommerce/myaccount/form-edit-account.php

You have to delete the code you currently use
Add this code between 2 existing fields (at the place where you want to add the new field) in the myaccount/form-edit-account.php template file

<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
    <label for="account_birthday"><?php esc_html_e( 'Birth day', 'woocommerce' ); ?> <span class="required">*</span></label>
    <input type="date" class="woocommerce-Input woocommerce-Input--text input-text" name="account_birthday" id="account_birthday" value="<?php echo get_user_meta( get_current_user_id(), 'account_birthday', true ); ?>"/>
</p>
<div class="clear"></div>

For validation and saving then add the following code to functions.php (
or the way you prefer to add snippets)

// Validate - my account
function action_woocommerce_save_account_details_errors( $args ){
    if ( isset( $_POST['account_birthday'] ) && empty( $_POST['account_birthday'] ) ) {
        $args->add( 'error', __( 'Please provide a birth date', 'woocommerce' ) );
    }
}
add_action( 'woocommerce_save_account_details_errors','action_woocommerce_save_account_details_errors', 10, 1 );

// Save - my account
function action_woocommerce_save_account_details( $user_id ) {  
    if( isset( $_POST['account_birthday'] ) && ! empty( $_POST['account_birthday'] ) ) {
        update_user_meta( $user_id, 'account_birthday', sanitize_text_field( $_POST['account_birthday'] ) );
    }
}
add_action( 'woocommerce_save_account_details', 'action_woocommerce_save_account_details', 10, 1 );

Adding an Additional Custom Field in Woocommerce Edit Account Page