Support » Plugins » [Plugin: Woocommerce] Product Tab Visibility Issue in Flatsome Theme

  • I’m helping a friend out with his e-commerce site, but I’m having trouble with an tab issue on the products page. He’s using the theme “Flatsome”.

    The tabs are functioning correctly on each individual product’s page, but on the Products Page where all of the products are shown simultaneously (stacked vertically on top of each other), the tabs are only working on the first product listed (RAVISH). On every other product (IGNITE, etc), even though the tab is clicked on and technically active, the descriptions/reviews/ingredients aren’t visible (see screenshots below).

    http://www.bioaxissupps.com/wp-content/uploads/2016/04/bioaxissupps1.png
    http://www.bioaxissupps.com/wp-content/uploads/2016/04/bioaxissupps2.png

    Looking at the CSS, on Ravish, once the tab has been clicked on, the CSS looks like this:

    .vertical-tabs .tabs-inner.active, .tabbed-content .panel.active {
        margin: 15px 0;
        float: none;
        line-height: 130%;
        visibility: visible;
        height: auto;
        overflow: visible;
        opacity: 1.0;
        -webkit-transition: opacity 300ms ease-out;
        transition: opacity 300ms ease-out;
    }

    While the other products’ tabs look like this once they’ve been clicked on:

    .vertical-tabs .tabs-inner, .tabbed-content .panel {
        zoom: 1;
        float: left;
        visibility: hidden;
        height: 0;
        display: block;
        overflow: hidden;
        opacity: .0;
        -webkit-transition: opacity 0ms ease-out;
        transition: opacity 0ms ease-out;
    }

    I would assume something in the javascript is failing to activate the following products’ tabs once they’ve been clicked on, because as shown in the screenshot below, the space where the content should be showing up is displayed as a block, but the actual content is still hidden due to the inactive div status.

    http://www.bioaxissupps.com/wp-content/uploads/2016/04/bioaxissupps3.png

    I’m just unsure of how to fix it since it’s obviously working on the first product? Any help would be greatly appreciated!

  • The topic ‘[Plugin: Woocommerce] Product Tab Visibility Issue in Flatsome Theme’ is closed to new replies.