Tabby tabs within Woocommerce tabs

  • Resolved Mr Lucky

    (@voodoochill)


    6 years, 7 months ago

    Very nice plugin, thank you. One small issue I hope you may be able to fix.

    I have just noticed that when using Tabby Responsive tabs on a Woocommerce description (which itself is a tab in the Woocommerce product) it is fine, until you go into repsonsive mode.

    e.g. the Tabby tabs are visible under the description, but not when viewed on a tablet or mobile.

    See test product in link

    • This topic was modified 6 years, 7 months ago by Mr Lucky.

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author cubecolour

    (@numeeja)

    A rule within one of the inline stylesheets on the page appears to be causing this:

    
#tab-description h2
{display:none}

    The accordion should appear correctly if this rule is either removed, given greater specificity or overidden by another rule with greater specificit/.

    Thread Starter Mr Lucky

    (@voodoochill)

    Thanks for the quick reply.

    Yes, you are right that is causing it.

    However I can’t see why it should cause the issue, as that is a woocommerce CSS, not Tabby ???

    I want to have that as otherwise there is a superfluous Woocommerce description (it shows the WC title both as a heading and a description)

    So I’m a bit confused. As soon as I remove that, I get the double title “Description” as you can see now on the page.

    Plugin Author cubecolour

    (@numeeja)

    All h2 elements which are child/grandchild elements of the the woocommerce tab description are affected by that rule – This includes the WC tab titles and the title blocks of the TRC accordion.

    You can retain the rule

    
#tab-description h2
{display:none}

    If you override it by also adding a rule with greater specificity to target just the h2 elements within tabby responsive tabs:

    
#tab-description .responsive-tabs h2
{display:block}
    Thread Starter Mr Lucky

    (@voodoochill)

    Many thanks again, however that causes other issues, ie it creates a margin beneath the (non-responsive) tabs. That isn’t too bad, but it also weirdly makes the title of tab 1 show at the end (after tab 3)

    Plugin Author cubecolour

    (@numeeja)

    Maybe the h2 itself needs more specificity

    Try:

    
#tab-description .responsive-tabs h2.responsive-tabs__heading
{display:block}
    Thread Starter Mr Lucky

    (@voodoochill)

    Thanks but…same issue.

    Plugin Author cubecolour

    (@numeeja)

    It looks like a more targetted rule is required.

    Can you put the styles back to how they were originally, then I’ll try to suggest how to modify.

    Thread Starter Mr Lucky

    (@voodoochill)

    Done

    Just has #tab-description h2 {display:none}

    NB: many thanks for helping, great support!

    Plugin Author cubecolour

    (@numeeja)

    Try replacing

    #tab-description h2 {display:none}

    with

    #tab-description > h2 {display:none}

    So this rule only acts on h2 elements which are immediate child elements of the #tab-description.

    Thread Starter Mr Lucky

    (@voodoochill)

    That did the trick, many thanks

    Plugin Author cubecolour

    (@numeeja)

    Great! I’m glad that worked

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Tabby tabs within Woocommerce tabs’ is closed to new replies.