My Account

There are two type of fields in WooCommerce – billing and shipping fields (sorry for being so obvious). Some of the fields are presented in both of these categories, like a first name field or a country field. Some – may be presented in one of the categories only, like phone or email.

And now read carefully:

• We can make changes in the fields using hook woocommerce_default_address_fields – in this case the changes will affect everything – both edit billing and shipping fields pages in “My account” and the Checkout page as well.
• woocommerce_shipping_fields – the same, but affects only shipping fields
• woocommerce_billing_fields – the same, but affects only billing fields
• woocommerce_checkout_fields – affects only the checkout page, nothing else, this hook is already described in details in a separate tutorial.

By default WooCommerce registration form is kind of minimal and contains only Email address field. Well, depending on the shop settings there also could be privacy policy text or a password field.

In this tutorial I will show how you how to add a phone number field with validation and mask.

In this tutorial I would like to dive deep into the topic of input fields in My Account > Account details section.

I am going to discuss with you what is possible to do with these fields, we will try to remove them, to make required or not required and even add our custom field there.

Our goal is to have Account Details page to look like:

I have a detailed tutorial about my account menu in WooCommerce on my blog and there you can find a chapter about removing menu links.

But the thing is that you can not just remove any link that easy. The problems may appear if you would like to remove “Dashboard” from my account menu.

So our goal for this tutorial is not only to remove a “Dashboard” menu link but also to perform a redirect to the next menu link. It is “Orders” by default.

I hope it is crystal clear why we need a redirect. Let’s imagine a situation when a customer signs in to your WooCommerce website. What My Account page will be displayed by default? Right. Besides, wp_get_page_permalink( 'myaccount' ) is probably used in your theme files, this function also sends users to the Dashboard page! So I think it is not enough just to redirect users after signing in, we should redirect them every time they are trying to access the Dashboard.

Before diving into this tutorial I recommend you to make a look at order items and my account menu tutorials.

And below on the screenshot you can see what we are going to create.

WooCommerce has a built-in password strength meter, which you can find for example in My Account – Account details. And as everything else in WooCommerce, it has a pretty neat customization with hooks.

Here is how it looks and works by default:

It is a complete my account menu customization guide. In this tutorial I will explain you how to remove links from the menu properly, how to add pages with custom icons there and how to reorder menu elements.