How to Design a WooCommerce My Account Page in India (Without Hiring a Developer)
You’ve spent weeks getting your shop page, cart page, and checkout page just right. But there’s one page most Indian store owners forget completely — the My Account page.
This is the page your repeat customers land on every single time they come back to buy from you again. And repeat customers matter more than most business owners realise.
Studies on ecommerce shopping behaviour show that repeat customers make up close to 21% of shoppers, but they generate almost half of all revenue for a store. Acquiring a brand-new customer can cost up to 25 times more than keeping an existing one happy. So if your My Account page still looks like the plain, default WooCommerce page — with a “Downloads” tab showing up even though you only sell physical products like notebooks, sarees, or spices — that’s revenue-generating real estate going to waste.
The good news is you don’t need to hire a developer or write a single line of code to fix this. If you’ve already used Elementor to build your shop, cart, and checkout pages, you already have everything you need. In this guide, I’ll show you exactly how to design a WooCommerce My Account page in India using Elementor’s native My Account widget, step by step.
Why Your My Account Page Deserves More Attention
Think about your favourite neighbourhood kirana store. When you walk in for the fifth time, the shopkeeper already knows your name, remembers what you usually buy, and makes you feel like a regular, not a stranger. That’s exactly what a well-designed My Account page should do for your online customers.
Most Indian business owners spend all their energy on the shop page and checkout page, because that’s where the “sale” happens. But the My Account page is where loyalty happens. It’s where customers check their order status, track a delivery before Diwali, update an address, or simply log back in to shop again.
If this page looks broken, unbranded, or confusing, you’re quietly telling your best customers that you don’t care about the experience after the sale. In a market where word-of-mouth and repeat purchases drive a huge share of small business revenue in India, that’s a costly mistake.
Industry estimates suggest a large share of India’s small and medium businesses selling online still rely entirely on default, unbranded account and dashboard pages, simply because they assume customisation requires a developer and a big budget. It doesn’t.
What You'll Need Before You Start
- WordPress with WooCommerce installed — your store is already live
- Elementor — the free or Pro version, both work for this
- Your existing shop, cart, and checkout pages already built — this guide assumes you’ve followed the same process for those
Elementor comes with a native My Account widget, built by the Elementor team itself, so it sits right alongside the Cart and Checkout widgets you’ve likely already used. No extra plugin, no extra cost, no extra learning curve.
Step-by-Step: How to Design Your My Account Page in Elementor
Step 1: Replace the Default WooCommerce Shortcode
- Go to your WordPress Admin Dashboard.
- Click on Pages → All Pages and find your My Account
- Click Edit. You’ll see a shortcode already sitting on the page — this is what WooCommerce uses to display the default account page.
- Delete this shortcode and save the page.
- Click Edit with Elementor to open the Elementor canvas.
Step 2: Set Up Your Containers
- Add a container to your blank canvas — this is the basic building block in Elementor.
- Add top and bottom padding (100 pixels works well) so the layout has breathing room.
- Right-click the container and duplicate it, so you have two containers — one for your hero/header section, and one for the My Account widget itself.
Step 3: Add the My Account Widget
- Click the plus (+) button on your second container to add a new element.
- Search for “account” in the elements panel.
- Drag the My Account widget into the second container.
You’ll immediately see it populate with the default tabs: Dashboard, Orders, Downloads, Addresses, Account Details, and Logout. If you only sell physical products — say you run a notebook or handicraft business — you don’t need that Downloads tab visible to customers. We’ll fix that later in this guide.
Step 4: Design the Header (Hero) Section
This is the section that welcomes your customer back every time they log in.
- Select your first container and change its direction to vertical, with items center-aligned.
- Under Style, add a background image — set it to Cover, Position Center, and increase the height so it feels substantial.
- Add a background overlay in your secondary brand colour, and reduce the opacity slightly so the image still shows through.
- Add two headings, one text element, and one button by dragging them into the container.
- Edit the top heading with a short label (like “Welcome Back”), and style its typography and colour.
- Edit the main heading with a welcome message, and increase its font size for impact.
- Add supporting text below it, center-aligned, with a slightly narrower custom width so it doesn’t stretch across the whole screen.
- For the button, set the text to “Shop Now”, and link it using Dynamic Tags → Internal URL pointing to your shop page.
- Style the button with your accent colour as the background and text colour, with a hover state that switches to your secondary colour for a nice interaction.
Step 5: Add a Page Heading with Breadcrumbs
- Inside your second container, add a Breadcrumbs widget and an Icon List
- Set the container’s direction to vertical, and move the breadcrumbs to the top.
- Center-align both elements, and set them to full width, along with the My Account widget itself.
- Style the breadcrumbs: text colour for regular text, accent colour for the active link, and your standard text typography.
- In the Icon List, remove the extra list items so only one remains, then change its text to something like “Your Account”.
- Choose a relevant icon (a simple user/account icon works well), size it around 32 pixels, and colour it in your primary brand colour.
- Add bottom margin (around 50 pixels) so there’s clear breathing space before the widget begins.
Step 6: Style the My Account Widget Itself
This is where the real transformation happens, and Elementor gives you granular control over every part of it.
- Layout: Under the Content tab, choose whether your tabs (Dashboard, Orders, Addresses, etc.) appear vertically on the left, like a sidebar, or horizontally across the top. Either works — pick what fits your design.
- Tabs styling: Set the typography to match your site’s text style. On hover and on the active/selected tab, switch the colour to your accent colour, with a soft background accent colour behind it.
- Sections: Decide whether each section (like the Orders table or Account Details form) needs a background colour, border, or shadow. A clean, borderless look usually feels the most premium.
- Section titles: Increase the typography size slightly so headings like “Billing Address” or “My Orders” stand out clearly.
- Checkboxes and radio buttons: These appear mostly on your login and registration screens, visible after logout. Style checkboxes slightly larger than radio buttons for clarity.
- Links: Set link colour to your accent colour so users can immediately spot clickable text.
- Forms: Style the field labels (smaller typography), the input fields (a light background tint using your primary colour at low opacity helps fields feel tappable), and text colour.
- Buttons: Set the background to your accent colour, with a hover state in your secondary colour, matching every other button on your site.
- Add a little padding (around 20 pixels) around the whole form for breathing room.
- Click Publish.
That’s it. Compare this to the plain, generic layout WooCommerce ships with by default, and the difference is night and day. It now looks like a genuine extension of your shop, cart, and checkout pages, not a page that was bolted on as an afterthought.
How to Hide the Downloads Tab (For Stores Selling Only Physical Products)
If you sell physical products only — notebooks, clothing, spices, handicrafts, anything that ships in a box — your customers don’t need to see a Downloads tab on their account page. It’s confusing clutter that doesn’t apply to them.
Here’s how to remove it, without touching a line of code yourself:
- Go to Plugins → Add New, and search for Code Snippets.
- Install and activate the plugin. It’s completely free — you don’t need any paid version for this.
- In your dashboard, go to Snippets → Add New.
- Copy the Snippet from below and Paste in the ready-made snippet
- Give it a title like “Hide Download Tab”.
- Click Save and Activate.
- Go back to Elementor, clear file and data, sync the library, and save changes.
- Purge all cache on your site.
- Refresh your My Account page — the Downloads tab is now gone, and the tab order flows cleanly from Orders straight to Addresses.
Code Snippet To Hide "Downloads" Tab:
add_filter( 'woocommerce_account_menu_items', 'hide_downloads_tab_my_account' );
function hide_downloads_tab_my_account( $items ) {
unset( $items['downloads'] );
return $items;
}
Smarter Version Of Code Snippet To Hide "Downloads" Tab only If the customer has no downloadable products:
add_filter( 'woocommerce_account_menu_items', 'hide_downloads_tab_if_empty' );
function hide_downloads_tab_if_empty( $items ) {
$downloads = WC()->customer->get_downloadable_products();
if ( empty( $downloads ) ) {
unset( $items['downloads'] );
}
return $items;
}
If your store sells both physical and downloadable products, there’s a second version of this snippet that shows the Downloads tab only to customers who’ve actually purchased a downloadable product — everyone else won’t see it at all. Both snippets are available as a free download, so you never need to write or debug code yourself.
Bonus: Your Login and Sign-Up Page Gets Redesigned Too
Here’s a pleasant surprise: because the My Account widget also controls your login and registration form, all the styling you just applied to your fields and buttons automatically carries over to your sign-in and sign-up page as well.
So without any extra work, your customers now get a beautifully branded experience from the moment they try to log in, right through to browsing their order history. This consistency matters — a customer landing on a plain, generic login screen after browsing your polished shop page can feel like they’ve been redirected to a completely different, less trustworthy website.
Real Results: What Changed
Compare the two versions side by side.
The default WooCommerce My Account page is bare — plain black text on a white background, tabs on the left with zero branding, and no visual connection to the rest of your store.
The redesigned version now includes a branded hero banner welcoming customers back, a clear breadcrumb and heading, styled tabs that match your accent colours, clean forms, and a Downloads tab that only shows up when it’s actually relevant.
The result: your My Account page finally looks like it belongs to your brand, the same way your shop, cart, and checkout pages do. You don’t need to be a professional designer to achieve this. As long as you’re willing to spend an hour clicking through Elementor’s styling options, you can build an account page your customers will actually enjoy returning to.
Conclusion
Your My Account page is one of the most overlooked pages on any Indian ecommerce website, and one of the most valuable, because it’s built for the customers who already trust you enough to come back. With Elementor’s native My Account widget, you can redesign this entire experience — the dashboard, the tabs, the forms, and even the login/register screen — without a developer, without custom code, and without spending anything beyond the free Code Snippets plugin.
INTERNAL LINK: How to Design Your WooCommerce Checkout Page
INTERNAL LINK: How to Design Your WooCommerce Shop Page
INTERNAL LINK: How to Design Your WooCommerce Cart Page in Elementor
