Create an Elementor My Account Page Template

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 archivecart pagecheckout pagepurchase 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.

elementor my account page
Default WooCommerce My Account page

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.

WtSv hiVO1isGwNFlbTTibwcH6uN32E4OSqzEv9uASf0LrjSjQ6VEmjk ltJJVj9JfTKiv4Cq8CBES9 gymATK3VWAmDYs91b4yf0vOhlmL9fG9S4PGBMUt8i2 kSJy6ZVsI4vaSBw5P3MaXmfcy prAd

After deleting the default page, create a new page and name it “My Account”, click the Publish button then Edit with Elementor.

Dg4QPOWoHNs 6khYn5b5bQoAfnjejxqfiySt n3e2TD3t6hKOCaBKZ4laimPLYkFTFXANBYCoU7j7vlULMrJBuUi1sOWh0JPJxyGepBsKzCxudnlsbkWhnpu7XzEy gAAxQ8LRIvo4ilOwHYmD3F 2VA qCrjQJvuWqTxiXJaV6zcJhUx azOfrmhy5zhg
elementor my account page

When your page opens up in Elementor, first go to Page Settings and ensure the Page Layout is set to Default.

elementor my account page

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.

Dh41Q45AcKEDO4Q0gptM CreNZGfmUUJ2YpbB28to1ZTxj68IPfiYyX9WU4k VrUo VLtB0nfSggoc0ecXfinWy6MjTwwW0quIX2GmGAoGmNPtSnnlUmeCsT
OhMUHqGNmtJyOtdIjf3wNQL7B1JRWVPYogAR7maxC6tNQMhdEXY weWeV1FQlfd4L1JAq uWnpdwNggkHhOdRK2ACu h BT G1IzwBfR gOY5xOtAyywRkave2Te1SPBef42jlrPMpKLFW

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”.

z9scY7fXZQ7gnOg0X9pP1slmUGoDGmQ8yV 3LD

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,

i45reTPvdTYv5C3n1TPstNZIsIKzoL zpb0e2QiSvpIF12iD4uGrKUqe ACfy s6PKpr1dZnGnsRSXQk fKK4nwfXmH43wAL7UEustsGYM2H76n3RA7FLvkLAQd RqyE0zMP

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.

zpTsKywOk3eQR0XoEXJidNFDA7MBTDso1A1wUeo8dfmp6T5TfFLFFCrDBew1tUyLmBnIntc2 TnQONZvAGrzCEOIjGBBck3YkJqW6P6Iufyd6CxTw wD25uPDJXW0RrR5nXlV8WflwTYOUC7XSp2n3HDnTInfqLnN O5iLt32yroTRL8 92gBAJ5ViQ2w

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

IFB 6nJdrf05dEdPJpGWfqTFt RB S6s78U4UbPN3P2NaxSa TsLgf7rNXX2t8AmCAV7FlC8Z4tNhctAlodDTR7QisrtUzKOvlQht6IDAVNXZVmHxZbHB1Hg7

When your template opens up in Elementor, add a new horizontal container.

6mFo1D0ngTYUCpW4YVGAtqJtrHBDv7pGA2JwUv9nD5rcfSkXPKoQ8vj4HHPr9BYzgmvUZ Wc6H3 beArmkaI wyFjlEI5K53mxWCJusWFZ2S6ZE67NI57 slfQ iKZq9coWHJXGJEy 9nbQSA5KdPVj BRn9YBQRVBQDBAGC1pW7SCVeEWKIHFA8GdB0AA
v 3O8VdTWgt9UDQZLf lRDwTi2nYIclM Kn hXutMnARoSj5yJ6Iiz9Nz Ie V5Oi RGTFm7Z7Ejra16NOe1HxDFdmAfcfs Ik46XPTyH5czgQd2WBO3twKmUXjd0VwBok 7Fh75VM15iusruxBuaYMdIAsZzwV7pL IW2F51M8RQ3IX TxdDSeY vmaQ

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.

