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

Tevya

Hi, I'm Tevya! I wrote this. I am the owner of WordXpress and also created Starfish Plugins. I love helping small businesses and WordPress professionals. My wife Jill, helps with the business and is the amazing CEO of our family (3.5 kids). When I'm not working, I like to play basketball, go boating, shoot targets, swim, serve in my church, play Ultimate, and have outdoor adventures as a family.

Make the WooCommerce My Account Navigation Look Aw…

by Tevya Read in: 2 min