How to display Woocommerce my account tabs horizontally?

By default Woocommerce displays my account page tabs vertically as a sidebar. In this post I’m going to show you how to display Woocommerce my account tabs horizontally. You will need only a couple of lines of CSS code for that.

How to display Woocommerce my account tabs horizontally?

So, go to the Customizer >> Additional CSS and paste this snippet over there. Couple of explanations:

  • This piece of code works only if your theme is not overriding Woocommerce my account page styling (see the example below for Blocksy theme)
  • It will make your account tabs appear above the tab content.
  • It will display them horizontally only on screens with more than 768 pixels.
  • If the screen is smaller than 769px then the default layout is show
@media only screen and (min-width: 769px) {
   .woocommerce-account .woocommerce-MyAccount-content, .woocommerce-account .woocommerce-MyAccount-navigation {
       float: none;
       width: 100%;
   }
}
@media only screen and (min-width: 769px) {
   .woocommerce-MyAccount-navigation ul {
       text-align: center;
   }
   .woocommerce-MyAccount-navigation ul li {
       display: inline-block;
   }
}

If ererything works as it should then this is the end result. You can customize CSS accordingly (text-align: center; for example).

How to display Woocommerce my account tabs horizontally?

How to display Woocommerce my account tabs horizontally on Blocksy theme?

One more thing I have to clarify: there are a bunch of themes that are overriding Woocommerce my account page styling. For example, Blocksy theme does that. So, if this happens then you need to find out the CSS class your theme is using for the Woocommerce my account navigation menu.

By default it’s .woocommerce-account .woocommerce-MyAccount-content and .woocommerce-account .woocommerce-MyAccount-navigation

For Blocksy theme it’s .ct-account-nav and .ct-woo-account classes you need to tweak. Now, if you want to display Woocommerce my account tabs horizontally on Blocksy theme then use this code here below instead and tweak it as you like.

Blocksy theme discount

SAVE 10% COUPON: WPSH10

Also, pay attention that with Blocksy you can customize my account tabs design by going Customizer >> Woocommerce >> General >> Account page

/* Display Woocommerce my account tabs horizontally on Blocksy theme */
@media only screen and (min-width: 769px) {
   .ct-acount-nav  {
       float: none;
       width: 100%;
   }
	.ct-woo-account {
    display: block;
}
@media only screen and (min-width: 769px) {
   .woocommerce-MyAccount-navigation ul {
		 border-bottom: 1px solid var(--paletteColor6);
		 margin-bottom: 2em;
   }
	.woocommerce-MyAccount-navigation ul li {
    display: inline-block;
}
	.woocommerce-MyAccount-navigation ul li:not(:last-child) a {
    border-bottom: none;
}
}

Useful Blocksy theme related tips

Here are some of my favorite Wordpress tools

Thank you for reading this article. I hope you found it helpful as you build your own websites and e-commerce sites. Here are some tools I use as a Wordpress developer and enthusiast that I hope you’ll also find helpful.

These are affiliate links, so if you do decide to use any of them, I’ll earn a commission and this helps me create these tutorials and make Youtube videos. But in all honesty, these are the exact tools that I use and recommend to everyone, even my friends and family.

Themes: For the last couple of years I have two go-to themes which I use for every kind of projects. Those two themes are Blocksy theme and Kadence Theme. On this site and my Youtube channel you’ll see a lot of tutorials I have made about them. If you would like to get a 10% discount for both of them then:

Code Snippets manager: WPCodeBox allows you to add code snippets to your site. Also, it allows you to build and manage your WordPress Code Snippets library in the cloud. You can grab it with the 20% discount here (SAVE 20% Coupon: WPSH20).

Contact forms: There are hundreds of contact forms out there but Fluent Forms is the one I like the most. If you need a 20% discount then use this link (save 20% coupon is WPSH20).

Gutenberg add-ons: If I need a good Gutenberg blocks add-on then Kadence Blocks is the one I have used the most. You’ll get 10% discount with the coupon SIMPLEHACKS here.

Website migration: While building a website you probably need a good plugin that can help you with the migration, backups, restoration and staging sites. Well, WpVivid is the one I have used for the last couple of years. If you use this link along with the WPSH20 coupon you’ll get 20% discount.

Woocommerce extensions: There are a bunch of Woocommerce extensions that I really like but the one that stands really out is Advanced Dynamic Pricing. Once again, you’ll get a 20% discount if you use this link here (save 20% coupon is WPSH20)

Web Hosting: If you would like to have a really fast and easy to use managed cloud hosting, then I recommend Verpex Hosting (see my review here). Btw, this site is hosted in Verpex.)

To see all my of most up-to-date recommendations, check out this resource that I made for you!

Do you want to thank me and buy me a beer?

Every donation is entirely welcome but NEVER required. Enjoy my work for free but if you would like to thank me and buy me a beer or two then you can use this form here below.

Choose amount

Best selling plugins

Janek T.
Janek T.

I am a Wordpress enthusiast who has been making websites since 2011. In this site I am offering simple to follow tips on how to use Wordpress and Woocommerce.
If you want to be the first to be notified about the new tutorials then please subscribe to my Youtube channel here
Follow me in Twitter here

Articles: 89