- This topic has 5 replies, 3 voices, and was last updated 3 years, 8 months ago by Tom.
-
AuthorPosts
-
July 3, 2020 at 8:46 pm #1351242David
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
July 4, 2020 at 1:55 am #1351382DavidStaffCustomer SupportHi 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); }
July 10, 2020 at 1:28 pm #1359507DavidI 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
July 11, 2020 at 3:46 am #1359869DavidStaffCustomer SupportGP 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.
July 11, 2020 at 9:06 am #1360171DavidThanks so much David. Yes, please let me know of the function that removes the description tab. Thank you!
July 11, 2020 at 2:56 pm #1360408TomLead DeveloperLead DeveloperHi there,
You can remove the description tab like this:
add_filter( 'woocommerce_product_tabs', function( $tabs ) { unset( $tabs['description'] ); return $tabs; }, 11 );
-
AuthorPosts
- You must be logged in to reply to this topic.