Accordion Product Page Styling

This topic has 9 replies, 2 voices, and was last updated 4 years, 6 months ago by Elise Noromit.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
May 16, 2020 at 2:05 pm #195524

akarras
Participant

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.

May 16, 2020 at 7:58 pm #195572

Elise Noromit
Member

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

May 17, 2020 at 6:48 am #195619

akarras
Participant

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.

May 17, 2020 at 11:11 am #195665
Elise Noromit
Member
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
May 17, 2020 at 11:21 am #195666

akarras
Participant

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.

May 17, 2020 at 12:18 pm #195682

Elise Noromit
Member

Hello,

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

Best Regards

May 17, 2020 at 12:33 pm #195689

akarras
Participant

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.

May 17, 2020 at 5:02 pm #195729
Elise Noromit
Member
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
May 18, 2020 at 11:27 am #195894

akarras
Participant

Hi,

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

Best Regards,

Alex

May 18, 2020 at 1:49 pm #195922

Elise Noromit
Member

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

Best Regards
Author

Posts