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 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.
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(--theme-palette-color-6);
margin-bottom: 2em;
}
.woocommerce-MyAccount-navigation ul li {
display: inline-block;
}
.woocommerce-MyAccount-navigation ul li:not(:last-child) a {
border-bottom: none;
}
}
