Custom icon

Hi @freddyeee

We can easily add the icons with some custom CSS. Under Customize > Additional CSS, you can add the following code:

@media screen and (max-width:480px){
.single-product .woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li:after {
    content: '>';
    position: absolute;
    right: 12px;
    top: 7px;
    font-weight: bold;
    transition: all .5s;
    transform: rotate(90deg); 
}
.single-product .woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li.active:after {
    transform: rotate(-90deg);
}
}

If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

Cheers ??

thank you very much !

How could I add this icon https://www.runayaq.com/wp-content/uploads/2022/10/dropdown-1.svg instead of the ‘>’ in content ?

Hi @freddyeee

You’re welcome!

You can replace my above CSS code with this new CSS:

@media screen and (max-width:480px){
.single-product .woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li a:after {
    content: url(https://www.runayaq.com/wp-content/uploads/2022/10/dropdown-1.svg);
    position: absolute;
    right: 12px;
    top: 7px;
    font-weight: bold;
    transition: all .5s;
    width: 20px;
}
.single-product .woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li.active a:after {
    transform: rotate(-180deg);
}
}

I hope that helps!