In this tutorial, I’ll show you how to create an Elementor My Account page for your WooCommerce shop.
This is the second last episode in the Elementor – WooCommerce series. In the previous articles, I shared how you can create a single product template, products archive, cart page, checkout page, purchase summary page and how to Customize WooCommerce Notices using Elementor. Feel free to check them out after this.
Ps: Below is a step-by-step video tutorial you can follow along with.
Video: How to Create My Account Page using Elementor
Our My Account page will have a custom dashboard using WooCommerce endpoints and we’ll be customizing it to match the look and feel of our website.
We’ll be changing from the default My Account page that comes with WooCommerce to create one that matches the look and feel of our website.
What you’ll need
To create a custom My Account page you need Elementor Pro, Alternatively, you can also use the Elementor Cloud.
If you have any of those ready, let’s get started.
Create a new My Account page
On your WordPress dashboard go to Pages and find the default WooCommerce My Account page, delete it. This is to avoid any WooCommerce-Elementor layout conflicts.
After deleting the default page, create a new page and name it “My Account”, click the Publish button then Edit with Elementor.
When your page opens up in Elementor, first go to Page Settings and ensure the Page Layout is set to Default.
I’ll be borrowing a section from the Purchase Summary page which we created in a previous tutorial.
We’ll borrow a container with a gravatar image and some dynamic text.
Just copy the container and paste it on the My Account page.
After pasting the container, select the heading then in the Edit Heading area on the left, go to Content >Title > User Info > Advanced. Under After, change the text to “Welcome back”.
Tip:
If you don’t know how to create this dynamic section, be sure to check out the tutorial on how to create a purchase summary page.
Go to your Widgets area and search for the Elementor My Account widget, add it to the section, and then we’ll start customizing it,
Create a custom My Account dashboard in Elementor
In the Edit My Account area on the left, go down to Additional Options and enable the Customize Dashboard option. This way you’ll be able to create a template and use it for your dashboard.
Click the Update button when you are done.
Go back to your WordPress dashboard and under Templates > Saved Templates, click Add New to create a new template, under template type select Section then name it “custom my account dashboard”, and click the Create Template button
When your template opens up in Elementor, add a new horizontal container.
In the Edit Container panel on the left, go to Layout > Width and add 850px.
From the Widgets area, drag an Icon Box widget to your new container
In the Edit Icon Box area, click on the Icon option and search for the “home” icon from the Icon Library and insert it.
Under View select Stacked, and under Title & Description add “Billing Address”, and “Add or edit your billing address” for the description.
Under Link, we need to make sure when a client clicks on this icon box they are redirected to the Billing Address page to make their edits. To be able to do this, we need the WooCommerce Endpoints.
Add WooCommerce Endpoints
Back to your WordPress dashboard, go to WooCommerce > Settings > Advanced.
Under Advanced, there’s a section called Account endpoints, which you need to use to point users to the Billing page.
First, go to Pages and click View on the My Account page, copy its URL.
Back in your Elementor editor, select the icon box and go to the Link option and paste the URL, then go back to Account endpoints > Addresses and copy the endpoint, paste it next to the URL, then add another forward slash (/).
Down on the Icon Position option, align to the left.
Under Style, set the Icon’s Primary colour to blue and the Secondary colour to yellow.
Add 40px under Size, then move on to the Content area, set the Color to black and the Typography to your Title font
For the Description, set the Colour to black and the Typography to body text. Under Alignment, set the Content alignment to the left and Vertical alignment to the Middle.
Go to the Advanced tab, under Padding unlink values, and add 20px to the Top and Bottom and 30px to the Right and Left.
Under Background, on Normal set the Color to white.
Go down to Border > Box shadow, add 3 under Vertical and 5 under Blur, and on Position select Outline.
With this done, select the Icon Box and Duplicate it.
Select the duplicate icon box and change the icon to a user icon, then on Title & Description add ‘My Account”, and add “Edit your name or change your password” for the description.
Under the Link option, you need to add the link that will point your clients to the My Account page.
For this go back to WooCommerce > Advanced > Account endpoints, copy the Edit account endpoint and paste it to replace the edit-address endpoint.
Click the Plus sign(+) to add a new vertical container
Under Container Width, give it 850px.
Go to the Advanced tab and unlink the Padding values then add 40px to the Top and 80px to the Bottom.
Add a Heading widget to the new container
Under Title add “New in stock”.
Back in your widgets area add a Products widget.
In the Edit Products area, under Columns add 2 and under Rows add 1, then enable the Pagination option.
Under Style, make sure Column Gap is 20 and Rows Gap is 40.
Go down to Price and add Color (blue) and Typography (body text).
On the Box option (that’s the box containing the product), add a Padding of 10px on all sides and give it a Background Color of white.
When you’re done customizing to your satisfaction, click the Publish button.
Custom My Account Page Responsive Settings
Go over to the Responsive Mode at the bottom left.
On the Mobile device, select the Icon Box and give it a Width of 100% (full width), and reduce the Icon size to 25px.
Do the same for the My Account icon box as well.
Under Icon Position, align both Icon boxes to the left.
When you’re done, Update your template then go back to the My Account page and reload it.
Select the My Account widget and go to Additional options
Go to Choose Template and select the My Account template you just created. Your template should now be displayed on the page.
With the My Account widget selected, go to Content > Tabs > Spacing and give it 40px.
Under Style, set the Typography to body text then give it a Background Colour of transparent blue.
Down on the Color option, set it to Main; which is black.
Go to the Active tab and set the Background colour to transparent yellow, and set the Colour to blue.
Under Typography;
Set the Section Titles’ colour to blue and add your Title Typography.
On General Text, set the Color to black and the Typography to body text.
For Login Messages, set the Color to black and the Typography text.
You can also set up your Links’ colour to blue on Normal and yellow on Hover.
Proceed to the Forms option;
For the Labels, set the colour to black and the typography to body text.
Under Order Details, add 30 on Rows Gap.
Under Title & Totals, set the colour to blue and the typography to blue.
Go ahead and go through the rest of the options (Items, Links, Dividers etc) and style them to the colours and typographies of your choice.
When you’re done, click the Update button, then preview your page.
If your page still requires more changes you can go back to your editor and make more customizations. You should also go ahead and double-check your Responsive Settings and make sure your new changes are looking good on all devices.
Add My Account page to WooCommerce pages
Back on your Elementor dashboard, click the hamburger icon (☰) in the upper left corner then go to Site Settings > WooCommerce.
Go to the My Account option and select your My Account page then click the Update button.
In Closing
That’s how you can use Elementor Pro or Elemenor Cloud to create a custom My Account page for your WooCommerce shop.
For any comments, questions or suggestions please use the comments section below. Don’t forget to subscribe to my newsletter and Youtube channel for more tips and tutorials.
