Documentation

Customize My Account For WooCommerce

Installation

↑ Back to top

Download the .zip file from your WooCommerce account.
Go to: WordPress Admin > Plugins > Add New and Upload Plugin with the file you downloaded with Choose File.
Install Now and Activate the extension.

More information at Install and Activate Plugins/Extensions.

Endpoints Setup and Configuration

↑ Back to top

1. Settings
  ↑ Back to top
  
  Click on the Settings and you will be presented with two different options Settings and Endpoints. You will use both of them to change the existing content and layout of your WooCommerce Account Dashboard. Let’s discuss both of them one by one.
  
  Here you can find different options to customize the dashboard content. Each option is described below:
  
  Custom Avatar: Enabling this option will show User Avatar in the Account Dashboard and users will be able to upload an image of their choice.
  You can disable this option if you do not want your users to upload their avatar from their account dashboard
  
  Endpoint Icon: Enabling this option will allow you to set icons beside your endpoints. You can choose between multiple icons that suit your endpoint name.
  
  Endpoint Icon Position: The selected endpoint icons can be positioned either right or left side of the endpoint. You can choose between the options right and left as per your choice.
  
  Default Endpoint: You can choose any endpoint from all the endpoints to display by default when a user visits the My Account Page. Suppose, you choose downloads as the default endpoint then the downloads tab will be shown to the user when they visit the My Account Page.
2. Endpoints
  ↑ Back to top
  
  Here you will find multiple options to customize an endpoint. You will also be able to create Groups, Links, and add new Endpoints. Every feature is described below:
  
  An endpoint that appears by default or a created endpoint has the following options that can impact its appearance on the My Account Page.
  
  Enable: Check this option to enable or disable the endpoint.
  
  Label: You can type a name for your endpoint in this input box.
  
  Icon: Choose an icon to display alongside your endpoint from multiple icons.
  
  Class: You can type a class name here to reflect specific design via custom CSS codes.
  
  User Roles: Select one or many user roles, you want the endpoint to be displayed. Leaving it blank will show the endpoint to all the user roles.
  
  Custom Content: Type in your custom content to display anything that you want to display under the endpoint. It could be links, shortcodes, media, text, etc.
  
  Slug: (This option appears only in the case of custom endpoint and not the default ones.) Type in your custom slug for the endpoint that you have created. By default, a slug is generated based on the Endpoint Name but you can change it as per your requirement.
Add Group
↑ Back to top

This option will allow you to make a group of endpoints. It will act as a parent and it can have sub-items inside it. The sub-items can be any endpoint.

Click on the Add Group link on the top right and you will be asked to enter the Group Name. Type in the name of the group and hit enter.

After creating a group, you will see it listed in the left section where other endpoints are listed. You can directly differentiate a Group, Endpoint, or a Link by an indexing letter G, L, or E on the leftmost part of the label.

You can then click “ ≣ ” and drag an existing endpoint/link or create and drag an endpoint/link to the group that you made.

Except for Remove, all other options of the group will seem familiar since they were already described in the Endpoints section.

Remove: Clicking on this button will remove the created group.

Add Endpoint:

↑ Back to top

This option will allow you to add an endpoint to the account page. You can add as many endpoints as you want.

Click on the Add Endpoint link on the top right and you will be asked to enter the Endpoint Name. Type in the name of the endpoint and hit enter.

After creating an endpoint, you will see it listed in the left section where other endpoints are listed. You can directly differentiate a Group, Endpoint, or a Link by an indexing letter G, L, or E on the leftmost part of the label.

The purpose of all the options of the custom endpoint will seem familiar since they were already described in the Endpoints section.

Add Link

↑ Back to top

This option will allow you to add a link to the account page. You can add as many links as you want.

Click on the Add Link button on the top right and you will be asked to enter the Link Name. Type in the name of the link and hit enter.

After creating a link, you will see it listed in the left section where other endpoints are listed. You can directly differentiate a Group, Endpoint, or a Link by an indexing letter G, L, or E on the leftmost part of the label.

Except for URL & Open in New Tab, all other options of the group 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.

Note: You will need to hit the Save Changes button if you want all the changes to be saved. Clicking on Restore Default will revert all the settings to the default state (for both Settings and Endpoints option)when the plugin was installed.

Account Dashboard Customization

↑ Back to top

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

You will see that there are multiple Customization Tools. The tools are discussed below:

1. Wrapper
  The Wrapper resembles the total outline and the background of the Account Page. The options that can be configured from here are:
  -Navigation Style
  -Font Family
  -Font Size
  -Background Color
  -Padding
  -Margin
2. Color
  The color option will let you change the color of certain elements of the account page. The elements whose color can be changed from here are:
  
  -Heading Color
  -Body Color
  -Link Color
  -Link Hover
