Make the WooCommerce My Account Navigation Look Awesome with CSS

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;
  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 {
  background-color: rgba(0,0,0,0.1);
nav.woocommerce-MyAccount-navigation ul a {
  color: rgba(0,0,0,0.8); cursor: default;
nav.woocommerce-MyAccount-navigation ul {
  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.


  1. Michele on 21 July 2017 at 7:08 PM

    Thank you! Worked great, super easy.

  2. rohan on 3 August 2017 at 8:10 PM

    Thankuuuuuuuuu Worked greatttt, superrrrr easy.

  3. Stacey on 29 August 2017 at 6:28 PM

    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!

    • Tevya on 30 August 2017 at 9:41 AM

      Stacey, I believe it’s the portion starting with the line “nav.woocommerce-MyAccount-navigation ul {” 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 on 1 September 2017 at 3:12 AM

    Thank you very much !!!

  5. Andrew on 21 September 2017 at 8:59 AM

    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?

    • Tevya on 21 September 2017 at 1:10 PM

      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 on 1 October 2017 at 9:41 AM

    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)


  7. ratan mistri on 13 November 2017 at 2:07 AM

    Thanku very nice for me

  8. Monika on 17 January 2018 at 2:37 PM

    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

    • Tevya on 17 January 2018 at 2:37 PM

      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 on 17 January 2018 at 2:38 PM

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

  9. John on 23 February 2018 at 6:05 AM

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

    • Tevya on 23 February 2018 at 8:17 AM

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

  10. NMWatt on 29 March 2018 at 8:47 PM

    This is fantastic! Thanks for sharing 😀

  11. Delphine on 4 May 2018 at 1:59 PM

    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!!

    • Tevya on 7 May 2018 at 4:06 PM

      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).

  12. Dave Glogowski on 12 August 2018 at 6:50 PM

    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.

    • charry on 13 August 2018 at 4:24 PM

      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.

  13. Rodger on 4 November 2018 at 3:15 AM

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

    • Tevya on 7 November 2018 at 10:14 AM

      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.

  14. Amin on 1 December 2018 at 1:18 AM

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


    • Tevya on 1 December 2018 at 4:29 PM

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

  15. Peter Nyiri on 17 December 2018 at 6:17 PM

    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?

    • Tevya on 18 December 2018 at 7:45 PM

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

  16. Smart on 22 February 2019 at 2:08 AM

    This is great, It works for me. Thanks.

  17. Mark on 1 March 2019 at 9:02 AM

    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 ?

    • Tevya on 6 March 2019 at 10:40 AM

      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 to add it.

  18. Ran Reding on 30 March 2019 at 3:29 PM

    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?


    • Tevya on 1 April 2019 at 2:35 PM

      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.

  19. Tom Landon on 28 April 2019 at 9:35 AM

    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!



    • Tevya on 30 April 2019 at 10:01 PM

      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.

  20. Shane on 29 May 2019 at 9:18 PM

    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.

  21. Idaniel on 15 September 2019 at 3:47 AM

    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?

    • Tevya on 16 September 2019 at 8:23 PM

      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.

  22. Nikola on 14 November 2019 at 1:22 AM

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

  23. Nishith on 16 November 2019 at 3:32 AM

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

  24. janganara on 16 December 2019 at 2:44 AM

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

  25. msjones on 8 January 2020 at 12:27 PM

    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?

    • Tevya on 17 January 2020 at 7:58 AM

      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 a

  26. Thierry on 1 April 2020 at 7:20 AM

    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

  27. Victoria on 20 May 2020 at 5:05 AM

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

  28. Kenny on 23 June 2020 at 5:23 AM

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

  29. Agabs on 30 September 2020 at 12:02 PM

    Wow this really help.. Working perfectly for me

  30. Spencer on 11 January 2023 at 12:05 PM

    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.

Leave a Comment

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