Product page tabs

Hello there,
yopu can achieve a very similar look by using this Additional CSS:

.single-product .woocommerce-tabs ul.tabs {
    position: relative;
    padding-top: 10px;
}

.single-product .woocommerce-tabs ul.tabs:before {
    content: '';
    display: block;
    left: -100vw;
    right: -100vw;
    bottom: 0;
    top: 0;
    background: #ebebeb;
    position: absolute;
}

.single-product .woocommerce-tabs ul.tabs li a {
    padding: 15px;
}

.single-product .woocommerce-tabs ul.tabs li.active a {
    background: #ffffff;
    box-shadow: 0 0 10px rgb(0 0 0 / 10%);
}

Let me know if you need further help on this ??

Thanks for the code. I tested this out on our staging site. It did highlight the tabs and put them in a gray bar. However, it didn’t stick to the top when you scroll down.

sample page:
https://www.1st-line.com/buy/ascaso-24-lt-in-tank-water-softener-particle-filter/

No I’m sorry… that functionality needs further customizations and JS scripts to be included and configured properly. At the moment this feature is not in Proteo

Hi,

I found code that can make the product tabs stick to the top when you scroll down. The only problem I have is when you are scrolled down in a certain tab and you click on another tab, it doesn’t start at the top of that tab. It’s scrolled down at the same amount you were in the previous tab.

.woocommerce div.product .woocommerce-tabs ul.tabs {
position: sticky;
position: -webkit-sticky;
top: 0;
background: #fff;
}