Search the site:

Home Blog How to remove the Last name field from the My Account page in WooCommerce

How to remove the Last name field from the My Account page in WooCommerce

In most e-commerce businesses, the only value the Last Name field adds is that it sometimes eases the task of finding the address of the customer. In cases where the address is an office or a non-residential address, the Last Name field ensures that the product reaches the right person, especially in cases where there may be employees sharing the same first name. But what about businesses that are fully online? How often is the last name field really required?

For instance, while buying movie tickets online or while registering for a paid webinar, the Last Name field offers no value. Also, some people don’t even have a Last Name. Thus, for multiple reasons, you may want to get rid of this field altogether. While we have seen in an earlier post how to customise fields on the Checkout Page in WooCommerce, this post will talk about how to remove the Last Name field from the My Account page in WooCommerce.

The My Account page in WooCommerce looks like this:

How to remove the Last name field from the My Account page in WooCommerce - My Account page
The default My Account page in WooCommerce

While we can add some CSS code (as shown below) in order to hide this field, it will still throw a validation error when the form is submitted. Hence, we also need to make some other changes in order to remove the required clause.

Additional CSS to hide the Last Name field:

.woocommerce-EditAccountForm .woocommerce-form-row--last {
  display: none;
}
How to remove the Last name field from the My Account page in WooCommerce - Adding custom CSS
Custom CSS entered while customising

The code snippet given below, once entered in the functions.php file of your child theme, along with the additional CSS (above) should help achieve both the objectives viz. making the last name field optional and hiding it.

add_filter('woocommerce_save_account_details_required_fields', 'ts_hide_last_name');
function ts_hide_last_name($required_fields)
{
  unset($required_fields["account_last_name"]);
  return $required_fields;
}

The function ts_hide_last_name is added to the in-built woocommerce_save_account_details_required_fields WooCommerce hook.

As a result of the function and the added CSS, the My Account Page will look like this:

How to remove the Last name field from the My Account page in WooCommerce - Last Name removed from My Account page

Similarly, you can remove any field from this page that does not have relevance in any of the transactions made on the website. For example, to hide the First Name field, you would use the same code snippet as above changing only the field name:

add_filter('woocommerce_save_account_details_required_fields', 'ts_hide_first_name');
function ts_hide_first_name($required_fields)
{
  unset($required_fields["account_first_name"]);
  return $required_fields;
}

Along with this code snippet, you would also need to add the below custom CSS, in order to hide this field:

.woocommerce-EditAccountForm .woocommerce-form-row--first {
  display: none;
}

The same code snippet can be used to hide the Email field, by changing the field name to “account_email”.

add_filter('woocommerce_save_account_details_required_fields', 'ts_hide_email');
function ts_hide_email($required_fields)
{
  unset($required_fields["account_email"]);
  return $required_fields;
}

The Custom CSS below would also hide the Password fields along with the Email field, but this would be desirable if you intend to hide the Email field.

Custom CSS to hide Email and Password fields:

.woocommerce-EditAccountForm .woocommerce-form-row--wide{
  display:none;
}

.woocommerce-EditAccountForm fieldset{
  display:none;
}

How to remove the Last name field from the My Account page in WooCommerce - Email and Password fields removed from My Account page

In this way, you can use the code snippet and a little custom CSS to edit any field on the My Account page. However, removing some fields may have undesirable consequences. For instance, you may want to retain the email address field as it’s also mandatory for the registration process.

Below is the list of fields on the My Account page along with their names, and CSS classes of their containers respectively:

First Name: account_first_name, .woocommerce-form-row–last
Last Name: account_last_name, .woocommerce-form-row–first
Email Address: account_email, .woocommerce-form-row–wide
Current Password: password_current, .woocommerce-form-row–wide
New Password: password_1, .woocommerce-form-row–wide
Confirm New Password: password_2, .woocommerce-form-row–wide

Browse more in: Code Snippets, WooCommerce How Tos, WooCommerce Tutorials

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of
from purchased

Subscribe Now