How to Customize the WooCommerce My Account Page using Elementor?

WooCommerce My Account Page

Table of Contents

WooCommerce is one of the most used eCommerce platforms on the internet. A recent study suggests that at least 5+ million stores use WooCommerce to sell products (digital or physical) on the internet. Remarkable, isn’t it?

Mostly the user interface and experience feel the same for all the WooCommerce stores. All the stores have a look-a-like add-to-cart to the checkout process to the My Account page. WooCommerce’s My Account page contains information regarding a user’s order, invoices, payment methods, addresses, and other profile details. So, if a website has a customized My Account page, then it would give a stunning feel to the user.

But, as we know, customizing WooCommerce pages is no easy task. Although Elementor Pro has widgets that can be used to customize the Product page of WooCommerce, there isn’t any widget to customize the My Account page.

Here comes the PowerPack’s WooCommerce My Account widget that you can use to customize the My Account page of WooCommerce. The best part is it doesn’t require Elementor Pro! Yes, it works with the free version of Elementor.

In this tutorial, I will start with the basics and we will dive deep into customizing every aspect of the WooCommerce My Account page.

So, without any further ado, let’s jump into it!

Customizing WooCommerce My Account Page

We have also created a short to-the-point video that explains in detail how you can customize the WooCommerce My Account Page. So, in case you like the video explanation, I suggest you have a look at it.

Now, let’s continue. To customize the My Account Page, we will be using these three plugins:

Once you’ve installed and activated these plugins, you would have to create a new page by heading over to your WordPress Dashboard > Pages > Add New. Name the page as “Custom WooCommerce My Account Page”.

Create a new Page from WordPress Dashboard
Create a new Page from WordPress Dashboard

Next, click on “Edit with Elementor” to open the page in Elementor Page Builder.

Edit the Page with Elementor
Edit the Page with Elementor

Launch Elementor Editor

As soon as you click on “Edit with Elementor”, the Elementor editor will open up. Next, drag and drop the My Account widget in Elementor editor. As soon as you add the My Account widget, you’ll see the My Account tabs appear with default settings.

The below screenshot shows how your page would look like after adding the My Account widget.

A Page containing WooCommerce My Account Widget
A Page containing WooCommerce My Account Widget

Now that we have added PowerPack’s WooCommerce My Account widget to the page, we will customize and style the My Account page of our WooCommerce store in Elementor editor’s content and style tab.

PowerPack’s WooCommerce My Account Widget Customization in Content Tab

My Account Widget Customization in Content Tab
My Account Widget Customization in Content Tab

There are 2 sections in the Content tab of My Account Widget: Preview and Tabs.

  • Preview: In this section, you can select the endpoint that’ll be opened for you so that you can customize the My Account page of your site. The available endpoints that you can choose from are Dashboard, Orders, Downloads, Addresses, and Account Details.
Endpoint Options
Endpoint Options
  • Tabs: In the tabs section, you get the option to choose which tabs you want to show or hide. The available tabs that you can choose to show/hide are Dashboard, Orders, Downloads, Addresses, Account Details, and Logout link.
Show/Hide tabs in the My Account Page
Show/Hide tabs in the My Account Page

By default, you do not have the option to show or hide tabs in the WooCommerce My Account page. You would have to do this programmatically if you were not using PowerPack’s My Account widget!

Now that we have set up the structure of the My Account page, let’s style it to make it stunning.

PowerPack’s WooCommerce My Account Widget Styling in the Style Tab

Style Tab of WooCommerce My Account Widget
Style Tab of WooCommerce My Account Widget

As you can see in the screenshot above, the My Account widget consists of 5 sections in the style tab:

  • Tabs
  • Tables
  • Buttons
  • Forms
  • Notices

Let us go through each of the sections one by one.

  • Tabs: As the name suggests, here you can customize the position of the tabs, typography of tab content, background, text, link, and border colors of the tab in default and active tab. You can further set the spacing between the tabs and spacing between the tabs and content.
Tabs section in the Style tab of the My Account widget
Tabs section in the Style tab of the My Account widget
  • Tables: In the tables section, you can style the “Orders” table of your My Account page. You can set the typography and border style of the whole table at once or you can set each of them one by one for header, rows, and cells. Further, you can also select the text color, background color, and padding for the header text, row text, and text in each of the cells.
Styling the Tables section
Styling the Tables section
  • Buttons: This section is used to style the buttons present in different tabs of My Account page. From this section you can set the typography, background color, text color, and border type for the buttons in normal and active states. Further, you can set the padding and button spacing from this section too.
Button Section Styling
Button Section Styling
  • Forms: The My Account page of your WooCommerce store consists of forms like Shipping Address, Biling Address, and Account Details. So, in the forms section, you can style the fields of these forms. You can style headings, submit button, labels, and input fields in forms. Each of these fields can be styled by changing their text, background, border, box-shadow, link, and link hover color.
Styling the Forms section in the Style tab of the My Account widget
Styling the Forms section in the Style tab of the My Account widget

Further, you can align the text in the input field and change the width of the submit button. Next, you can set the padding between each of the fields and margin between headings and fields and outside the submit button.

  • Notices: In the Notices section, you can style the background color, text color, icon color, border properties, padding, and typography for any notice that is shown on any of the tabs in the My Account page of your WooCommerce store.
Notices section styling in the My Account widget
Notices section styling in the My Account widget

Set the newly created “Custom WooCommerce My Account Page” as the Default My Account Page

Once you’ve styled and customized the Custom WooCommerce My Account Page that you just created, head over to WooCommerce >> Settings >> Advanced and choose the page that you just created as the “My Account page”. In the below screenshot, we have set the “Custom WooCommerce My Account Page” that we created in the above step as the default “My Account Page”.

Set the newly created "Custom WooCommerce My Account Page" as the Default WooCommerce My Account Page
Set the newly created “Custom WooCommerce My Account Page” as the Default WooCommerce My Account Page

This will open up the Custom WooCommerce My Account Page that you created using PowerPack’s WooCommerce My Account widget whenever a user heads over to log in to your site.

Wrapping it Up!

In the above steps, we have customized and styled our WooCommerce My Account page to have a particular stunning stylish look and feel. We have used a combination of colors, border styles, and box-shadow to achieve this look. You can check the options that we used in the above screenshots.

Check out our WooCommerce My Account Page customized using PowerPack’s WooCommerce My Account widget below!

Custom WooCommerce My Account Page
Custom WooCommerce My Account Page

I am sure, with the help of this tutorial, you would have been able to easily set up your Custom WooCommerce My Account Page.

You can do a lot more with the PowerPack Addon for Elementor. There are more than 70 creative widgets that you can use to customize your Elementor pages. If you wish to learn more about the PowerPack add-on for Elementor, check here.

What are your thoughts on this tutorial? Do share if you found this guide useful!

Liked this Article? Join 5000+ Subscribers

Get latest Elementor updates, tutorials, and freebies in your inbox.
No Spam Guaranteed.
Kamlesh Vidhani

Kamlesh Vidhani

Leave a Comment

Get 70+ Elementor Widgets with PowerPack Addons for Elementor

Download PowerPack Free

Subscribe to receive latest updates, announcements, offers, deals & discounts.

Latest Additions