Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WooCommerce: CSS to make Storefront product tabs horizontal again
/*
vanbo/wc-css-make-storefront-product-tabs-horizontal
credit: https://gist.github.com/vanbo/c05e9b9512bd53e3680c82e1c6e4e6a3
*/
.product .woocommerce-tabs ul.tabs {
width: 100%;
float: none;
margin-right: 5.8823529412%;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
list-style: none;
padding: 0;
/*padding: 0 0 0 1em;*/
margin: 0 0 1.618em;
overflow: hidden;
position: relative;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
position: absolute;
content: ' ';
width: 100%;
bottom: 0;
left: 0;
/*border-bottom: 1px solid #d3ced2;*/
z-index: 1;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
border: 1px solid #d3ced2;
border-radius: 4px 4px 0 0;
/*background-color: #ebe9eb;*/
display: inline-block;
position: relative;
z-index: 0;
/*margin: 0 -5px;*/
padding: 0 1em;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
/*background: #fff;*/
z-index: 2;
border-bottom-color: #777;
background-color: #ebe9eb;
border: 1px solid #555;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before {
border: 1px solid #d3ced2;
position: absolute;
bottom: -1px;
width: 0;
height: 0;
content: ' ';
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before {
left: -6px;
border-bottom-right-radius: 4px;
border-width: 0 1px 1px 0;
box-shadow: 2px 2px 0 #ebe9eb;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before {
box-shadow: 2px 2px 0 #fff;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
right: -6px;
border-bottom-left-radius: 4px;
border-width: 0 0 1px 1px;
box-shadow: -2px 2px 0 #ebe9eb;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
box-shadow: -2px 2px 0 #fff;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
display: inline-block;
padding: .5em 0;
/*font-weight: 700;*/
color: #515151;
text-decoration: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: inherit;
text-shadow: inherit;
font-weight:bold;
}
/* https://stackoverflow.com/questions/14144426/remove-outline-from-active-jquery-ui-tab */
.woocommerce .wc-tabs li a:focus, .ui-state-focus:focus { outline: none !important }
.ui-tabs-anchor:active, .ui-tabs-anchor:focus{
outline:none;
}
@skarmazt

This comment has been minimized.

Copy link

skarmazt commented Oct 7, 2018

Hello, I used the CSS code and the tabs are horizontal but the position of the text under the tab remained same as before as in the screenshot below. Please help me get it right.

image

@justdudeone

This comment has been minimized.

Copy link

justdudeone commented Jan 23, 2019

The same problem. Have you found a solution to expand-widen a text area???

@justdudeone

This comment has been minimized.

Copy link

justdudeone commented Jan 25, 2019

I found the solution by myself, just add this code to custom Style.CSS:

.product .woocommerce-tabs .panel {
    width: 100%;
}
@hagenima

This comment has been minimized.

Copy link

hagenima commented Oct 27, 2019

hey i tried this but the description is not being show what wrong thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.