Reserve Your Free Seat for Our Next WooCommerce Class! Search
Business Bloomer
  • Business Bloomer Club
  • WooCommerce Plugins
  • WooCommerce Tips
  • Log In
  • 0
  • Business Bloomer Club
  • WooCommerce Plugins
  • WooCommerce Tips
  • Log In
  • Search
  • Contact
  • Cart
WooCommerce Code Snippets My Account Storefront Theme

WooCommerce: Horizontal My Account Navigation Menu

Last Revised: Jan 2024

STAY UPDATED

The WooCommerce My Account pages feature a “left sidebar” navigation menu (by default, links are: “Dashboard”, “Orders”, “Downloads”, “Addresses”, “Account details”, “Logout”).

A cool (and easy) improvement may be moving such navigation to the top, and displaying it horizontally instead of vertically. You’d think this is a complex PHP customization… but you’ll feel great when you’ll notice you just need CSS for that.

Please note the CSS may change slightly based on your theme, in case it applies custom CSS to the default WooCommerce My Account navigation panel. I will list below a couple of solutions for default WooCommerce and for the Storefront theme, so at least you have an idea of what you could need in terms of tweaking it. Enjoy!

Here’s the default WooCommerce My Account pages navigation menu layout. If you don’t like sidebars this is the right tutorial for you!

CSS Snippet (Default WooCommerce): Display My Account Navigation Menu Horizontally As Opposed to Vertically

First thing, we want to stretch the My Account navigation and the My Account tab content onto a full width on big devices (by default, WooCommerce already applies such rule for devices up to 768px):

@media only screen and (min-width: 769px) {
   .woocommerce-account .woocommerce-MyAccount-content, .woocommerce-account .woocommerce-MyAccount-navigation {
       float: none;
       width: 100%;
   }
}

Here’s the result:

Second, we need to center align the navigation menu (UL tag) and make its items move horizontally (LI tags):

@media only screen and (min-width: 769px) {
   .woocommerce-MyAccount-navigation ul {
       text-align: center;
   }
   .woocommerce-MyAccount-navigation ul li {
       display: inline-block;
   }
}

CSS code, all together, so you can copy/paste:

@media only screen and (min-width: 769px) {

   .woocommerce-account .woocommerce-MyAccount-content, .woocommerce-account .woocommerce-MyAccount-navigation {
       float: none;
       width: 100%;
   }

   .woocommerce-MyAccount-navigation ul {
       text-align: center;
   }

   .woocommerce-MyAccount-navigation ul li {
       display: inline-block;
   }

}

CSS Snippet (Storefront Theme): Display My Account Navigation Menu Horizontally As Opposed to Vertically

Note: the My Account page must use the “Full width” template that comes with the Storefront theme.

@media (min-width: 768px) {

   .storefront-full-width-content .woocommerce-MyAccount-navigation, .storefront-full-width-content .woocommerce-MyAccount-content {
      width: 100%;
      float: none;
   }

   .storefront-full-width-content .woocommerce-MyAccount-navigation ul {
      text-align: center;
   }

   .storefront-full-width-content .woocommerce-MyAccount-navigation ul li {
      display: inline-block;
      border: 1px solid rgba(0,0,0,.05);
      padding: 0 1em;
   }

}

Is There a (Reliable) Plugin For That?

If you’d love to code but don’t feel 100% confident with CSS, I decided to look for a reliable plugin that achieves the same result.

In this case, I recommend the YITH WooCommerce Customize My Account Page plugin. On top of changing the navigation menu layout, you can also customize the color scheme, add banners, set up reCaptcha on the register and login forms, add, sort, rename, delete and group tabs, conditionally show tabs to a given user role and much more.

But in case you hate plugins and wish to code (or wish to try that), then keep reading 🙂

