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 simple free WordPress page builder and get your desired customized styled “my account page”.

Do you know, The Ultimate Guide on WooCommerce Tutorials covers A-Z WooCommerce Customization tutorials with Video.

If you want advanced customization of WooCommerce My Account Page, Check out this plugin – Yith WooCommerce MyAccount Customize Plugin.

Ways To Customize WooCommerce My Account Page

• WooCommerce My Account Customization using Free plugin
• WooCommerce My Account Customization using Premium plugin
• WooCommerce My Account Customization using Code Snippets

This tutorial is a little technical, so I would recommend you to watch the YouTube video to get a clear view of how you can easily create a custom my account page for your woocommerce.  Although this tutorial covers the same information that is been covered in the video. The video will help you more than this text tutorial so kindly watch the video and subscribe to our YouTube channel.

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

You can click on the below link to download the Elementor pro version which will help you in several ways.

Once you’ve done that, you can take a look at these useful articles.

• How To Customize WooCommerce Checkout Page Easily – No Coding
• How To Easily Customize WooCommerce Shop Page Easily  – No Coding
• How To Customize Woocommerce My Account Page Easily Without Coding

Customizing Woocommerce My Account Page (Free Plugin)

For the free plugin, you can use elementor, and use its drag and drop feature to design the My account page for woocommerce.

After designing the page use create a menu and paste the endpoints their. The create a large section and paste the shortcode for woocommerce account.

Once you have pasted the you need to hid the original woocommerce menu, which you can accomplish using the following css codes.

Just paste it in Appearance > Customize > custom css

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

WooCommerce My Account Customization using Premium plugin

So in this tutorial you will need to go to Woocommerce settings> advance and copy all the endpoints.

If you want advanced customization of WooCommerce My Account Page, Check out this plugin – Yith WooCommerce MyAccount Customize Plugin.

Basically, endpoints mean your blog URL followed by a Keyword for woocommerce which acts as a destination.  Example: www.mywebsite.com/orders

Here orders is the endPoint,  you can check on the image below.

Once you got the endpoints, you need to create a page using the Elementor,  create your custom designed My Account Page with the elementor page builder and paste this custom CSS to hide the navigation of the woocommerce.

So once you have designed the layout of your custom woocommerce my account page,  you need to copy the endpoints and link it to their buttons or links that you have created.

After you have edited the links for the buttons and redirected it to the endpoints your custom my account page will be working properly.

Woocommerce will work properly with any designs for your custom my account as long as you take care of the endpoints in your page.  The endpoints search the results from the database and source to your customer in their my account page.

WooCommerce My Account Customization using Code Snippets

Using code snippets is a full technical thing that requires complete programming knowledge and how woocommerce works. Since there is no defined way to customize the my account page in woocommerce using code.

But here are some useful codes that may help you get started

Register a new Endpoint for My Account

function add_support_endpoint() {
    add_rewrite_endpoint( 'support', EP_ROOT | EP_PAGES );
}
add_action( 'init', 'add_support_endpoint' );

Create a new query var

function custom_support_query_vars( $vars ) {
    $vars[] = 'support';
    return $vars;
}
add_filter( 'query_vars', 'custom_support_query_vars', 0 );

Add the My Account menu item

function custom_add_support_link_my_account( $items ) {
    $items['support'] = 'Custom Content Tab';
    return $items;
}
add_filter( 'woocommerce_account_menu_items', 'custom_add_support_link_my_account' );

Last add content

add_action( 'woocommerce_account_support_endpoint', 'custom_support_content' );
function custom_support_content() {
	echo '<h2>Your Custom Content</h2><p>Custom  content paragrah</p>';
}

Hiding the WooCommerce Links and Menu

To hide the WooCommerce links and Menu after the user has logged out. You need to download a Free plugin that accompanies with 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.

That’s it.

That’s how you will hide the field and menu when the user logs out.

Conclusion

Creating a custom account page for woocommerce is really easy e you just need to take care about 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