How To Customize Woocommerce My Account Page Easily Without Coding

In this tutorial, I will show you how you can customize WooCommerce my account page using just a simple WordPress page builder and get your desired customized styled “my account page“.

To customize your own WooCommerce My Account Page, you need to follow the following steps:-

  1. Download Elementor Pro
  2. Set your WooCommerce Endpoints.
  3. Create a new menu and paste the endpoints.
  4. Create a new page and design using Elementor
  5. Add the menu to the page.
  6. Paste the custom CSS
  7. Save it as your new account page.

If you want advanced customization of the WooCommerce My Account Page, then Yith WooCommerce MyAccount Customize Plugin is the best plugin so far.

Disclosure: I may receive affiliate compensation for some of the links below at no cost to you if you decide to purchase a paid plan. You can read our affiliate disclosure in our privacy policy.

Video tutorial to Customize WooCommerce My Account Page in WooCommerce

Subscribe to my YouTube Channel

Download Ready to use WooCommerce My Account templates for Elementor.

Do you Know – Other Ways To Customize WooCommerce My Account Page

  1. Using Elementor plugin – This Guide
  2. Using YITH plugin – Read Here
  3. Using Code Snippets – For Coders/Developers. – Read Here

Do you know, The Ultimate Guide on WooCommerce Tutorials covers everything about WooCommerce Customization with Video Tutorials. The World’s #1 WooCommerce Guide.

Step 1: Download Elementor Pro

So in this tutorial, we will be using Elementor, which is a WordPress Page builder plugin. Elementor also has a pro version and since I love and use the Pro Version, I would recommend you to use the pro version of the Elementor.

Elementor Pro allows you to customize and design WooCommerce Myaccount Page, Cart Page, and Checkout Page just the way you want.

Thus allowing you to have complete control over the look and feel of your eCommerce site and also saving money as you don’t need to spend on other plugins.

Find out the keywords that your competitors are using on their eCommerce websites. Click to Know more about Semrush Keywords Research.

Step 2: Set your WooCommerce Endpoints.

Basically, endpoints mean your blog URL followed by a Keyword for WooCommerce which acts as a destination. 

Example: www.mywebsite.com/orders.
Here orders are the endPoint, you can check on the image below.

bloggersprout-myaccount-endpoints

In most cases, the endpoints are set by default and rarely being changed.

Once you have configured the endpoints, click on save changes.

Now open a new tab and visit your WordPress admin and then follow step – 3.

Step 3: Create a new menu and paste the endpoints.

Go to WP-Admin -> Appearance -> Menus and create a new Menu. Name it ” Custom Woo Myaccount Menu”.

Now create custom links and paste the endpoints.