vUGzLGuaCuD8cSaZwe4euqYeHJ7lXVQa7j5yF0t71uZRW8Qi0vVS3IOMmuoUPmBuNNQxY4GdCYNteN7TJ2YG55B6B7y6wjxq5bpYXJm8IyrdSkzaCi9 5a PLfgYsM1yMamwrQhN2ASyCUqGa8Y0sQoX7GlUPgLf0B8bNYRovWR5BLvJ285hin8XuTFliA

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.

m9Ezp15SreED4kWP98FvkHNChhVEaozEwwlB1s1eDmXjiqJV6DtEWNfcYr076DcsGyzeGQelzSubRMs3v5 dzg z1HbgPfnYIAmQOCSLw DOgk7wi eyMLoZl27ZMqjgqHt3 tr79jR YieXTAVWhmQls

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.

zhVnOlHAlTCzmbCj8PavlpdF3Ib2 ZxHm30jzxPqfvl89yl2pZo yeuK3xrFu7jH5dWjJDpIAug18Rrv0GpQpI9YLAK toJ yI9KFmNtdwSj1K95PE33
ub9HN0acthPzGC5gm2XaIfiT9swIcqG kM5X6AN K5FYkFDtWPBCOv6gFNe 31xBCP9WrrAnYbiEMeyCCdf80YUUToJhGfc6sJCssKd45vEr45QXhZy22wXlRQH3vBqJmxXH41xXHoqbcPhrBeMEwsEVc3PiqF2U9SXh HTmS3gL3KWbFIZKsMXyfC5BcQ

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 (/).

Mtw76H6OakDX0NLTAzWZ637TTk5pu5s1XeNIvJeLmWT4wdrR2y8L3bRzCniTDN3AdxJEcBTV8E9EV0ic9bj7Iut7qj Qk52hQl aQJzA2FWr9YV1RUJXR TlD9rPJ0dsSOKg0d 0b0 tnX34 skhGIlohBxGmpcGpfdS0XCNlU8RatOX7 9bY 9SVe rLw
Hehr1huxbaMVsa40P7R3qkps5iUjLMjfh4cP0AlL5Gq5P5216LTo2yfeZJNZhUHBRwD4EIVLY5Qy68u0Z ljUg89lR2xT9qLuiFhg 7Q7eN5TZ3HOYOEs L6aqznjzK48RntS3to3ptftLpCyAgfRW9dt5Yut8DVuFLy20hWN ob2k 8nOG5uT1fM7DHQ

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.

ynkmZOfp0Wj7AMoj0vZyZ rgxLsl0tNUR7pjCTUAtvrKiBA0NBKUXorwYz7mnlIH N NnqmoLHwvm3dGXb4skheW8X3vGKj95YYMPdXMznwiWWauz7FAMSWdYOC63q V32VidRhOmW8SrdORQqUv256M r6P4xOHf koyj8oTVPOClpqKwr LBoVbAE2AQ

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.

O Y E2Xysn6Ilt QXxSw4xcIZhl9b Vd6kbzYCQdPXrvcOtUPkUo

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.

XYu0RcbCQb1RWojdAgq7RHu4bR11SOtSjdaMGbubjLvQAmn2JQap2v Fo6GC1cB9q HsvPgB1kK7Wbj2tLM1rbO 28Smen9jOUXIJqSpIUygC0pZBwbn4jzo
UkSFrwvLdxm1npplOBL7DfOqp2Ki5HdqE45CtmWvIdNSxpg 52sUt2xIWGSr7Zr6BayVUgMhjjkVZ6m6qVM3SWGJOKer6ZVKTSeoIuSdz9VQ 0kviVq3QX6T DmNIWN 1Xr ZeaL1mXbR9 9rIFiH10T5meO5l5wCozswswlPRcE2XC9pVg97dVj4lj4UA

Click the Plus sign(+) to add a new vertical container

mOXpUboZaYvg2b9dKgBkb IjKFmJLfwWMIYAR71Ufeb2ANdlzN1dkU1 eh0PNErl6dbWv7mqVYhZUuXlqTyq8adVgtO9ouzTYSryEcy cNFC4O RePhR xLebY AaKTIBYc SAzWrS4nb92cQ09qO8XCBi8rnyBIyg5C9rrkBevi0RabV2iXJ2qLgqSccQ
tcORqhv7MQQEFsve6rROiGLarloU6ayny5qflIZAOhyNNQFRPqBtMqczSJlezxorupQFAD8xi9G 56fZtpKedtwOAK1FnzGW5emz0Y3AZ1vhKm mZcP869d3

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

