Sajan Ratna ShakyaIf you want to know how to customize the ‘My Account’ page in WooCommerce, you have come to the right place. After using the default WooCommerce account page, you must have noticed that there are very limited features in it. Therefore, you’ll have to make some changes and customize the ‘My Account’ page.
Fortunately, there are many easy ways through which you can do it. And, there are a lot of areas where you can make changes too. So, in this article, we will show you the easiest way to start customize the ‘My Account’ page in WooCommerce along with everything you can make changes on.
Why Customize My Account Page in WooCommerce?
As mentioned earlier, there are very limited options with which you can do with the default WooCommerce account page. You can add the basic information of the customers here. For example, here’s how the default ‘My Account’ page in WooCommerce looks like:
As you can see on the screenshot, the default WooCommerce my account page has only the basic options.
But your customers may need more options on their account page. For example, they may want to add other important information like payment methods, links, addresses, etc. Or they may want to modify how their account page looks by changing the layouts, colors, and text styling. They cannot be done with WooCommerce by default.
The obvious solution to make these as well as any changes would be to add codes for it. But, you can also do it by using one of the WooCommerce My Account page customization plugins. Out of these two, the best option is adding a WooCommerce extension to your WordPress website without a doubt.
How to Modify WooCommerce ‘My Account’ Page?
To customize or modify WooCommerce ‘My Account’ Page, first you need to get the Customize My Account for WooCommerce extension. You can find it on the official WooCommerce website page.
This extension was created specifically to help you customize your WooCommerce account page. With it, you can easily change the options for groups, links, tabs, endpoints, and even the overall design of the account page.
Step 1. Install ‘Customize My Account for WooCommerce’
To start the customization process, you must first install the ‘Customize My Account for WooCommerce’ plugin on your site. Purchase the plugin from the plugin page on WooCommerce.com and download the .zip file.
After that, log into your WordPress dashboard and go to Plugins>>Add New page. Next, click on the Upload Plugin button and upload the downloaded .zip file.
Make sure you install and activate the plugin as well after you have uploaded it.
Step 2. Setup and Configuration of the EndPoints
After you have successfully installed the extension, you’ll have to setup and configure the endpoints for your account page. Endpoints are communication channels through which customers or users can access the required operation from a service by clicking on URLs. so, they are very important to direct your customers for various options on the account page.
To set them up and configure them, you can go to Customize My Account>>Settings from your dashboard.
Here, you will be presented with two tabs which are Settings and Endpoints.
I. Settings:
The options in the Settings tabs are pretty straight forward. You have the option to allow users to add a custom avatar or enable or disable the endpoint icons here.
Similarly, you can also select the Endpoint Icon Position to left or right. The option to select the Default Endpoint is also available here. However, don’t forget to save changes after you’re done..
II. Endpoints:
Now, in the Endpoints tab, you have a lot of options to modify WooCommerce My Account pages with endpoints. Here, you can manage the endpoints and even add a new group, link or endpoint.
The options to add a new group, link or endpoint can be seen on the right side of the screen. Click on the button you want to add and name them. You just have to enter the name of the group, endpoint or link here.
Then you can further edit them on the Manage Endpoints section where you will see them after you add them.
Each endpoints, groups and links are denoted by [E],[G], and [L] respectively after their names. The following options can be edited for them:
- Enable: Check this option to enable or disable the endpoint, group or link.
- URL: Enter the URL which you want to visit
- Label: Enter the label you want for your endpoint.
- Icon: Select the icon you want to be displayed with the endpoint.
- Class: Type a class name for specific design via custom CSS codes.
- User Roles: Select the user role to which you want the endpoints to be displayed. If you leave it blank, it will be shown to all the user roles.
- Custom Content: If you want to add any custom content, you can use this option in endpoints.
- Open in New Tab: Open the link in the new tab when users click on it.
The options to enable them and select the icon, class, label, and user roles are present in endpoints, groups as well as links.
But, for the links, there are additional options to add the URL for the link and open in a new tab.
Similarly, for the endpoints, the additional option to add the custom content is also available.
You can remove the groups, links, or endpoints by clicking the remove button if you want too. But, you can’t remove the default endpoints.
Also, do make sure to save the changes after you are done editing them.
Step 3. Customize the Account Dashboard
The endpoints aren’t the only thing that you can do to modify WooCommerce My Account Page. you can also edit the visual representation of the account dashboard too.
For this, click on Customize My Account>>Customizer from your WordPress dashboard. Then, you will be redirected to the live customizer editor.
Here, you can use the live preview customizer to modify WooCommerce My Account page. The changes made on the editor can be viewed on the right side of the screen with real-time changes.
In the above screenshot, you can see that it’s an option to edit the wrapper of the account page. But, there are also some more options that you can use.
Customizer Options:
- Wrapper: It resembles the outline and the background of the account page. Here, you can change the navigation style, font family and size, background color, padding, and margin.
- Color: You can change the color for the body, heading, link, and link hover from this option.
- Avatar: This option can be used to modify your account avatar. You can change the avatar layout, type, and padding from here.
- Navigation: The Navigation option lets you customize the menu styles for your account page while in a normal or hover state. From this option, you can edit the normal state and hover state with text, background, or border colors. You can also adjust the border width and general padding.
- Input Fields: It lets you customize the input section of the account page. You can further edit the text, background, and border color along with border width and general padding. All these options are available for normal state as well as focus state.
- Buttons: With this option, you can change the general padding, margin, and text and background color. You can also edit the text and background color and border in normal and hover state.
- Additional CSS: The extension also provides you the option to add additional CSS if necessary.
After you’ve made all the necessary additional changes for your account page, it might look something like the following screenshot.
We’ve used the Zakra theme in our tutorial. So, depending on the theme you use, your account page might look a bit different.
Wrapping Up:
We hope that now you will be able to customize or modify WooCommerce My Account page without any issues. With the help of this tutorial we are sure that you can add or edit the endpoints and the account dashboard without any hassle from now.
If you found this article helpful, here are some of the other articles that you might find interesting too:
- WordPress vs Blogger: Which is the Better Blog Platform?
- Best WordPress Grid Themes for Masonry Blogs & Portfolios
- Best WooCommerce Plugins & Extensions (Handpicked)
