By default Woocommerce shows my account web page tabs vertically as a sidebar. On this submit I’m going to point out you learn how to show Woocommerce my account tabs horizontally. You will want solely a few strains of CSS code for that.
Find out how to show Woocommerce my account tabs horizontally?
So, go to the Customizer >> Extra CSS and paste this snippet over there. Couple of explanations:
- This piece of code works provided that your theme shouldn’t be overriding Woocommerce my account web page styling (see the instance beneath for Blocksy theme)
- It can make your account tabs seem above the tab content material.
- It can show them horizontally solely on screens with greater than 768 pixels.
- If the display is smaller than 769px then the default structure is present
@media solely display and (min-width: 769px) {
.woocommerce-account .woocommerce-MyAccount-content, .woocommerce-account .woocommerce-MyAccount-navigation {
float: none;
width: 100%;
}
}
@media solely display and (min-width: 769px) {
.woocommerce-MyAccount-navigation ul {
text-align: heart;
}
.woocommerce-MyAccount-navigation ul li {
show: inline-block;
}
}If ererything works because it ought to then that is the top consequence. You may customise CSS accordingly (text-align: heart; for instance).
Find out how to show Woocommerce my account tabs horizontally on Blocksy theme?
Yet one more factor I’ve to make clear: there are a bunch of themes which can be overriding Woocommerce my account web page styling. For instance, Blocksy theme does that. So, if this occurs then that you must discover out the CSS class your theme is utilizing 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 courses that you must tweak. Now, if you wish to show Woocommerce my account tabs horizontally on Blocksy theme then use this code right here beneath as an alternative and tweak it as you want.
Additionally, listen that with Blocksy you may customise my account tabs design by going Customizer >> Woocommerce >> Normal >> Account web page
/* Show Woocommerce my account tabs horizontally on Blocksy theme */
@media solely display and (min-width: 769px) {
.ct-acount-nav {
float: none;
width: 100%;
}
.ct-woo-account {
show: block;
}
@media solely display and (min-width: 769px) {
.woocommerce-MyAccount-navigation ul {
border-bottom: 1px stable var(--theme-palette-color-6);
margin-bottom: 2em;
}
.woocommerce-MyAccount-navigation ul li {
show: inline-block;
}
.woocommerce-MyAccount-navigation ul li:not(:last-child) a {
border-bottom: none;
}
}
