[Support request] Wocommerce pages missing some lines and borders

Home Forums Support Wocommerce pages missing some lines and borders

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1351242
    Dexter

    Hi,

    I’ve noticed my woocommerce pages seem to be missing some borders and looking funny at times. For example, the description tab seems to be missing a border box. Any idea what might be causing this? Thank you. Here’s a screenshot.

    https://www.dropbox.com/s/nf37ycrjtpabyzf/Screenshot%202020-07-03%2023.44.07.png?dl=0

    #1351382
    David
    Staff
    Customer Support

    Hi there,

    the default style is for tabs, so the active one doesn’t have a bottom border – which looks fine when there are more than one tab on view.
    You can add a bottom border using this CSS:

    .woocommerce #content div.product .woocommerce-tabs ul.tabs li,
    .woocommerce div.product .woocommerce-tabs ul.tabs li,
    .woocommerce-page #content div.product .woocommerce-tabs ul.tabs li,
    .woocommerce-page div.product .woocommerce-tabs ul.tabs li {
        border-bottom: 1px solid rgba(0,0,0,.08);
    }
    #1359507
    Dexter

    I get what you’re saying but I think there might be a deeper issue… What about a border around the content within the description box? Shouldn’t that be there automatically even when there’s only one tab? I’m also noticing some other issues. Like on mobile, it says “Description” twice. Once in a box and once not (screenshot below). Also, the price is left justified rather than centered on mobile. This doesn’t seem like default behavior for woocommerce so I’m thinking there’s a deeper issue. I could fix this with CSS, I just want to address the core issue if there is one. Maybe I’m crazy?

    Here is a screenshot from mobile: https://www.dropbox.com/s/pe11qtv5jxkp3vz/IMG_7880.PNG?dl=0

    #1359869
    David
    Staff
    Customer Support

    GP does a few minimal changes to the default woo styles.
    It removes the border below the Tabs ( theres no border around the tab panels by default ) and the radius corners of the tabs.
    But thats about it.

    Description you see twice – one is the Tab and the other is the Title of the tab panel. Thats default Woo behaviour. When only requiring a single tab i would remove the tab panels altogether. This can be done with a function – happy to help with that.

    Centring the price on single product isn’t a default Woo style for mobile. They’re always left-justified.

    Apart from some minimal border changes GP does very little style sheet customization to woo. We leave the majority of that within the bounds of GP’s Woocommerce module.

    #1360171
    Dexter

    Thanks so much David. Yes, please let me know of the function that removes the description tab. Thank you!

    #1360408
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You can remove the description tab like this:

    add_filter( 'woocommerce_product_tabs', function( $tabs ) {
        unset( $tabs['description'] );
        return $tabs;
    }, 11 );
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.