Guides, Tutorials

Add a custom field to WooCommerce account details

Posted On by Nik

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.

All code below will be placed in our child theme’s functions.php file. If the file is empty the code will go just below the opening <?php tag, otherwise, if it has contents, the code should be placed at the end of the file, before the closing ?> PHP tag if it exists.

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.

Related Articles

December 7, 2016

Accelerated Mobile Pages for WordPress

March 11, 2021

Block editor series – Caldera Forms

December 1, 2016

Introduction to WordPress user roles and capabilities

8 comments

  1. Gergő Ganbat says:
    March 10, 2022 at 10:51 am

    Thank you for the easy tutorial! This date of birth function was exactly what I was trying to add.

    Is there a way to add the field also to the Woocommerce checkout page? So that it has to be filled out when someone takes an order.

    Thank you!

    Reply
    1. Nik says:
      March 29, 2022 at 9:18 am

      Hello.
      You can check out WooCommerce’s documentation here on how to customize checkout fields in order to add your new field to the checkout page.

      Reply
  2. Jeff Beaulieu says:
    April 5, 2022 at 4:11 pm

    Hi !

    First of all, thank you for this tutorial !

    I’m using YITH WooCommerce Checkout Manager that allow me to add extra fields in the checkout page. Those fields are added to the order in the Custom fields area.

    Do you think I can use your Display code to display those extra fields in the My Account page?
    Is there a way to add those extra fields in a different tab other than under the password change area?

    Thank you for your advice!

    Reply
    1. Nik says:
      May 25, 2022 at 9:25 am

      Hello.
      It is very likely that the YITH WooCommerce Checkout Manager plugin offers hooks that would allow you to move the fields, however this is a question that can be answered by the plugin’s authors best.

      Reply
  3. Harris says:
    November 14, 2022 at 8:39 pm

    Thanks for the tutorial. Could we edit it also on the user edit page in the dashboard?

    Reply
    1. Nik says:
      November 21, 2022 at 10:54 am

      Hello!
      Please check out this article to help you add custom fields on the user account page. https://www.cssigniter.com/how-to-add-a-custom-user-field-in-wordpress/

      Reply
  4. Hien says:
    December 13, 2022 at 3:52 am

    I’m using the polylang plugin, is there any way to translate the “Date of birth” key into multiple languages. Hope to hear from you, thanks.

    Reply
    1. Nik says:
      December 20, 2022 at 2:24 pm

      Hello.
      If you have Polylang Pro, string translations are available if I recall correctly. Alternatively you can use a string translation plugin like Loco Translate.

      Reply

Leave a Reply

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