How to add custom fields in WooCommerce edit account page without plugin

In this tutorial you will know how you can add the custom fields in WooCommerce edit account page and also save it's value without any plugin. I had recently implemented that code in one of my client website and it's working fine, so you can trust in this code it will worked perfectly without any issue. But firstly What is the woocommerce ?

WooCommerce is an open-source e-commerce plugin for WordPress. It is designed for small to large-sized online merchants using WordPress. Launched on September 27, 2011, the plugin quickly became popular for its simplicity to install and customize and free base product.

Default Edit Account Form fields is look like below screenshot. Now we will add Social Media Links and About fields in this form using custom code.

First open your current active theme functions.php file because all custom code will be written in that file.

Display Custom Fields on Edit Account Form Code:

add_action( 'woocommerce_edit_account_form', 'add_custom_fields_to_edit_account_form' );

function add_custom_fields_to_edit_account_form() {

    $user = wp_get_current_user();

    ?>

       <fieldset>

<legend><?php esc_html_e( 'Social Media Links', 'woocommerce' ); ?></legend>

<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">

<label for="youtube"><?php esc_html_e( 'Youtube Url', 'woocommerce' ); ?></label>

<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="youtube" id="youtube" autocomplete="off" value="<?php echo esc_attr( $user->youtube ); ?>" />

   </p>

   <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">

<label for="facebook"><?php esc_html_e( 'Facebook Url', 'woocommerce' ); ?></label>

<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="facebook" id="facebook" autocomplete="off" value="<?php echo esc_attr( $user->facebook ); ?>" />

   </p>

   <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">

<label for="twitter"><?php esc_html_e( 'Twitter Url', 'woocommerce' ); ?></label>

<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="twitter" id="twitter" autocomplete="off" value="<?php echo esc_attr( $user->twitter ); ?>" />

   </p>

   <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">

<label for="instagram"><?php esc_html_e( 'Instagram Url', 'woocommerce' ); ?></label>

<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="instagram" id="instagram" autocomplete="off" value="<?php echo esc_attr( $user->instagram ); ?>" />

   </p>

</fieldset>

<fieldset>

<legend><?php esc_html_e( 'About Yourself', 'woocommerce' ); ?></legend>

<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">

<textarea class="woocommerce-Input woocommerce-Input--textarea input-textarea" name="description" id="description"><?php echo esc_attr( $user->description ); ?></textarea> <span><em><?php esc_html_e( 'Share a little biographical information to fill out your profile.', 'woocommerce' ); ?></em></span>

</p>

</fieldset>

    <?php

}

Explanation: In the above code we used add_action function. The add_action function is arguably the most used function in WordPress. Simply put, it allows you to run a function when a particular hook occurs. 

add_action( 'woocommerce_edit_account_form', 'add_custom_fields_to_edit_account_form' );

So our function add_custom_fields_to_edit_account_form(); will execute when "woocommerce_edit_account_form" hook called and that hook found inside WooCommerce plugin form-edit-account.php file.  

File Path: /templates/myaccount/form-edit-account.php

Custom fields will add after "confirm new password" field. But the question is why it will add after that field not anywhere else because "woocommerce_edit_account_form" hook is called after "confirm new password" field.

After adding the code in functions.php file check your edit account page form. Your form will be look like below Screenshot. 

How to Save Custom Fields Values :

Our half work is done now we need to save these custom fields value after user submit the form. So for this we will add another function in functions.php file.

add_action( 'woocommerce_save_account_details', 'save_custom_user_account_details', 12, 1 );

function save_custom_user_account_details( $user_id ) {

    

    if( isset( $_POST['instagram'] ) )

        update_user_meta( $user_id, 'instagram', sanitize_text_field( $_POST['instagram'] ) );

    if( isset( $_POST['facebook'] ) )

        update_user_meta( $user_id, 'facebook', sanitize_text_field( $_POST['facebook'] ) );

    if( isset( $_POST['youtube'] ) )

        update_user_meta( $user_id, 'youtube', sanitize_text_field( $_POST['youtube'] ) );

if( isset( $_POST['twitter'] ) )

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

if( isset( $_POST['description'] ) )

        update_user_meta( $user_id, 'description', sanitize_text_field( $_POST['description'] ) );

}

Explanation: For saving edit form values we used woocommerce_save_account_details hook, that hook is executed after user submit the form. So when that hook execute our function save_custom_user_account_details() will be run and using update_user_meta() function we will updated the user values in database.

It's done!

That's it for now. I hope this tutorial will also help you to understand how WordPress hooks works. If you have any question or suggestion please let us know through below comment box.

Thanks!