Return to previous page

Woo Commerce Product Tab Color Shading - by George

This topic has 16 replies, 2 voices, and was last updated 7 years, 10 months ago ago by 8theme

George

Participant

January 10, 2017 at 20:58

How can I add a light color gray to the product tabs on the single product page except for the active tab. I see this on many websites. THanks!

#151473 Copied Theme version: XStore Child Theme 3.3 WooCommerce version: 2.6.11

15 Answers

George

Participant

January 11, 2017 at 10:00

2.) Please add a 2nd item for the product tabs question. When the product tabs are displayed in left side accordian mode, I would like to reduce the vertical padding in each tab as it is out of proportion to the font.

Thanks again.

#151502 Copied
8theme

Support staff

January 11, 2017 at 11:44
Hi,

Use this code
```
.tabs .tab-title span {
    color: #d0d0d0;
}

.tabs .tab-title.opened span {
    color: black;
}

.left-bar .left-titles li {
    padding: 15px 20px;
}
```
Regards
#151524 Copied
George

Participant

January 11, 2017 at 16:39

Thanks. That works. However I was really looking to see if the shading could be done the opposite way. Font color remains the same BUT the white space in each tab box is light gray (can read text easily) and the active tab is completely white. I have seen that on many examples of Woo Commerce Single Product Page tabs. THanks.

#151597 Copied

8theme

Support staff

January 11, 2017 at 16:58

Could you please provide a screenshot of some example?

#151603 Copied

George

Participant

January 11, 2017 at 17:16

I have attached a screenshot showing Wood Commerce Tabs gray and active tab white. I also showed the ADD TO CART button to the right of the +- which I would like to change. Looks Good/Clean AND saves vertical space.

Thanks.Active Tab White, Remaining Gray AND the ADD TO CART button to right of +- box

#151606 Copied
8theme

Support staff

January 12, 2017 at 08:14
Hi,

Try this code snippet also
```
.left-bar .left-titles li:not(.active) {
	background:#efefef;
}
```
Regards
#151631 Copied
George

Participant

January 12, 2017 at 09:28

Thanks. It works but doesn’t look right on a Left Tabs Format. I used your css code from Jan 11 and it worked, eliminating the padding and the active tab text is now red but:

1.) I still need to make the Underline ____________ for the active tab text in red also

2.) I would like to also duplicate the tab format on your single page product demo pages showing active tab red like #1 above AND having black text turn red when the cursor hovers over a new selection.

Thnaks for all your help!

#151646 Copied

8theme

Support staff

January 12, 2017 at 10:59

Hi,

Please, provide a screenshot of how you want to make product tabs look like.

Thank you

#151659 Copied

George

Participant

January 12, 2017 at 16:38

Please see the xstore demo single product page: https://www.8theme.com/demo/xstore/shop/woman/dresses/hope-power-dress/?preset=tabs_left

I am looking to have the tab titles work just like this: Active tab text AND underline is in Red and when you move your cursor over another tab, the active tab display remains but the tab text you are hovering over also turns red while you are hovering over it.

Should be a snap 🙂

Thanks.

#151712 Copied

George

Participant

January 12, 2017 at 16:40

Also, just like this same page, when the Reviews tab is active and text/underline is in red, the “Submit” button is in red. Would like that to work toom

#151713 Copied
8theme

Support staff

January 12, 2017 at 16:47
Here is a code for this
```
.tabs .tab-title span {
	transition:0.3s all;
	-webkit-transition:0.3s all;
	-moz-transition:0.3s all;
}

.tabs .tab-title:hover span {
	color:red;
}
```
If we will change button color then all buttons through the site will have a red color.a

Regards
#151715 Copied
George

Participant

January 12, 2017 at 17:20

The hover works great, the text on each tab turns red as you hover.

However one more thing. The Active tab text is red but it also has an underline which is still in black. Anyway to make it a matching red also? then we are done on this issue :).

Ok on making the red review tab submit button red. I guess this was a demo feature only.

#151721 Copied

8theme

Support staff

January 13, 2017 at 08:20

Strange, but we see it is red now https://gyazo.com/ff8a12cbffb3158d9f0baf5b9393cfde

#151755 Copied

George

Participant

January 13, 2017 at 08:32

I am not a terribly technical person and importing “pages” I inadvertantly over-wrote the theme settings with a new home page. Not too much of a problem as I am mainly focused on loading Woo Commerce so it didn’t take too long to redo theme settings that changed.

Well I discovered that making this change solved the problem in this request for he as it does exactly what I wanted. As a default it has “Red” as the theme color. Then all I have to do is change the header, breadcrumbs etc to the color(s) needed but still leave Red as the overall color.

This did create some problems as I notice that my videos no longer show up in full display in the video tab on the single product page. I have had this problem before and then the next day it goes away so I will wait to see if I need a new ticket or not.

At this point you can close this ticket. As always, I do appreciate your quick and effective support.

#151756 Copied

8theme

Support staff

January 13, 2017 at 08:51

Ok, we are glad that you found the solution.

#151760 Copied
Viewing 16 results - 1 through 16 (of 16 total)