How to Customize the My Account Page in WooCommerce

The “My Account Page” of your WooCommerce store is an essential part of your customer shopping workflow and it should be designed in a ways that is enhancing your customer experience.

In this article, we are going to show you how you can customize the my account page. Once you complete this article, you will be able to completely change the look of the my account page in your website. You will be able to change the way the menu looks, add new pages and content on the page, and add custom links to the content.

customize woocommerce my account page

Why is WooCommerce my account Page important

The WooCommerce my account page is one of the most important pages on your WooCommerce site. It’s the page where customers can manage their account details, view their order history, and track their order status. It’s also the page where they can contact you if they have any questions or problems.

Making sure that your WooCommerce my account page is well-designed and easy to use is essential for providing a good customer experience.

Making sure that your WooCommerce my account page is well-designed and easy to use is essential for providing a good customer experience. A well-designed account dashboard will make it easy for customers to find the information they need, and account details should be clearly displayed and easy to edit.

Where is the my account page in WooCommerce?

In WooCommerce the “My Account” page is an actual WordPress page that has the corresponding WooCommerce shortcode [woocommerce_my_account] . Any WordPress page that has this shortcode embedded will render the default account management tabs and content. From here, you can see a list of your recent orders, manage your shipping status, and edit your password and account details.

Why Customize the My Account Page in WooCommerce?

There are many reasons to customize the my account page in WooCommerce. By customizing this page, you can make it more user-friendly and informative for your customers. Additionally, you can add important account details that will help your customers manage their accounts more effectively. Overall, customizing the my account page can make it more valuable for both your business and your customers.

So without further ado, let’s have a look at what the my account page looks like.

Customizing the my account Page

In the same manner as user registration, adding custom fields and WooCommerce customer profile building, you can customize the my account page either by using plugins or by coding the WordPress files. Since In this article, we are going to focus on the coding aspect of it. You can customize the page in the following ways.

How to edit the WooCommerce my account page programmatically

To edit the WooCommerce my account page programmatically, you can use a dedicated code snippets plugin or you can add the custom code into the functions.php file of your child WordPress theme

Changing the menu order

By default, the menu in the my account page looks as follows.

To change the order of the tabs in the menu, you can use the woocommerce_account_menu_items  filter. This filter allows you to modify the items that will be added to the account menu. The items are passed to the filter as an array, where each key is the unique ID of the menu item and the value is the display title of the menu item. So, to change the order, you can just returning the array of menu items in a different order. The following snippet illustrates an example of using this hook. You can add the code to the functions.php file of your child theme.

As you can see in this example, we have moved the “Orders” tab to the end of the menu. Save the file and refresh the WooCommerce account page to see the modified result.woocommerce my account-customization menu order

Changing the names of the tabs

To change the names of the tabs, we can once again use the woocommerce_account_menu_items filter. If you have used the code snippet above to reorder the items, you can just specify the name of the tab directly in that snippet.

If however, you need to change the names only, without reordering, you can simply change the title of the menu item with the specified key. In the example below, we have changed the name of the edit-account tab from Account Details to Details:

This produces the following output on the webpage:woocommerce my account-customization menu change text

Changing the icons of the tabs

In this demonstration, we are using the StoreFront theme to show you the screenshots. The theme uses the font-awesome icons by default. Because of this, we will show you how you can change the icons of the tabs using font-awesome.

The icons of the tabs can be changed with a bit of custom CSS. You can add the custom CSS to the Appearance -> Customize -> Additional CSS section of your WordPress dashboard.

The CSS selector that you can apply the icon to depends on the corresponding menu item. For example, for the orders item, you can use the following selector:

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--orders a::before

And here is an example of changing the “Orders” menu item icon to a shopping cart item:

The icon can be changed by setting the corresponding unicode to the “content” attribute. You can find the font-awesome codes here.

The default value in the class mentioned above is “\f15c”. If we change it to “\f07a” the icon of the Orders tab will look like this:

woocommerce my account-customization menu change icon

 

Adding a new menu tab and content

To add a new tab on the menu, you have to go through the following three steps.

  1. Register an end-point

