Set Product Tabs as Vertical Tabs without Accordian style (all tabs always open)

This topic has 3 replies, 1 voice, and was last updated 5 years, 7 months ago ago by amongthieves

  • Avatar: amongthieves
    amongthieves
    Participant
    May 16, 2020 at 20:06

    Is there any way to set the product page tabs so that they are vertical (like the accordian style) but they are always open and they do not open and close like the accordian feature.

    Basically i want to display my tabs stacked, 1 after the other, with all of them open at all times so that when a customer scrolls down the product page, all of the tabs are displayed vertically and are already open.

    Please let me know if this is possible. Thank you.

    2 Answers
    Avatar: amongthieves
    amongthieves
    Participant
    May 17, 2020 at 05:08

    Ok so i was able to edit the CSS with Chromes Inspect tool. I was able to make all of the vertical accordian tabs be open at once by changing the div classes. Please see the following images. (i still need help)

    – Original CSS Selectors for Vertical Accordian Tabs (Pink highlight need to be changed, Blue highlight is “open” selector.)
    https://imgur.com/7gkjmyC

    – Edited CSS Selectors For Vertical Accordian Tabs (Orange Highlight is the original css selector for the first opened tab, Pink highlight is the other tabs css selector that has been changed to the Orange highlighted selector)
    https://imgur.com/aYrDdf4

    – Here is the file wp-content\themes\xstore\woocommerce\single-product\tabs\single-product-builder-tabs.php
    https://imgur.com/mFklMcc

    I believe this is where i have to edit the code, and change the div class for all tabs to be the css selector that i changed in the above 2nd image (.accordion-title .opened-parent .et-opened .opened). I am just not sure what code lines to remove, and what lines to change to the open selector.

    If you can please either send me an edited version of this file with the proper edits for the new selector to use for all tabs (to force them to use the css selector .accordion-title .opened-parent .et-opened .opened so that they are always open) or at the least, guide me through editing the file myself, that would be great. Thank you.

    Avatar: amongthieves
    amongthieves
    Participant
    May 17, 2020 at 06:00

    I was able to solve my issue by changing the display: none style set to the closed tabs to display: block and that has set the tabs to all be open upon page load. So my question has been solved, by me lol so i am closing this as solved.

  • Viewing 3 results - 1 through 3 (of 3 total)

The issue related to '‘Set Product Tabs as Vertical Tabs without Accordian style (all tabs always open)’' 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.