Single Product page tabs & content

[adubs777]

What CSS should I be using to change the background color and tab title text size of the tabs and content background that shows in all tabs. Plus the tabs reveal the content when clicked but they don’t collapse back when clicked on again or away from, how can I make this be?

thanks

[Prasant]

Hello @adubs777,

Thanks for asking.

You can add following CSS under X > Theme Options > CSS to make necessary changes in product tabs.

.x-nav-tabs > .active > a, .x-nav-tabs > .active > a:hover {
    background-color: #ddd;
    font-size: 14px;
}

.x-tab-content {
    background-color: #ddd;
} 

Can you please elaborate the second part of question? Along with that please share website URL for us to take a closer look.

Thanks.

[adubs777]

@Prasant

.x-nav-tabs > .active > a, .x-nav-tabs > .active > a:hover {
background-color: #ddd;
font-size: 14px;
}

.x-tab-content {
background-color: #ddd;
}

Thanks, that seems to work only after I click open the tab then I can see the css changes but before that the tab is white and font is #ddd I think.
here’s a link to the site http://wishcandle.com/product/candle-set/
which for these single product pages I’ll also want to get the Gallery thumbs centered below the main image like with a padding of 20px or so. Thanks for any suggestions that can do this

oh and for the other part to this, is that the tab expands open after clicking but then I cannot find a way to collapse that tab content back in so it’s like it was before clicking open the tab.

[friech]

Hi There,

@adubs777

oh and for the other part to this, is that the tab expands open after clicking but then I cannot find a way to collapse that tab content back in so it’s like it was before clicking open the tab.

Sorry but I am not entirely certain of what you’re trying to do, you only have 1 tab which is the product description so this makes the tab open all the time. Maybe you’re referring to a different tab, would you mind to clarify?

Regarding the Gallery Thumbnail, please add this to Theme Options > CSS

.flex-control-nav.flex-control-thumbs {
	position: relative;
	padding-top: 0;
}

Thanks,

[adubs777]

friech
Staff

100% beeswax WISH Candle set copper capsule card envelope gift

The CSS code you last provided didn’t change anything. I’d like to get the thumbs centered below the main image or at least below the main image and not covering up any of that main image.

The description tab would be nice to be able to collapse back into the tab heading/title box so that it’s not expanded out displaying that tab’s content all the time.

[friech]

Hi There,

I saw a few syntax errors on your custom CSS (Theme Options > CSS) that needs to be addressed first because of it affecting other CSS blocks in that area including the last one that I provided.

First this block:

===============================================
/*woocommerce add to cart button display none

a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart{
  display:none;
}

a.button.product_type_variable.add_to_cart_button{
  display:none !important;
}

form.cart{
  display:none;
}

p.stock.in-stock{
  display:none;
}

div.product_meta{
  display:none;
}

p.woocommerce-result-count{
  display:none;
}

select.orderby{
  display:none;
}

p:empty {
  display:none;
  }*/

===============================================

Remove all the =============================================== on that block as that is not a valid commenting, or you can remove that block all at once as you have commented that out.

Second, remove the extra # on this block:

a.x-portfolio-filter {
color: ##512c1d;
}

Third, remove this block as this is an incomplete, no CSS property in it.

.option-set .x-portfolio-filters-menu>li>a:hover {none;
}

Hope it helps,
Cheers!

[adubs777]

Thanks @friech That cleared up the thumbnails position to display centered below the main image. I’ll be more attentive to the syntax with any new additional code.

Enjoy your day!

[ruenel]

You’re welcome!
We’re glad we were able to help you out.