Site logo

Archived topic

Wocommerce pages missing some lines and borders

5 replies · Started by David on July 3, 2020

Viewing posts 1–6 of 6

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);
}

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

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.

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

Hi there,

You can remove the description tab like this:

add_filter( 'woocommerce_product_tabs', function( $tabs ) {
    unset( $tabs['description'] );
    return $tabs;
}, 11 );
This archived topic is closed to new replies.