Accordion Product Page Styling

Hi,

I would like some help if possible with the styling of the accordion under the product page.
I would like to have the arrow button, in the far right of the tab in the beginning of the tab, in the left. An if possible instead of the up – down arrow to have the plus and minus sign.

Thank you in advance.

Attachments:

You must be logged in to view attached files.

Hello,

Your purpose is not clear enough.

You can try to create an HTML block add the Accordion element and insert the ID shortcode into the extra content block. https://xtemos.com/docs/woodmart/product-page-options/#local_settings

Best Regards

Hi,

i have already done that. I have created the html block and put it inside the tabs. So i have an accordion from an html block inside tabs (that i have set up from the theme settings as accordion. Please check the website, i am sending you again the link, i have sent it in the previous message also.
And please check the screenshot i sent you before. I am sending you another one now. I want to display the arrows of the accordion ( i am displaying the tabs as accordion) in the left side of the accordion instead in the right side.

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .woodmart-accordion-title.active:before {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
body .woodmart-accordion-title:before{
     position: absolute;
    top: 50%;
    right: 0;
    margin-top: -10px;
    width: 20px;
    height: 20px;
    color: #bbb;
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    transition: -webkit-transform .4s ease;
    transition: transform .4s ease;
    transition: transform .4s ease, -webkit-transform .4s ease;
    content: "\f124";
    font-family: "woodmart-font";
    backface-visibility: hidden;
    perspective: 800px;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 800px;
}
.woodmart-accordion-title:after {
display:none;
}
body .woodmart-accordion-title{
padding-left:30px;
}

Best Regards

Hi,

thank you for your answer but it does not seem to be working. Please see screenshots attached.

Attachments:

You must be logged in to view attached files.

Hello,

Please delete the code and copy from the forum not from the email.

Best Regards

Hi,

i have tried the above code but it does not seem to work. I have cleared the cache memory and tried also incognito mode. But nothing changes. Please see screenshot attached.

Attachments:

You must be logged in to view attached files.

Hello,

Please replace the code with this one:

body .woodmart-accordion-title.active:before {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
body .woodmart-accordion-title:before{
     position: absolute;
    top: 50%;
    left: 0;
    margin-top: -10px;
    width: 20px;
    height: 20px;
    color: #bbb;
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    transition: -webkit-transform .4s ease;
    transition: transform .4s ease;
    transition: transform .4s ease, -webkit-transform .4s ease;
    content: "\f124";
    font-family: "woodmart-font";
    backface-visibility: hidden;
    perspective: 800px;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 800px;
}
body .woodmart-accordion-title:after {
display:none;
}
body .woodmart-accordion-title{
padding-left:30px;
} 

If it does not work, please provide site admin access to the private area.

Best Regards

Hi,

this one worked. Thank you very much for your time and effort!

Best Regards,

Alex

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts