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