OvxkAq6A8ZQ6cJeYtYrMLSiubgxlC6EiWRt0bi2fX3SMKN1s wVLIrVeH4F0sv4qt2pyBjqZL eSN80uCoE3pr CCC7Sqlt1tb 6IF 570GiDCR1jp9HPGQwiiV XC YUQdBUErMi14NnBjM2OZn6Ud9CIvU6dCHOa1fnz7Lgt7ULYUdprt 7QZYrdafg

Under Title add “New in stock”.

Back in your widgets area add a Products widget.

wYt4j8olTVegT3ne11LvIAnJQMhb5B7DN tQfnkZY3 dzuaOiSCSXHd00 FQ3 1 VLC7UmAH VS I7JNJ 61WndDKDg2 osvCgqtVIT4kOj8IkKkGRHOecStVIgEvz

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.

BN vMlSgEStw4drePjPqClM5MiynWSKiqfgUUjzzeZJRgQSTkH9qDSI2uY6pBuZ95VMpDShhH

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.

MQ55nqoACG1HTgWFp 0WAPHXMbY c 6O3BeX0M mORXW znG8Lok opq1BFMtUv2SEjIkV2Q 7iLWY4AZomvV53A7euMypc yzJzklRd1czLvTWndyjzsRfMRBYt38wpgyUDkhjeMaWWF RuPwfadqua0c9S252botjO6JXmKhGWn3nYraB9pZotkGEw

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

MDZZPofd46Lcozj8z4Wyz3YHBDt8jIe6EVofxnhUwZHavGvxQ76VwtP6zEMir1YRpIL8I6Axwl82LDYk nYdrfhW3GR9e tl BeCc7kH6FwrqRvhWIkMsZkcws BigXRveoJaXj8W0tfM8dCe9nmpD8RknXFbfhikJ5AokUa dsOfG4jKuOMpLYnlwWSAQ

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.

SWqHkXThsOZ0HTg6OYFqtvynGDds1nlAORg7gJFGfbMFMA6OP1JfNtEnE1HIYL SPSP5qM140Yqx7mMBVDZSrXJrjAw8osHcex1WEutLXCv 8 BhDCUSOiT6DL4wGp6nw8cwt7o3aGBj3TQsWDcazmGrbLAQdBAXglkA42ss41Erkih hcpFya 1ZqtYBw

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.

O8lQ 5EGdhJHUGcmHtWduSYgyfsA0KdwRQ5XE6AUey2jV9AmmSflc8I IpT4CqO83046iceuQjzG1XpW2LUPtLVk RJS6QF6frYB3S4JqN5KBUvwSSnLluIXenX6JTjasF7Y3lTGW8jg01FZ CV4EvpbM01rC K9yYYWah0 mKidAYC3Rl74CaPc1eog4w

When you’re done, click the Update button, then preview your page.

1rYrd4KekrKN6pLDeH29HIS1TkBejYJjkTs79RjelCvk8f8BkYLeinzoD SxWHk9PxpNEAWStVETEOT1XsLYoI1K

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.

NbPAI4mwfNj07kybCDZhOibe

HtxLQaMZhCRcKU0VMdXycL4lr Uzjp vFnPaNTHLFge2pu3PS17uBVyiTnjLIaPFLRW1nHpKyHSqsJedkTtGSd1F3dTh5MbMesBScpxhJXqwHqNDvSFf1afWau6G09AxptKW EKX JMwFeSut6qU45kty5eHnC1ZbiUjNO7e2x

qQQ8MKK1N4LzS tZWIbkYE2N6UtQIAxk1jw6ywhGoFNqqTvFqu5TSbGU IKglDnxI5nb0jxNAyNMHAtsXerlPPpMBKe4yauyfyy8D AskPSaqbkBg52WKbNdczLUzpEXC99 FJN h7QXsJxlBif97IkfpJqGBKImrEnJuy2CeEqXX6AvwdMxxvEJOk AgA

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.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users