you own an online store that was created by adding WooCommerce , you must know very well that the personal account page, or what is known as the (My Account Panel) page that the store’s customers see when they log in to their accounts, appears in an abstract and simple design for these customers.
For this reason, you may want to improve the design of this page and make it appear better to your store customers and familiar with your brand. You may also want to display additional information on it to increase their confidence and improve their shopping experience.
In today’s article, we will explain the steps to customize the customer’s personal account page in the WooCommerce store and make it have a professional appearance in a simple way that is compatible with all WordPress templates, relying on the default plugin editor Gutenberg .
What is a WooCommerce profile page?
The personal account page (My Account) is a page provided by the WooCommerce add-on in your store to serve as a central control panel for your store’s customers. Through this page, customers can view previous orders they have made, view and modify addresses, review their payment details, and other matters.
This page is located at the link /YOUR_DOMAIN/my-account (where YOUR_DOMAIN represents the domain for your site)
If the customer is not registered on the site, and tries to view this page, he will be asked to log in as follows:
If the customer has created an account and logged in to the site, the page will appear to him in the following default form:
The virtual account panel basically includes a list of six relevant links that take the customer to different positions in the store, which are:
- Control Panel /YOUR_DOMAIN/my-account This link displays the main page of the User Account Control Panel.
- ORDERS YOUR_DOMAIN/my-account/orders displays the customer’s order history, the number, date and status of each order, and the procedures available for each order.
- Downloads YOUR_DOMAIN/my-account/downloads Shows the customer the downloadable products (product name, remaining downloads, expiry date, attachment download button..)
- Your_DOMAIN /my-account/edit-address allows the customer to update their billing and shipping addresses.
- Account Details YOUR_DOMAIN/my-account/edit-account Here the customer can update his personal information associated with his user account such as his first and last name, display name, etc..
- Logout YOUR_DOMAIN/my-account/customer-logout Clicking this link will log the customer out of their account and return them to the section of the dashboard that prompts them to log in
It should be noted here that some external templates and plugins may display additional sections and links here for this page sometimes.
Steps to customize the Account Dashboard page in WooCommerce through the Gutenberg Editor
You can use any page building plugin you prefer in WordPress to customize the design of the account page for your WooCommerce store, but in this article we will rely, as we mentioned at the beginning, on the default Gutenberg editor to customize our page, but we will support it before that with a group of plugins.
To customize the personal account page through the Gutenberg editor, follow these steps:
Step 1: Install the necessary plugins
The Gutenberg editor is distinguished by the fact that it provides many plugins that support it with professional components and designs, and here we will use with it two free plugins available in the official WordPress store, which are:
1. Ultimate Addons for Gutenberg
Also known as Spectra , this plugin is a free plugin that enhances the Gutenberg editor and adds a set of ready-to-use blocks and designs.
Go to the site control panel > choose Add-ons > Add New > and search for the name of the Spectra add-on in the search box. When you find the required add-on, install and activate it on your site .
Then a page will appear to you that shows you all the blocks or components provided by the add-on. Activate what you need to use it according to your desired design (in this article we will only need the Info Box component), but you are free to use and activate any component you want.
Read more: Explaining the Ultimate Addons for Gutenberg add-on to customize page design
2. Gutenberg Blocks Library & Toolkit – Editor Plus
This add-on also enhances the Gutenberg editor and adds a set of blocks, fonts, icons, and more. It has the advantage that it enables you to add custom formatting, visual and animation effects to Gutenberg blocks without having to write custom code, copy formatting from one component and paste it into another.
It also provides an area for writing custom CSS code for all Gutenberg blocks, and it also provides the ability to write general CSS code that is applied throughout your site through the plugin settings window that you can access through the Control Panel > Settings > Editor Plus .
Install and activate the add-on on your site in the same way you installed the previous add-on. After activating the plugin on your site, you will be able to modify any Gutenberg block and add custom CSS to it easily from within the editor, as we will see shortly.
Read also: How to customize the appearance of your site without writing code
Step Two: Modify the design of the default personal account page
Now go to the site control panel and choose Pages < Page (My Account Panel) < then click on the Edit link under the page name to start modifying this page and changing its default appearance.
When you edit the page, you will see that it includes one block, which is the short code block, and inside it is the following code [woocommerce_my_account], which tells WooCommerce that this page is a page (my account panel) in order to display the customer’s personal account information, as shown in the following image.
I will first move this block to the bottom of the current page to move the main account panel to the bottom of the new design that I will add to the page.
Then I will add an image of my store in the page header that welcomes the store customer. After that, I will replace the view of the list of links on the account page with a group of boxes, so that each box will direct me to one of these links to make the page look more professional, as shown in the following image:
To design this page, I will add an image to the header of the page, then I will add a columns component that displays 3 equal columns inside it, and inside each column I will add the Info Box component. This component is an information box that provides an elegant way to display important information in the Gutenberg editor and can display a colorful icon. Next to Primary Title and Text
In this design, I repeated the columns to add 3 new boxes. Here, I also controlled the settings of the columns and the boxes within them from the customization bar appearing on the left side of the account page editing window.
I also changed the icons in each box to represent the content of the box and added borders to each column in the table until I got the following form on the account page.
I will make each of these boxes send the customer to a specific page in the store. For example, to link the checkout box to a site checkout link, from the component customization bar, I choose the Call To Action section, select the Complete Box option from the drop-down list, and put in the Link field the link I want to go to. as follows:
Now when you click on this box on the page, the customer will be logged out of his account, and returned to the dashboard section, which will prompt him again to log in to the store.
In the same way, the rest of the links on the page can be customized and direct the customer to the required pages in the store.
Step Three: Hide the personal account page from unregistered users
The final step we’ll do is hide the default WorkCommerce account page from our page design using custom CSS code.
To do this we need to add custom CSS code to the shortcode component that we initially moved down the page. So we select the component and choose from the left sidebar Custom CSS and paste the following code into it:
We also need to hide the new custom components we added to the account page from users who are signed out of the store and make them only visible to those who are signed in.
To do this, we select the group of components that we want to hide, and from the sidebar, choose the Advanced tab < Display Condition> and choose from the drop-down menu the User State option.
If we log out of the account and try to view the account page, the page will not appear to us in this case.
Congratulations that’s it! Now it’s your turn to add your touches to the design, and customize the account page in your WooCommerce store the way you want.
Conclusion
In this article, we learned about a simple and completely free way to customize the personal account page (My Account Panel) in the WorkCommerce store using the default Gutenberg editor and with the help of some free plugins that support it.
Of course, you can use any other method or tool you prefer to build pages to create your own design. The important thing is to make sure that the page appears elegant, simple, easy to use, and compatible with the overall design of your store.