To add a new tab on the menu, you first need to create an endpoint. It acts as the URL slug which comes after /my-account/. To add a new tab with the name My Loyalty, add the following endpoint in the functions.php file.

Now, go to the Settings > Permalinks page and click Save Changes (without applying any changes). Doing this flushes the permalinks and lets the website pick up on the new endpoint created.

  1. Add the end-point content

Now, add the following content to the functions.php.

Once you do this, create a new php file with the name my-account-loyalty.php in the root directory of your child theme. This is where you can insert the custom code/content of your new account page. For example:

You can alternatively directly render the content from the my_loyalty_endpoint_content()  function, instead of creating a separate file.

  1. Add the tab to the menu

Once you create the file, add the tab to the menu as shown below.

Doing this adds the tab to the menu.

Adding an icon to the tab

Finally, you might need to add an icon. In the icons.css file, search for the class which contains the icon of the newly created tab and add a code for the content.

After this, you can see the following changes in the menu bar of the my account page.

woocommerce my account-customization menu add item

Adding custom content to the existing tabs

Sometimes, the default content in the WooCommerce account page might not be enough. You may need to add some text of your own to personalize your website. To demonstrate how you can change the content of the pages, we will take an example of the WooCommerce dashboard page.

For this, we’ll need to create a folder named woocommerce in your child theme. Then we’ll add the necessary files that we would like to overwrite. We just need to make sure to maintain the default WooCommerce file structure.

You can overwrite a default WooCommerce template file just by creating a file with the same name and path in the woocommerce folder of your child theme. You can find the list of all WooCommerce template files in the woocommerce/templates folder of the WooCommerce plugin.

For example, if you need to overwrite the dashboard template that is located in the WooCommerce plugin at the following path:

woocommerce/templates/myaccount/dashboard.php

you would need to create a file in your child theme with the following path:

woocommerce/myaccount/dashboard.php

After this, copy the default WooCommerce template content in your template file. You can do this by downloading the template of the dashboard page from the WooCommerce GitHub repo for your specific version or just copy it from your WordPress installation plugins directory. Once you do this, you can customize the template code anyway you like.

In the example below, we have added the line <h3>Test Content</h3> in the dashboard.php file:

woocommerce my account-customization change -add text

Before and After Menu Hooks

In WordPress, hooks are features that let you change or add the code without changing the core files. The Before and After menu hooks in WooCommerce let you add any text or HTML code just below or just after the menu. It specifically adds the content either before or after the <nav> element.

Use the following code in the functions.php file to add content before the menu.

 

 

Similarly, use the following code to add content after the menu.

 

Once you do this, your menu looks similar to the following.

woocommerce my account-customization add content

However, in most cases, the my account <nav> element has a float:left CSS property. Because of this, you need to carefully check how your menu looks after adding the code and make adjustments accordingly.

How to get woocommerce My account page link

If you need to link to the my account page from a different section of your WooCOmmerce store or you want to include it in your email template, you can get the WooCommerce my-account URL as below

 

How to Use a Plugin to Customize Your WooCommerce My Account Page

If you want to customize your WooCommerce my account page, you can also use a dedicated plugin. There are many plugins available that can help you customize your WooCommerce my account page.

In this article, we showed you how to customize the my account page in WooCommerce programatically, but if you don’t want to write and edit code you can also use a plugin to customize your WooCommerce my account page.

There are multiple free and paid plugin that allows you to customize your WooCommerce my account page. Some of the more popular plugins are:

  • WooCommerce – Customize My Account For WooCommerce

  • YITH – WooCommerce Customize My Account Page

  • IconicWP – WooCommerce Account Pages

  • Codecanyon – WooCommerce Custom My Account Pages

First, you need to install and activate the the WooCommerce plugin. For more details, see the corresponding step by step guide created by each of the plugin developers.

 

Conclusion

In this article, we introduced you to the my account page of the WooCommerce plugin and went through the ways in which the page can be customized. We also showed you some specific examples on how you can use the customization techniques to enhance your website.

We hope you had fun learning and see you again next time.