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:
- Elementor Free Version: Get Elementor.
- WooCommerce Plugin: Get WooCommerce.
- PowerPack for Elementor: Get PowerPack.
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”.
Next, click on “Edit with Elementor” to open the page in Elementor Page Builder.
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.
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
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.
- 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.
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
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.
- 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.
- 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.
- 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.
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.
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”.
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!
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!