[image here

Once you have created all the important links, you can save the menu.

Step 4: Customize MyAccount page and design using Elementor

After you have created the menu, you need to customize the my account page using Elementor.

To customize the page, visit the page ( www.yourwebsite.com/my-account ) and click on the edit page button.

[image – try gif

After clicking the button, the page will open in WordPress Admin Area. Now select Edit with Elementor.

Once the page opens with Elementor editor, you can design the page as per your choice and liking and click on Save Changes once you are satisfied with the design.

Step 5: Add the menu to the page.

Now as you have designed your new my account page for WooCommerce. You need to add the new menu to.

Don’t Worry, if you think there will be two menus, we will hide the boring menu later.

To add the new menu, Dar and drop the Elementor Navigation Menu widget and select the Menu. You will find our new menu appears, where you have dragged and dropped the menu widget.

Now we also need to make sure that if a user logs out, he/she doesn’t get direct access to the my account page and its data.

To do that we will be using a simple and free plugin called Visibility Logic for WooCommerce.

Hiding the WooCommerce Links and Menu When users Logs out.

To hide the WooCommerce links and Menu after the user has logged out. You need to download a Free plugin that accompanies Elementor.

The plugin is Visibility Logic for Elementor. Download it here:- https://wordpress.org/plugins/visibility-logic-elementor/

Install and Activate the Plugin. After activating the plugin, go to the my-account page of WooCommerce that you earlier created using Elementor.

Now Click on the section, and then go to advance. Click on Visibility Control. And choose to whom you want to display the fields and to whom you want to hide.

visibility-logic-elementor

So, in this case, I will select “Logged in Users” in the field for Visible, and for Hidden, I will select the Guest.

Step 6: Paste the custom CSS

After you have designed your new WooCommerce my account page, you need to paste this custom CSS to hide the navigation of the Woocommerce.

Just paste it in Appearance > Customize > custom CSS

.woocommerce-MyAccount-navigation {
display:none !important;
}

.woocommerce-account .woocommerce-MyAccount-content {
    width: 100% !important;
}

Pasting this custom CSS code will hide the default WooCommerce Menu. Which we want to hide as it’s boring.

Step 7: Save it as your new account page

Save the page and visit it from the front end. Your new WooCommerce My Account Page is Live.

You can also customize WooCommerce Default Pages.

1. How To Customize WooCommerce Checkout Page Easily
2. How To Easily Customize WooCommerce Shop Page Easily
3. How To Customize Woocommerce My Account Page Easily

Check the 15+ Best WordPress Themes for Elementor

That’s it.

Subscribe to my YouTube Channel

Conclusion

Creating a custom account page for woocommerce is really easy e you just need to take care of the endpoints of the URL.  There are several plugins available in the WordPress repository which are free and premium. Most of them are premium and will not get the desired result as you wish.

But in this article, we have shown you the best way to create a custom my account page in WooCommerce by using the free and simple Elementor page builder plugin and a little bit of CSS which we have provided and get your desired result of my account page to rock with your website design.

If you have any doubt or confusion you can comment below or you can also comment us on our YouTube channel on Instagram and I will make sure to answer all your queries at https://nirajkashyap.com 

Leave a Reply

Your email address will not be published.

8 Comments

  1. I’ve had a good look in to this. Albeit it seems to work well on desktop (you can get a very plush user experience using motions for you box icons etc..)

    The user experience using this method in mobile (which over 70% of people are most likely to purchase on) is pretty poor and comes with various user issues (getting bored of the fluff on mobile screens etc as they want a simple buying experience.

    However since in this tutorial you have hidden the my account menu, even if we disable the buttons in mobile through elementor (to take away cluttered icons) we are left with a my account page that is rendered useless and unusable as its menu is hidden.

    Looks great but style over user experience isn’t going to cut it in the e-commerce domain.

    Unless you have a fix to show the My Account menu or mobile and not on desktop/tablet? Which I haven’t been able to sort out as yet.

    1. Hi Mark,
      This Tutorial demonstrates how you can customize your WooCommerce “MyAccount” Page.

      However the design skills and UX/UI depends on the Designer. Since elementor allows you to design mobile friendly design it upto the users skills to optimize the experience.

      Regards
      Niraj

  2. I’ve had a good look in to this. Albeit it seems to work well on desktop (you can get a very plush user experience using motions for you box icons etc..)

    The user experience using this method in mobile (which over 70% of people are most likely to purchase on) is pretty poor and comes with various user issues (getting bored of the fluff on mobile screens etc as they want a simple buying experience.

    However since in this tutorial you have hidden the my account menu, even if we disable the buttons in mobile through elementor (to take away cluttered icons) we are left with a my account page that is rendered useless and unusable as its menu is hidden.

    Looks great but style over user experience isn’t going to cut it in the e-commerce domain.

    Unless you have a fix to show the My Account menu or mobile and not on desktop/tablet? Which I haven’t been able to sort out as yet.

    1. Hi Mark,
      This Tutorial demonstrates how you can customize your WooCommerce “MyAccount” Page.

      However the design skills and UX/UI depends on the Designer. Since elementor allows you to design mobile friendly design it upto the users skills to optimize the experience.

      Regards
      Niraj

  3. Bonjour,

    C’est vraiment super, merci merci beaucoup. J’ai pu me faire une jolie page avec votre tuto. En plus sans code. En effet je ne m’y connais absolument pas en code.

    Néanmoins j’ai une toute petite question.

    Comment pourrait-on modifier le petit encadré “Se connecter ou s’enregistrer” par défaut de Woocommerce. Vous savez l’endroit où le client s’enregistre ou rentre son adresse email et son mot de passe pour se connecter.

  4. Bonjour,

    C’est vraiment super, merci merci beaucoup. J’ai pu me faire une jolie page avec votre tuto. En plus sans code. En effet je ne m’y connais absolument pas en code.

    Néanmoins j’ai une toute petite question.

    Comment pourrait-on modifier le petit encadré “Se connecter ou s’enregistrer” par défaut de Woocommerce. Vous savez l’endroit où le client s’enregistre ou rentre son adresse email et son mot de passe pour se connecter.

  5. Satyanarayan Bhuniya says:

    How this page will look like if user log out???

    I am executed this idea on namitaudyog dot in

    1. Niraj Kashyap says:

      If you use the plugin ” Visibility Logic” then you can show a custom message or even a login form.

      Regards
      Niraj