How To Make A Custom WooCommerce My Account Page

by Adam @ WPCrafter   |   Last Updated: August 7, 2019
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

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

Adam @ WPCrafter

Adam @ WPCrafter

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.

13 thoughts on “How To Make A Custom WooCommerce My Account Page”

  1. j

    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.

  2. F


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

    Many Thanks.

  3. I

    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;

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

  5. j

    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.

  6. Hey Adam,

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


  7. S

    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

Leave a Comment

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