by Adam Preiser updated August 7, 2019

How To Make A Custom WooCommerce My Account Page


Share on facebook
Share on twitter
Share on linkedin

Here is the custom CSS used in the tutorial.

.woocommerce-MyAccount-navigation {

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

Here is what I used in the tutorial.


CartFlows is a sales funnel builder for WordPress. It allows you to quickly and easily build sales funnels using your page builder of choice.

Key CartFlows Features:

  • Professionally Designed Templates
  • 5 Location Order Bumps
  • One Click Upsells
  • Use Your Prefered Page Builder
  • Extendable Unlike Click Funnels
  • Countdown Timers & Split Testing

If you want a sales funnel builder for WordPress and are fine with hosting yourself, or using managed WordPress hosting, then CartFlows if a great option because it's super easy to use yet very powerful.

Check Out CartFlows


Elementor is a WordPress page builder that has taken WordPress web design by storm. It has the deepest feature set, yet is very easy to use and master. Elementor is the most full-featured free page builder. There is also a Pro add-on to add additional developer features.

Key Elementor Features:

  • Live Front End Page Editor
  • Website Personalication Features
  • Template & Block Library
  • Extensive Mobile Responsive Options
  • Most Powerful Popup Builder
  • PRO Create Custom Headers / Footers
  • PRO Create Post Type Layouts

Elementor is the strongest page builder currently available. They consistently release new features that are in line with current design trends. This means you will be able to keep your website relevant.

Elementor Pro is an incredible value considering all the additional modules and power features that it includes.

If I were starting a new website project today, Elementor would be the page builder that I would choose. I consider it a must have WordPress page builder that is a pleasure to use.

Check Out Elementor

Video Transcript

My passion is making the best quality video tutorial online, for non-techies. When I am not behind the camera, I am usually helping out one of my YouTube subscribers.

Join The Conversation

Your email address will not be published. Required fields are marked *

  1. Hi Adam,
    What a great tutorial. But…. i have one big problem….
    I use the AVADA theme with fusion builder. It works for me to do what you also do but when you logout als member you still see the iconboxes. They are not behind a login.
    Have you any advise for me?

  2. Creating a custom page in my account, after logging out of the account, a login window appears and with it the inserted items, which I added in the elementor wizard, also appear next to the window? How do you remove this from the login section?

  3. Hi, when a new user signs up, I need to make the mobile number field mandatory? How and where can I do this please?

  4. Hi, awesome video! I tried to do this, but the CSS didn’t work for WPBakery, which I need to use for this job. Do you know what could be used instead? Thanks a lot!

  5. How do you make to display the name or the user on the headline? I have elementor Pro, but can’t find the function.

    1. I showed how in the video. You have to use their dynamic content feature, but I showed how in the video.

  6. Hi Adam, could you please tell me, how did you add the first name variable to the text under the title? Thanks a lot (I have elementor PRO).

  7. Hi Adam. Cool video! I have a problem with getting the css code to make the [woocommerce_my_account] 100% wide. I can remove the menu-section, but can’t get the text to fill out 100%. I’m using Visual Composer – do you have any advice

  8. Hi I used elementor to create custom my account page like your youtube video, the big issue is that it is visible to all visitors. It should be only visible to logged in customers like standard menu. can you suggest what do i need to do?

      1. Hello Adam. Thank you for such a useful video. As I can see on YouTube comment section and here as well, the biggest issue seems to be that after editing my-account in the way your video outlines my-account becomes accessible by all visitors instead of only Users who are logged in. I see that you suggest using Dynamic Conditions plugin but frankly, I can’t find a way to make it work. Would you please give some quick tips on how to apply Dynamic Conditions to your example to solve this?

        1. Dynamic Conditions has an option to show or hide content based on if the user is logged in or logged out.

    1. Hello wpcrafter I’m making a membership website with a woocommerce membership plugin but i don’t want some options like discount, notes, product I want only customer view there membership info only I try end point but not working

  9. Terimakasih..
    Sangat membantu sekali.
    Segera saya aplikasikan pada website saya. 🙂

  10. hey Adams complement of the season, well i like to ask something else, what temp. /tool did you use in building your blog single page. This page is pretty cool any videos tutorials?

  11. Hi Adam,

    Is it possible to adjust this or add code so that the entire page does not reload when the links are clicked? It would be nice if the page didn’t reload completely but instead only change the information from each specific endpoint.

  12. Hi,

    I hope you are doing good. \May you please in moving the woocommerce my account navigation from sidebar to top tabs.

    Many Thanks.

  13. Hi Adam,

    Thanks for the awesome tutorial. How can I hide the elements for logged out users? I tried this code

    .logged-out #HIDE {
    display: none !important;

  14. Awesome tutorial!
    One question – my woocommerce account doesn’t have a width of 100% – wondering what I did wrong?

  15. hi i follow your css code and it somehow cause my account page got duplicate of everything. what should i do. i m using flatsome theme.

    1. Hi there
      Use this,this might help

      .woocommerce-MyAccount-tabs {

  16. Hey Adam,

    Thanks for this tutorial. How can I make personalised welcome note such as Welcome Adam, how are you doing today?


    1. I created that using Elementor Pro. They have a feature called dynamic fields and you can use that to display the logged-in persons username.

  17. Hi Adam, i edited my woocommerce account page as u did in tutorial. that was nice..
    but thats only working when i m logged in as admin. its not working with other user. when user open my account page only footer area is coming and not the custum links of orders, downloads, logout, edit account, etc…
    plz help me out. Thank you

    1. That’s very strange. It should show the same thing regardless of the user role, unless the page is not published.

  18. Hi There,

    I wonder if I can ask please how you have setup your blog post and archive pages in Astra? It is exactly the look I am going for – I have not setup my site yet but have been playing with Astra and Elementor PRO and Thrive.

    Social elements then Content then sidebar

    (I can never size the header image properly to full width or find how I get the borders as you have) – what widths are you using?

    Can I be cheeky and ask for a copy of some of your blog and pages templates for elementor?

    Your site is basically what I am after?


    Looks like a widget on sidebar?

    Or is it custom layouts and elementor content?

    Ideally I would like to assign widgets

    Love your videos!

  19. Hey Adam! Thanks again for sharing your knowledge with us, useful as always. I’d love to hear you say something on why did you change your comments system back to the regular one? Thank you 🙂

Stay Up To Date

Enter your name and email for the latest news, updates, and tutorials.