My Account

Billing and Shipping Address Fields

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.

How to Add Extra Fields to Registration Form

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.

how to add phone number field in woocommerce registration form

My Account Fields

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:

Add a field to WooCommerce edit account page
If you remember how the default Account Details page looks like, you will notice that I removed Last name and Display name fields and also added a Phone field.

Remove Dashboard from My Account Menu

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.

Remove Dashboard from my account menu in WooCommerce
“Orders” page will be opened by default every time customers go to “My account”.

How to Display All Products Purchased by User

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.

display all products purchased by user in WooCommerce my account
Customers can easily find the products they already purchased before and… buy again.

Password Strength Meter Customization

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:

WooCommerce password strength method in Storefront theme
The button becomes active with Medium password strength.

My Account Menu

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.

WooCommerce Default My Account menu.
This is how “My Account” menu looks by default with Storefront theme active.