Add a custom field to WooCommerce account details

In some cases store owners might need to have some optional extra information regarding their clients, for example a date of birth might be needed in record for certain purchases or other verification reasons. In today’s article we’re going to add such a field to the Account Details tab under the My Account page and then we will display the information entered in the user profile page for easy access.

Install and activate a child theme

The first step on our process here is to create and install a child theme. If you are using one of our themes you can easily grab its child theme from our downloads section. If not, you can read our beginner’s guide on child themes to create your own. This step is essential in order to preserve our changes throughout theme updates.

Create the custom field

Adding the custom field is pretty easy. We’ll use the woocommerce_edit_account_form hook to add the field and the woocommerce_save_account_details one to save the entered information.

add_action( 'woocommerce_edit_account_form', 'cssigniter_add_account_details' );
function cssigniter_add_account_details() {
	$user = wp_get_current_user();
	?>
		<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
		<label for="dob"><?php esc_html_e( 'Date of birth', 'your-text-domain' ); ?></label>
		<input type="date" class="woocommerce-Input woocommerce-Input--text input-text" name="dob" id="dob" value="<?php echo esc_attr( $user->dob ); ?>" />
	</p>
	<?php
}

add_action( 'woocommerce_save_account_details', 'cssigniter_save_account_details' );
function cssigniter_save_account_details( $user_id ) {
	if ( isset( $_POST['dob'] ) ) {
		update_user_meta( $user_id, 'dob', sanitize_text_field( $_POST['dob'] ) );
	}
}

Our new field will appear below the password management fields.

Display the field

Once the customer has entered their date of birth we can display them in the user profile page so we have easy access to the information when needed.

add_action( 'show_user_profile', 'cssigniter_show_extra_account_details', 15 );
add_action( 'edit_user_profile', 'cssigniter_show_extra_account_details', 15 );
function cssigniter_show_extra_account_details( $user ) {
	$dob = get_user_meta( $user->ID, 'dob', true );

	if ( empty( $dob ) ) {
		return;
	}

	?>
	<h3><?php esc_html_e( 'Extra account details', 'your-text-domain' ); ?></h3>
	<table class="form-table">
	<tr>
		<th><?php esc_html_e( 'Date of birth', 'your-text-domain' ); ?></label></th>
		<td>
			<p><?php echo esc_html( $dob ); ?></p>
		</td>
	</tr>
	</table>
<?php
}

To show the field use the show_user_profile and edit_user_profile hooks with a priority of 15 in order for our info to be displayed below the WooCommerce billing and shipping information.

Wrapping up

With a couple of simple code snippets we have added a custom account field and displayed its information on the user profile page. Now we can utilize the new information to improve the shopping experience for our customers and make our life easier as shop owners. Did you find this guide helpful, or do you have any ideas for future guides? Let us know in the comments below.