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 change the slug, label, and user roles easily from the plugin settings. Additionally, you can also add any type of content to each tab such as text, media, and forms.
Each of the features of the User Registration Customize My Account add-on is explained below:
Installation #
- Firstly, you need to purchase the plugin User Registration – Customize My Account add-on.
- After the successful purchase, you will get the plugin zip file under your WPEverest account page.
- Now, you can download the plugin zip file from there.
- Through your WordPress Dashboard, visit Plugins -> Add New -> Upload and then choose the downloaded zip file and then install and activate it.
- Now you are ready to use this add-on for your site.
Setup and Configuration #
Once, you have completed the above-mentioned task of installing and activating the plugin, you can go to the Settings tab of User Registration. Here, the Customize My Account tab is added alongside other plugin settings.
In the Customize My Account tab, you can configure the general settings. There are four default tabs in the My Account tab: Dashboard, Edit Profile, Edit Password, and User Logout.
How to Edit Tabs? #
Each tab settings has five settings that you can use to customize the tabs as per your requirement. They are:
- 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 that is 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 is a variety of icons to choose from so, you can select any one of these icons according to your requirements.
- Restrict to User Roles: This option allows you to restrict the visibility of the tab to the selected user roles.
- Override Endpoint Content: This setting provides you the option either to override endpoint content for “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 type of 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.
Use of 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.
URL: Enter the URL of the page which you want to visit when. Example: https://www.google.com
Open in New Tab: Enabling this option will open the link in a new tab when you click on it.
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.
My Account Dashboard 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 >> Setting >> Customize My Account >> Advance Settings.
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.
