With the new Customize My Account Add-on, you can easily customize the My Account page of your WordPress website. The add-on allows you to manage the tabs on the My Account page. Therefore, you can easily change the slug and label, control access to users, and more. Additionally, you can also add any content to each tab, such as text, media, and forms.

Prerequisite:
✅ Active installation of User Registration & Membership Plugin Pro.
✅ Active installation of the Customize My Account addon.

Install and Activate Customize My Account Addon #

Since Customize My Account is a premium addon, you must buy the plugin’s premium version to use it. To activate User Registration & Membership Pro, purchase the plugin from its official website. After that, you can install and activate the plugin using your license key.

Next, activate the Customize My Account addon through User Registration & Membership > Addons. Now, search for Customize My Account and toggle to activate the addon.

For a detailed guide, read our documentation on using User Registration & Membership Pro and its addon.

Setup and Configure Customize My Account Addon #

Verify the activation by navigating to User Registration & Membership > Settings > My Account > Customize My Account.

In the Customize My Account tab, you can configure the general settings.

Configure Endpoint Settings #

The plugin provides setting options for these endpoints: Dashboard, Edit Profile, Edit Password, User Logout, Orders, Downloads, Edit Address, and Membership.

Each endpoint can be configured further:

• Endpoint Slug: This is the text that is used as the page URL for managing the individual My Account tabs. You can enter the desired slug text in this setting to change the slug of the tab, but make sure it is unique for each page. 
• Endpoint Label: This is the text displayed in the actual My Account tabs. You can also change the label and enter the label of your choice.
• Endpoint Icon: It is yet another feature that allows you to add an icon for your My Account tabs. There are various icons to choose from, so you can select any of these icons according to your requirements.
• Endpoint Access Control: You can choose “Restrict” to block access to this endpoint for the chosen role. Similarly, to grant permission, select “Access”.
• Allow/Restrict to user roles: From here you can choose the user roles for whom you want to allow or restrict the endpoint access.
• Modify default content: You can modify the default content of the endpoint form here. Toggle to enable, and you can edit the endpoint content.
  • Note: This option is available only for the Dashboard (Read more here).
• Custom content placement: You can decide on custom content placement from here.
• Override Endpoint Content: This setting allows you to either override endpoint content for the “My Account” menu option or not.
• Endpoint Custom Content: This option allows you to add custom content to the My Account tabs. Here, you get a WYSIWYG editor with an HTML editor. So, you can add any content like text, images, and even forms. 

How to Add a New Tab as an Endpoint? #

Other than the default tabs, the Add-on also allows you to add additional tabs to your My Account page. To add a new tab, you have an option to select an Endpoint. Select an Endpoint, edit and customize it according to your requirements. You can add as many endpoints as you want.

Useing Smart Tags

You can use the available smart tags in the content area of the endpoint tabs for displaying the required details of the users in the My Account section. For example, add {{first_name}} in the content section and the value of the First Name field will be displayed in the respective endpoint tab.

Wanna know the list of available smarts tags?

Now, when the user logs in to your site, they can see the selected details on their My Account page under the given tab.

How to Add a New Tab as a Link? #

To add a new link, click on the Add New button on the top-right of the settings. Once, you click on the add new button now, you have an option to select a link. Select a new link, edit and customize it according to your requirements. You can add as many links as you want.

After creating a link, you will see it listed in the left section where other endpoints are listed. 

Except for URL & Open in New Tab, all other options of the endpoint will seem familiar since they were already described in the Endpoints section.

Link URL(For External Website Link): Enter the URL of the page which you want to visit when. Example: https://www.google.com
Select Page(For Internal Page): You can select the page within your site if you choose the Internal Page option.
Link Label: Set a label for the link.
Restrict to user roles: You can restrict the specific tabs to the chosen user roles.
Open in New Tab: Enabling this option will open the link in a new tab when you click on it.

The Link translation option is supported in the Customize My Account add-on

How to Hide/Disable Tabs? #

With this Add-on, you can hide any of the My Account tabs in the Frontend. This can be very useful when you don’t want to show some information to the users on your site. To hide/disable any tab, you need to turn off the Enabled option for the individual tab. 

How to Manage and Delete Tabs? #

Furthermore, the Add-on allows you to easily change the positions of the tab in the My Account page. You can simply drag and drop the tabs to place in the desired order. 

Also, you can delete any of the additional tabs that you add to the My Account if you want. But, you cannot delete four Default tabs. To delete a tab, go to the respective tab and Click on the Delete button which is next to the Enabled option.

How to Customize the Default Dashboard content? #

Enable the ‘Modify default content’ option to write a custom content on the Dashboard tab. You can choose smart tags from the available list.

My Account Dashboard Style Customization #

With the Customize My Account add-on, now you can style or design the My Account page of the User Registration. So, go to User Registration & Membership > Settings > My Account > Customize My Account.

Click on the Customize My Account page and you will be redirected to the live editing panel of the plugin where you will see your User Registration My Account Page on the right and the customization tools on the left.

There are basically 6 Customization Tools. The tools are discussed below:

1. Wrapper

The Form Wrapper constitutes the total outline and the background of the Account page. Below are the lists of customization options that you can use to customize.

• Background Color
• Border Type
• Border Width
• Border Color
• Border Radius
• Content Padding
• Content Margin

2. Color

The color option will let you change the color of certain elements of the account page. Below are the lists of customization options that you can use to customize.

• Heading Color
• Body Color
• Link Color
• Link Hover

3. Navigation

The Navigation Option lets you customize the Account Page menu. Below are the lists of customization options that you can use to customize.

• Navigation Wrapper
  • Navigation Style
  • Background Color
  • Border Type
  • Border Radius

• Navigation Link
  • Background
  • Background Hover
  • Text
  • Text Hover
  • Border Type
  • Border Hover Color
  • Border Radius
  • Padding

4. Forms

This option lets you customize the Input section of My Account Page. Below are the lists of Customization options that you can use to customize.

• Field Labels
  •  Font Size
  • Color
  • Margin

• Fields Styles
  • Background
  • Background Focus
  • Text
  • Text Focus
  • Border Type
  • Border Radius
  • Padding

• Checkbox/Radio Styles
  •  Font Size
  • Color
  • Margin

5. Buttons

This option lets you customize the buttons present in the My Account Page. Below are the lists of Customization Options that you can use to customize the buttons.

• Background
• Background Hover
• Color
• Hover Color
• Margin 
• Padding

6. Additional CSS

As the name suggests itself, Additional CSS can be used to add your own CSS codes to customize the account page, the way you want. You can see a CSS editor in the customizer where you can add all the CSS codes you want.

That’s how you use Customize My Account addon.