Make the WooCommerce My Account Navigation Look Awesome with CSS

Jacob Stimpson

 Broken Links

Lets face it: the WooCommerce “My Account” page navigation looks pretty lame with it’s default styling! It’s just a bulleted list. On Divi (the theme we use most) all the links in the list are the same color, even the one you’re currently on. So visually it’s just not pretty or very helpful to the user. Check it out:

It’s pretty plain and unhelpful, right? So I set to work to improve it with CSS. Here are the results:Woocommerce my account navigation pretty css

The following CSS is what I wrote to get those results. It should work with most themes if you use a full-width (no sidebar) layout. However, you may need to tweak a few things to fit your theme’s needs.

/* Change WC Acct Page Column Widths */
@media only screen and (min-width: 769px) {
  .woocommerce-account .woocommerce-MyAccount-navigation {
    width: 22%;
  }
  .woocommerce-account .woocommerce-MyAccount-content { 
    width: 75%;
  }
}
/* Style WC Account Endpoint Links */
nav.woocommerce-MyAccount-navigation ul {
  list-style-type: none;
  padding-left: 0;
  max-width:200px;
  font-size: 17px;
  line-height: 26px;
}
nav.woocommerce-MyAccount-navigation ul li {
  padding: 8px 20px;
  background-color: rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
nav.woocommerce-MyAccount-navigation ul li.is-active {
  background-color: rgba(0,0,0,0.1);
}
nav.woocommerce-MyAccount-navigation ul li.is-active a {
  color: rgba(0,0,0,0.8); cursor: default;
}
nav.woocommerce-MyAccount-navigation ul li.is-active:after {
  content: "";
  height: 0;
  width: 0;
  border-top: 20px solid transparent;
  border-left: 14px solid rgba(0,0,0,0.1);
  border-bottom: 20px solid transparent;
  float: right;
  margin-right: -34px;
  margin-top: -7px;
}
nav.woocommerce-MyAccount-navigation ul li:not(.is-active):hover {
  background-color: rgba(0,0,0,0.07);
}
nav.woocommerce-MyAccount-navigation ul li:not(.is-active):hover:after { 
  content: "";
  height: 0;
  width: 0;
  border-top: 20px solid transparent;
  border-left: 14px solid rgba(0,0,0,0.07);
  border-bottom: 20px solid transparent;
  float: right;
  margin-right: -34px;
  margin-top: -7px;
}

If your theme has a “Custom CSS” box in it’s settings, then you can place this there. On Divi, I just placed this in the page’s custom CSS so that it only loads on the actual My Account pages.

If you have questions about what any of the CSS does or how it works, please let me know in the comments.

Want Someone to Do This For You?

Here at wpXPRESS we do tweaks like this for our members. We could do this, other content and design tweaks, plus full management and maintenance, if you became a member. Learn more about what our plans include.

Table of Contents

You might also like these blogs and articles

Myth

45 Comments

  1. Michele

    Thank you! Worked great, super easy.

    Reply
  2. rohan

    Thankuuuuuuuuu Worked greatttt, superrrrr easy.

    Reply
  3. Stacey

    Hi! This is great – thank you!
    Can you tell me what part of the code is creating the static arrow/triangle to the right of the button that is active or when hovering? It’s not working exactly right on my end (perhaps there is some competing CSS in my theme?), but I’m not sure what to tweak… Thank you!

    Reply
    • Tevya

      Stacey, I believe it’s the portion starting with the line “nav.woocommerce-MyAccount-navigation ul li.is-active:after {” to the end. You can add a /* before that line and a */ at the end of this CSS to “comment out” that portion. See if that does what you want, then remove it entirely, if it does. Or you can play with some of the values in those lines (such the widths of the borders or the negative margins), to see if you can get it to position correctly for your theme.

  4. Tom

    Thank you very much !!!

    Reply
  5. Andrew

    You are awesome – this looks soooo much better. Any chance you’d do a future post on how to style the checkout page to spruce it up a bit?

    Reply
    • Tevya

      Definitely. I improved one a little today. Not sure it’s enough to write about. However, I have another one coming up that I’d like to really improve the checkout page for. If that happens, I’ll write it up and post about it.

  6. Flo

    Very nice code the my-account page is looking much better now.

    How can i also add fontawesome icons to this?

    (For each item in the my-account menu)

    Thx

    Reply
  7. Monika

    Hi Tevya,
    I’m also using Divi, which part of the custom CSS on the myaccount page should i put in the code?
    Sorry, not a coder at all, trying to amend my own site.
    Hope you can help.
    Thank you

    Reply
    • Tevya

      Hi Monika! In the page’s custom CSS field. In the Divi builder this is found by clicking the hamburger button in the top-right off the page builder area. On the Visual Builder, it’s one of the purple circle buttons that appear when you click the purple button that hovers at the bottom of the page, then go to the advanced tab.

    • Monika

      Thanks so much Tevya! I got it ?
      God bless.

  8. John

    Hello ! Great article…
    I have one problem…
    setting the css code in divi, it removes the header My Account !!!
    Can you help ??

    Reply
    • Tevya

      Hi John! Nothing in the CSS here should affect your header. But you can always just add one using the Divi text module.

  9. NMWatt

    This is fantastic! Thanks for sharing 😀

    Reply
  10. Delphine

    Hello!
    Sorry, not a coder at all, trying to amend my own site. I would like to change the color of the text when we put the mouse on a button (hover function).
    Can you please help find where I can change this in your CSS code?
    Thanks a lot!!

    Reply
    • Tevya

      Hi Delphine, the part that looks like this:

      nav.woocommerce-MyAccount-navigation ul li:not(.is-active):hover {
      background-color: rgba(0,0,0,0.07);
      }

      Sets the style on hover. If you add another line below the “background-color” line with “color: #000000;” it’ll change the color of the text to black on hover. Change the hash code for the color to whatever you want (or use an rgb/rgba code like the background-color is using).

  11. Dave Glogowski

    Great design. One issue I am having is when the active menu item is orders. If the overall order table is shown, it works. But t once I select an individual order, the “is active” formatting is lost. Any thoughts?

    This also happens with the subscription endpoint.

    Reply
    • charry

      Hi Dave. Unfortunately, because of the different way those endpoints are handled, I’m not sure it’s possible to fix that. I’ll try to test when I get a chance. Or if you want to provide me an account on your site (can just be a customer account with at least one order in it), via our contact buble or page, I can check much faster and let you know.

  12. Rodger

    wow
    this is amazing!

    but, I have one more issue I have noticed with default woocommerce my account page menu.
    When viewing it on mobile, it shows as a long list, which quiet frankly is not nice.
    Is there a way of bundling the woocommerce my account page menu tabs (together with any add custom adds) into a nice responsive mobile menu just like in the main header??
    Thank you..

    Reply
    • Tevya

      Hi Rodger. I’m not aware of any plugins that do this. But I’m sure it’s possible with some CSS. You might start with a guide like this.

  13. Amin

    Hi. I want to remove the navigation menu totally and make the page full width. Any idea how it can be done ?

    Thanks
    Amin

    Reply
    • Tevya

      Hi Amin. Do you mean the WooCommerce My Account items? If you hide them, people won’t be able to access them, unless you add links elsewhere (like in the site menu). But you should be able to hid them with a little CSS: .woocommerce-MyAccount-navigation { display: none; }

  14. Peter Nyiri

    Hi, the code looks nice, however I can’t figure out how to change the font color…
    I have a background picture on the My Account page and black color is impossible to read. How do I change it to white?

    Reply
    • Tevya

      Hi Peter. To change the color of the text in the WooCommerce My Account Navigation, you could add some CSS that looks something like this: nav.woocommerce-MyAccount-navigation ul li { color: white!important; }

  15. Smart

    This is great, It works for me. Thanks.

    Reply
  16. Mark

    As I am entirely new and I love to change the look of woocommerce, which of the directory should i have the CSS file to edit and past this ?

    Reply
    • Tevya

      Hi Mark, most themes have a “Custom CSS” field you can put this in. You can actually access it via the Customizer under “Additional CSS.” If you don’t have this option for some reason, you can use a plugin like https://wordpress.org/plugins/simple-custom-css/ to add it.

  17. Ran Reding

    Hi Tevya,

    This code works great, however I am trying to change the background color of the active item in the My Account list. I’m seeing a white box around whichever item is currently active. I would like to make the box clear while my text is white. I’ve tried modifying the background in the code you have here, but the white text box still remains. Any idea how to make it clear?

    Thanks,
    Ran

    Reply
    • Tevya

      Hi Ran, I’m not totally sure. A box around it makes it sound like something is being added by your theme or something. If it’s a box around it, then very likely there’s a white border somewhere in the CSS (maybe from your theme), or there’s a background above another element’s background, giving the appearance of a border. If I’m right, then you’d need to find which is is and set a “border: none;” or “background: transparent;” for the right element to get rid of that.

  18. Tom Landon

    Hello there! Thank you so much for your great .CSS. Question: Is there a way (of course there is, but i do not know) to have your .CSS menu NOT VERTICALLY but HORIZONTALLY shown/lined up?

    Your would help me a lot with that!

    Truly

    Tom

    Reply
    • Tevya

      Hi Tom, yes it’s possible to make the WooCommerce My Account menu horizontal. You’d add some CSS like this to change the way it’s laid out:

      woocommerce-MyAccount-navigation ul { text-align: center; }
      .woocommerce-account .woocommerce-MyAccount-navigation,
      .woocommerce-account .woocommerce-MyAccount-content { float: none; width: 100%; }
      li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link { display: inline; }

      That will at least get you started. Maybe I’ll write another post like this one with nice horizontal navigation.

  19. Shane

    HI Tevya

    I have been looking for some CSS to style my account page. I used your CSS and it works excellent, nice and subtle changes.

    Reply
  20. Idaniel

    Hi Tevya,

    Thanks for the great css. I’m trying to add some icons to the menu, but no luck so far, do you have an idea?

    Reply
    • Tevya

      Hi Idaniel. The easiest way would be using the :before pseudo selector to insert something before. It could be images of the icons, or you could use an icon font like Font Awesome. But the details on how to do it would require another post, or expanding this one. Though you can get the concept from our post about how to use Font Awesome for radio buttons and checkboxes.

  21. Nikola

    Looks great, so thankful I even googled and found this neat CSS trick! All best, Nik.

    Reply
  22. Nishith

    Awesome. I am really happy with it. Great help. Thanks a lot.

    Reply
  23. janganara

    awesome. but maybe u can help on mobile view (responsive)
    thanks

    Reply
  24. msjones

    Greetings Tevya, I have created my own mini menu in a sidenav widget in WP.

    I’ve easily styled hover but can’t grab an active state because of the endpoints

    /my-account/edit-account/ – Profile Information
    /my-account/orders/ – Orders
    /my-account/payment-methods/ – Payment Method

    I’m fairly css savvy – is there some magic class or id I can use to grab the endpoint?

    Reply
    • Tevya

      Hi Erika, I’m not sure (and don’t have time to look at the moment) but I think those endpoints might add an extra class in the body or somewhere like that. So you can target stuff within that endpoint page specifically, using that class. Does that make sense? Check for that, I think that’s how I did it on one site….

      EDIT: I just checked, and yes, they each have their own Body class. So you could use that (eg. woocommerce-orders for the orders page) to target something within a specific page. Or re-reading your comment, maybe that wasn’t what you were looking for? In the above example, I used this to target the active (current endpoint) menu item: nav.woocommerce-MyAccount-navigation ul li.is-active a

  25. Thierry

    Thank you thats really nice works straight from the copy past, and simple enough I can play with values to fit my needs and taste

    Reply
  26. Victoria

    Worked really well. Thank you! Now to figure out how to add icons to the menu like in the Yith plugin.

    Reply
  27. Kenny

    Thank you so much. With a little tweak to fit my theme, this CSS worked so well.

    Reply
  28. Agabs

    Wow this really help.. Working perfectly for me

    Reply
  29. Spencer

    This code is fantastic. Thank you! It’s a much better solution than using the YITH My Account plugin, and it’s easy to edit the endpoints separately.

    Reply

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe to Our Newsletter for Updates

Stay in the loop and receive exclusive offers!

"*" indicates required fields

Name*
Hidden
Privacy*