My Account Fields

In this tutorial I would like to dive deep into the topic of input fields in My Account > Account details section.

I am going to discuss with you what is possible to do with these fields, we will try to remove them, to make required or not required and even add our custom field there.

Our goal is to have Account Details page to look like:

By the way, if you’re trying to change address fields, you need another tutorial.

Making Fields Not Required

For example I do not want the “Last name” to be required here, I can easily make it optional (or any other field) with the code below:

add_filter( 'woocommerce_save_account_details_required_fields', 'misha_myaccount_required_fields' );
function misha_myaccount_required_fields( $account_fields ) {
	unset( $account_fields[ 'account_last_name' ] );
	// unset( $account_fields[ 'account_first_name' ] ); // First name
	// unset( $account_fields[ 'account_display_name '] ); // Display name
	return $required_fields;
		
}

Have you inserted the code to your functions.php? Done! The “Last name” field is not required any more.

Wait… But… The required field asterisk is still there! 🤔

Please try to remove the last name and hit the save button. It it saved? Absolutely.

And yes, I have bad news about the field asterisk… It is hardcoded inside the template! Ok, ok… Replacing form-edit-account.php template just because of this asterisk definitely doesn’t seem like a good idea.

In this situation I think the best idea is to use CSS.

label[for="account_last_name"] .required {
    display: none;
}

So far so good.

Remove Default Fields

What I am going to show you below doesn’t look like a clean solution, but it is the only one.

Step by step:

1. Choose what fields you would like to remove and make them not required first (skip this step for the password fields).
2. Duplicate this file form-edit-account.php from WooCommerce templates/myaccount to your current theme woocommerce/myaccount directory, create it if it doesn’t exist.
3. Remove the fields from that file code 😁
4. Done!

And yes, you can also do the same with CSS, both methods are not perfect, but I’d suggest you the first one anyway.

label[for="account_first_name"], #account_first_name,
label[for="account_last_name"], #account_last_name,
label[for="account_display_name"], #account_display_name{
	display:none;
}

How to Add Custom Field

Good news guys! If you want to add a custom field in WooCommerce my account page, there is no needs to hardcode anything in form-edit-account.php file! There are two magnificent hooks for you:

• woocommerce_edit_account_form_start – if you want to add a field at the beginning.
• woocommerce_edit_account_form – in case you want to add a field after the “Password change” section.

Let’s try it now! 🔥

You could display the field using the raw HTML here, but I think there is no reason to make everything so complicated while there is woocommerce_form_field() function which allows to make it so much easier!

/**
 * Add a Custom field to Account Details
 *
 * @author Misha Rudrastyh
 * @link https://rudrastyh.com/woocommerce/edit-account-fields.html#add-custom-field
 */
// Add field
add_action( 'woocommerce_edit_account_form', 'misha_add_field_edit_account_form' );
// or add_action( 'woocommerce_edit_account_form_start', 'misha_add_field_edit_account_form' );
function misha_add_field_edit_account_form() {
	
	woocommerce_form_field(
		'phone_number',
		array(
			'type'        => 'tel',
			'required'    => true, // remember, this doesn't make the field required, just adds an "*"
			'label'       => 'Phone number'
		),
		get_user_meta( get_current_user_id(), 'phone_number', 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, 'phone_number', 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[ 'phone_number' ] = 'Phone number';
	return $required_fields;

}

Some comments:

• With the help of woocommerce_form_field() you can add fields of any type, like textarea, selects, radio buttons etc.
• We don’t have to escape data we pass into woocommerce_form_field() function but don’t forget to use wc_clean() to what you’re passing to update_post_meta().

Here is my field:

If you’re curious how to add these nice country flags near phone numbers, read about it here.

# WooCommerce, My Account

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on Twitter