How To Customize Woocommerce My Account Page Easily Without Coding

Tutorials, WooCommerce / By / 4 minutes of reading
custom-woocommerce-myaccount-page -BloggerSprout.com

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 the 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 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 My Account Page Easily Without Coding 1

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; }
 .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.

bloggersprout-myaccount-endpoints

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>';
}





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://askniraj.com 


		
		
			




	




	


			

			
		
	



	


	
 
	


		
		
	



	Scroll to Top