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

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.

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.

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.

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