Archived topic
Product Tabs Styling
7 replies · Started by roadlink on February 4, 2021
Hello,
Have a nice day.
I have checked all the designs in Site Library but couldn't find what I am looking for.
Is it possible to reach similar design?
https://prnt.sc/y9v8o5
https://demo.studiopress.com/digital/product/amp/
It is not urgent, when ever you can check.
Or this one.
https://prnt.sc/y9v8o5
https://demo.studiopress.com/digital/product/amp/
Thank you.
I found the CSS, but my results is a bit different.
Original one : https://prnt.sc/y9wlh2
Mine : https://prnt.sc/y9wiuz
/* WooCommerce Product Tabs
---------------------------------------------------------------------------------------------------- */
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li {
border-color: #eee;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before {
display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background-color: #f5f5f5;
border-radius: 0;
padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
border-bottom: 0;
color: #000;
padding: .5em 1em;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
color: #232525;
}
Hi there,
can you share a link to YOUR site so i can take a look ?
sure, thank you.
Hi Tertas,
Try this CSS:
.woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs::after {
border-bottom: 1px solid #eee;
}
Let me know :)
Worked very well.
Thank you :)
You are welcome :)