Return to previous page

Woocommerce product tabs accordion icon layout

This topic has 9 replies, 3 voices, and was last updated 2 years, 5 months ago ago by Bruno

Bruno

Participant

May 27, 2022 at 10:57

Hi

I have tried for a while and I can’t figure out how to place the woocommerce product tab icon to the right

https://ibb.co/VWMPvJS

Thank you

#324717 Copied Theme version: 8.1.6

8 Answers

Olga Barlow

Support staff

May 27, 2022 at 12:24

Hello,

Could you, please, provide us with link to page where you have icons at the left side instead of the right? We’ll check and help you.

Regards

#324722 Copied

Bruno

Participant

May 31, 2022 at 07:41

Hi Olga

Thank you so much for you help

Many thanks,

Please contact administrator
for this information.

#324863 Copied
Olga Barlow

Support staff

May 31, 2022 at 18:17
Hello,

Oh, you use a single product builder, got it. I added the below code to the child theme style.css
```
.wc-tabs .et-woocommerce-tab a {
    justify-content: space-between;
    flex-direction: row-reverse;
}
```
Check now.

Regards
#324913 Copied
Bruno

Participant

June 5, 2022 at 12:18

Thank you so much, can i ask one more thing please happy to open a new ticket if needed?

I’m trying to change the icon layout but the arrow does not seem in the middle, also tried to add icon style but it doest change when i open the tab?

I added the following css,

.woocommerce-tabs.type-accordion .wc-tabs .et-woocommerce-tab .open-child {

background: #F3B71B;
border-radius: 50px;
color: black;
}

I have attached image on what i am trying to make it look like.

Thanks again,

Please contact administrator
for this information.

#325177 Copied
Rose Tyler

Support staff

June 5, 2022 at 13:48
Hello,

Add the next code in Theme options > Theme custom CSS:
```
.single-product .toggles-by-arrow .active:not(li) > a .open-child:before,
.single-product .toggles-by-arrow .open-child::before {
    left: 20%;
}
.single-product .woocommerce-tabs.type-accordion .wc-tabs .et-woocommerce-tab .open-child {
    background: black;
    color: #F3B71B;
}
```
Regards
#325182 Copied
Bruno

Participant

June 5, 2022 at 19:18

Thank you so much but the arrow now does not look right its more to the right.

https://ibb.co/NmkNJtH

Or is there any way i could use the icon far fa-arrow-alt-circle-down instead?

Thanks again

#325188 Copied
Olga Barlow

Support staff

June 6, 2022 at 10:40
Hello,

I replaced the previous code with the below to add the FA icon instead of the existing one
```
.template-container .toggles-by-arrow .open-child:after {
    display: none;
}
.single-product .template-container .woocommerce-tabs.type-accordion .wc-tabs .et-woocommerce-tab .open-child {
    background: black;
    color: #F3B71B;
	  width: 24px;
    height: 24px;
}
.single-product .template-container .woocommerce-tabs.toggles-by-arrow .active:not(li)>a .open-child:before, .single-product .template-container .woocommerce-tabs.toggles-by-arrow .over>a .open-child:before, .single-product .template-container .woocommerce-tabs.toggles-by-arrow li.et-active>a .open-child:before {
    left: 14px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.single-product .template-container .woocommerce-tabs.toggles-by-arrow .open-child:before {
    content: "\f358";
    font-family: "Font Awesome 5 Free";
    position: relative;
    font-size: 24px;
    height: unset;
    background-color: transparent;
	-webkit-transition: none;
    transition: none;
}
.single-product .template-container .woocommerce-tabs.toggles-by-arrow .open-child::before {
    left: unset;
    -webkit-transform: none;
    transform: none ;
}
```
Regards
#325217 Copied
Bruno

Participant

June 6, 2022 at 12:12

Amazing, thank you for all your help

#325230 Copied
Tagged: accordion layout, icon layout, product tabs, seo friendly, woocommerce, wordpress themes
Viewing 9 results - 1 through 9 (of 9 total)

The issue related to '‘woocommerce product tabs accordion icon layout’' has been successfully resolved, and the topic is now closed for further responses

Woocommerce product tabs accordion icon layout

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection