Woocommerce product tabs accordion icon layout

This topic has 9 replies, 3 voices, and was last updated 1 year, 9 months ago ago by Bruno

  • Avatar: 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

    8 Answers
    Avatar: Olga Barlow
    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

    Avatar: Bruno
    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.
    Avatar: Olga Barlow
    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

    Avatar: Bruno
    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.
    Avatar: Rose Tyler
    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

    Avatar: Bruno
    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

    Avatar: Olga Barlow
    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

    Avatar: Bruno
    Bruno
    Participant
    June 6, 2022 at 12:12

    Amazing, thank you for all your help

  • 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

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.