Woocommerce Tabs [how can I style specific tabs? – RESOLVED]

Tagged: ,

Author Posts

Greggot February 7, 2014 at 5:21 pm

Heads up! this post was created when Microthemer was at version 2. The current version is 7. Some references to the interface may be out of date.

Hello,

I’ve installed Blank Woocommerce but I’m struggling to find the selector to style on the single product page the tabs : description/additional information/review.

What I found is styling also the bullet point in the description’s paragraph.

Someone to help me ?

Sebastian February 7, 2014 at 8:26 pm

Hi Greg,

You can style the single product tabs using the selectors in the general WooCom Tabs section.

The selectors shouldn’t be targetting the bullet points in the product description area. Are you using the latest version of Blank WooCommerce? It was updated a while ago: https://themeover.com/blank-woocommerce/

The CSS selectors for each selector in the WooCom Tabs section is as follows:

Tabs Wrapper
div.product .woocommerce-tabs
Tab List
div.product .woocommerce-tabs ul.tabs
Tab
div.product .woocommerce-tabs ul.tabs li
Tab Link
div.product .woocommerce-tabs ul.tabs li a
Tab Link Hover
.woocommerce-tabs ul.tabs li a:hover
Tab Active
div.product .woocommerce-tabs ul.tabs li.active
Tab Active Link
div.product .woocommerce-tabs ul.tabs li.active a
Tab Panel
div.product .woocommerce-tabs .panel
Tab Panel Heading
div.product .woocommerce-tabs .panel h2

You can check if the Selector has the right CSS code by hovering your mouse over the selectors in the dropdown menu in the visual view.

Please let me know if you need more help with this (and post a link to your site perhaps)

Cheers,

Sebastian

You must login or register to reply to this topic.