3. Avatar
  The Avatar option lets you customize the avatar that appears on the account page. Here is what you can change from this option:
  -Avatar Layout
  -Avatar Type
  -Padding
4. Navigation
  The Navigation Option lets you customize the Account Page menu. Below are the list of customization options that you can use to customize.
  #Normal State
  -Text Color
  -Background Color
  -Border
  -Border Width
  -Border Color#Hover State-Text Color
  -Background Color
  -Border
  -Border Width
  -Border Color#General
  -Padding
5. Input Field
  The Input Option lets you customize the Input section of My Account Page. Below is the list of Customization options that you can use to customize.
  #Normal State
  -Text Color
  -Background Color
  -Border
  -Border Width
  -Border Color#Focus State
  -Text Color
  -Background Color
  -Border
  -Border Width
  -Border Color#General
  -Padding
6. Button
  The Button Option lets you customize the buttons present in the My Account Page. Below is the list of Customization Options that you can use to customize the buttons.
  #General
  –Font Size
  –Line Height
  –Padding
  –Margin
  
  #Normal State
  –Text Color
  –Background Color
  –Border
  
  #Hover State
  –Text Color
  –Background Color
  –Border
  –Border Width
  –Border Color
7. Additional CSS:
  As the name suggests itself, Additional CSS can be used to add your own CSS codes to customize your 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.

Restoring the Settings and Customization

↑ Back to top

You can easily Restore all your settings to default settings with this option. If you want to start over setting things up from scratch again then you have an option to get back to the initial state with few clicks.

To Restore your settings, Click on Customize My Account > Settings and you will see the Settings Tab. In the Tab, right next to the Save Changes button, you will see the Restore Defaults button. Click on it and the restore dialogue box will appear.

Note: You also have the Restore Defaults button, right next to Save Changes buttons in the Endpoints Tab too. Both of them have similar functionalities.

You will be provided with options to choose what you want to restore. You can choose between Settings and Design Customization. Simply select the desired ones and then click on Reset. All the changes will be reverted to default.

Compatibility with third party WooCommerce plugins

↑ Back to top

Currently, the plugin is by default compatible with followin plugins

WooCommerce Bookings by WooCommerce
WooCommerce Subscription Downloads by WooCommerce
WooCommerce Subscriptions by WooCommerce
WooCommerce Memberships by SkyVerge

So, whenever the plugin is activated, the endpoints added by other plugins except the above four will be overridden. You can follow the following steps if you want to add the third party plugins endpoint.

We are going to take Awesome Support – WordPress HelpDesk & Support Plugin by Awesome Support Team as an example to demonstrate adding the endpoints.

Step 1: Deactivate the Customize My Account for WooCommerce plugin and activate the Awesome Support plugin.

Step 2: Refresh my account page and take a note of the new endpoints added by the Awesome Support plugin.

As you can see, Awesome Support has added two endpoints: Open a support ticket and My tickets. We are going to copy the link of those endpoints by right clicking on them, and selecting the copy link address. The links should be similar to below:

Open a support ticket = https://yourwebsite.com/my-account/0/
My tickets = https://yourwebsite.com/my-account/my-tickets/

Step 3 : Activate the Customize My Account for WooCommerce plugin and go to my account page again. As you can see, there are no endpoints added by the Awesome Support.

Step 4: Goto to the Settings -> Endpoints of the Customize My Account for WooCommerce plugin.

Step 5 : Add a link. Set the label as ‘Open a support ticket’ and URL as https://yourwebsite.com/my-account/0/ and save it.

Step 6: Add a link. Set the label as ‘My tickets’ and URL as https://yourwebsite.com/my-account/my-tickets/ and save it.

Step 7: Refresh the my account page, the Awesome Support endpoints should be there now, and work as expected before.

Resolving JS conflicts with other plugins

↑ Back to top

Enable debug mode: By default, WordPress loads minified versions of CSS and JS files so as to lower the load times. Enable debug mode feature is specially introduced for the testing purposes of the plugin itself during the development time. As we know, WordPress gives a constant that we can add to our wp-config.php file called SCRIPT_DEBUG. WordPress will automatically load the non-minified versions of all CSS and JS files when this constant is defined as TRUE.

Now you can do all these things by simply clicking the checkbox inside the plugin setting rather than going to the wp-config.php file. By default, the debug mode is disabled which means it loads minified files. If you enable this checkbox, unminified version of JS files will load.

Frontend Libraries: You can also enable/disable CSS and javascript libraries that are loaded in WooCommerce MyAccount Page to resolve library conflict with other plugins. By default, all the CSS and JS libraries will load on the front end. Only in the case of a conflict, you can disable the libraries to load on the frontend and check if this resolves the conflict issue.