Where to add custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

  • WooCommerce: Separate Login, Registration, My Account Pages
    There are times when you need to send logged out customers to a Login page and unregistered customers to a standalone Register page. As you…
  • WooCommerce: Add New Tab @ My Account Page
    One of the features of Business Bloomer Club is the provision of Premium WooCommerce Q&A Support to supporters who enroll. So, how to add an…
  • WooCommerce: How To Make A Website GDPR Compliant? (12 Steps)
    Ok, we all know that the EU General Data Protection Regulation (GDPR) will come into force on the 25th May 2018. So the main question…
  • WooCommerce Visual Hook Guide: My Account Pages
    Hey WooCustomizers, the Visual Hook Guide is back 🙂 In this episode, I’ve created a visual HTML hook guide for the WooCommerce Account Pages (there…
  • WooCommerce: Add First & Last Name to My Account Register Form
    Here’s yet another useful PHP snippet – and a mini-plugin alternative with super simple settings – that adds the Billing First Name and Billing Last…

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

13 thoughts on “WooCommerce: Horizontal My Account Navigation Menu”

  1. Damien
    January 15, 2024

    I did something similar for a client though I used flex for the list:

    .woocommerce-MyAccount-navigation ul { display: flex; gap: 5px; justify-content: space-evenly; list-style-type: none; }
    Reply
    1. Rodolfo Melogli
      January 23, 2024

      Nice!

      Reply
  2. Criss
    May 5, 2021

    I believe you must get rid of the float:none; in the very first part of the code, because it causes some of the content to overlap the menu. I don’t know the reason why, it just does.

    Reply
    1. Rodolfo Melogli
      May 7, 2021

      Thanks!

      Reply
  3. Ruchi
    March 22, 2021

    Hey Rodolfo,

    I have recently started reading your posts and have learnt a lot. I have been trying to horizontally align the menu on WordPress 5.7 with your snippet . The first desk-lay gets centre aligned but when u click on any of the menu item it goes back to being displayed vertically.In effect it is not working.

    Tx

    Reply
    1. Rodolfo Melogli
      March 22, 2021

      No idea, sorry!

      Reply
      1. an
        March 26, 2021

        Probably browser cache issue, means the css you changed is not applyed but loaded from cache.

        1. Try to clean cache
        2. Try to add this css code from Customizer
        3. May be because of wrong css classes in your theme (this will works only in standard woo commerce template structure)

        I hope it helps

        Reply
  4. Tor Ivan Boine
    March 17, 2021

    Works great. Thanks 🙂

    Reply
    1. Rodolfo Melogli
      March 22, 2021

      Cheers

      Reply
  5. Razvan
    March 17, 2021

    Thanks for this trick!

    Reply
    1. Rodolfo Melogli
      March 22, 2021

      Glad you enjoyed it!

      Reply
  6. Johan Linder
    March 17, 2021

    Great tip, thanks. I added 40 px padding-right because I got the menu items too close to each other. Maybe Divi-related?

    Reply
    1. Rodolfo Melogli
      March 22, 2021

      Yeah, could be. Great!

      Reply
Questions? Feedback? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

Cancel reply

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


Search WooCommerce Tips

Popular Searches: Visual Hook Guides - Checkout Page - Cart Page - Single Product Page - Add to Cart - Emails - Shipping - Prices - Hosting

Recent Articles

  • WooCommerce: How to Stop Spam Orders on Free Products
  • WooCommerce: How to Configure Product and Order Sync
  • WooCommerce: “Beautify” Item Meta in Order Emails
  • WooCommerce: Per-Product Checkout Fees / Tariffs
  • WooCommerce: Auto-Cancel Orders After 3 Failed Payments

Latest Comments

  1. Rodolfo Melogli on WooCommerce Visual Hook Guide: Checkout Page
  2. Rodolfo Melogli on WooCommerce: Prevent Duplicate Orders
  3. Rodolfo Melogli on WooCommerce: Hide Checkout Fields if Virtual Product @ Cart

Find Out More

  • Become a WooCommerce Expert
  • Business Bloomer Club
  • WooCommerce Blog
  • WooCommerce Weekly
  • Contact

Contact Info

Ciao! I'm Rodolfo Melogli, an Italian Civil Engineer who has turned into an international WooCommerce expert. You can contact me here:

Twitter: @rmelogli

Get in touch: Contact Page

Business Bloomer © 2011-2025 - VAT IT02722220817 - Terms of Use - Privacy Policy

Cart reminder?

x