Each WordPress user comes with a set of pre-defined fields. These fields store essential information about each user, including the username, name, email, role, website URL, bio, etc.
User fields can be edited in two ways: by the admin, who has access to all user profiles and can edit any user data, including both default and custom fields; and by logged-in users, who can edit their own profile information.
WooCommerce users (customers) can also edit some user data from the My Account page: name, email and password (Account details tab); and also billing and shipping addresses (Addresses tab).
But what if we want to let customers set/edit their bio or their website URL, which are only editable from the WordPress edit profile page? Well, the snippet below will help you display and save data for a default user field, under the Account details tab of the My Account page. Enjoy!
PHP Snippet: Display User Field Input @ WooCommerce My Account > Account Details
This code snippet adds a user bio field to the WooCommerce edit account form and saves the updated bio to the user’s profile.
The woocommerce_edit_account_form action hooks the function bbloomer_edit_user_bio_my_account to the WooCommerce edit account form. This means the function will be called when the edit account form is displayed.
The bbloomer_edit_user_bio_my_account function retrieves the current user information and creates the HTML structure for the user bio field within the edit account form. It includes a label, a textarea for entering the bio, and a “clear” element for proper layout.
The woocommerce_save_account_details action hooks the function bbloomer_save_user_bio_my_account to the WooCommerce save account details action. This means the function will be called when the user clicks on the “Save changes” button.
bbloomer_save_user_bio_my_account retrieves the submitted value from the “account_bio” field, sanitizes it, and updates the user’s description field if the bio is not empty.
/**
* @snippet Edit User Field @ Woo My Account
* @tutorial https://businessbloomer.com/woocommerce-customization
* @author Rodolfo Melogli, Business Bloomer
* @compatible WooCommerce 8
* @community Join https://businessbloomer.com/club/
*/
add_action( 'woocommerce_edit_account_form', 'bbloomer_edit_user_bio_my_account' );
function bbloomer_edit_user_bio_my_account() {
$user = get_user_by( 'id', get_current_user_id() );
?>
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="account_bio"><?php esc_html_e( 'Biographical Info', 'wordpress' ); ?> <span class="required">*</span></label>
<textarea class="woocommerce-Input woocommerce-Input--text input-text" name="account_bio" id="account_bio"><?php echo esc_attr( $user->description ); ?></textarea>
</p>
<div class="clear"></div>
<?php
}
add_action( 'woocommerce_save_account_details', 'bbloomer_save_user_bio_my_account' );
function bbloomer_save_user_bio_my_account( $user_id ) {
$account_bio = ! empty( $_POST['account_bio'] ) ? wc_clean( wp_unslash( $_POST['account_bio'] ) ) : '';
if ( $account_bio ) {
$user = new stdClass();
$user->description = $account_bio;
wp_update_user( $user );
}
}
