Archived topic
Woocommerce single product page tabs
13 replies · Started by David on May 18, 2017
Hi Tom and team,
firstly great to see woo addon in place. Great that the lightbox zoom is working correctly and that you incorporated the show zero review stars ;) The update has allowed me to remove a few lines of my own custom code, knowing its in your capable hands for support is a real bonus.
Anyhow - i noticed that the Tab's showing descriptions and reviews on the single product page has changed - the tab names are now centred and there is no border formatting. Can you direct me to the classes i can use to format these tabs?
On another point do you know how to add additional tabs to the single product page?
Great work as usual! Loving GP more and more!
David
Hi David,
Any examples of the style you're going for?
I believe the content/amount of tabs is controlled by WooCommerce.
Hi Tom
for the current theme - it is a solid colour background with white out text for the selected tab. Preferably all tabs aligned left.
FYI i found the following for adding additional tabs (without another plugin!):
Editing and adding tabs to woocommerce
regards
David
You could do something like this:
@media (min-width:769px) {
ul.tabs.wc-tabs {
float: left;
width: 200px;
margin-right: 40px;
}
ul.tabs.wc-tabs li {
display: block !important;
margin: 0 !important;
}
ul.tabs.wc-tabs li:not(:last-child) {
border-bottom: 1px solid rgba(0,0,0,0.05) !important;;
}
.woocommerce div.product .woocommerce-tabs .panel {
float: right;
width: calc(100% - 240px);
}
.upsells, .related {
clear:both;
}
}Hi Tom thanks again.
This code, like all the others i have tried doesn't change anything on the tabs. Its odd as it has definitely changed since the latest GP update. Very weird. I am using the statement child theme (solely to stop my changes being overwritten - installed this before i knew you had a blank child theme) would this cause any other issues?
regards
David
Hmm, I tested it and it works. Can you link me to the page (with the CSS added)?
Ill send link by email. thanks
Can you try adding the CSS to the top of your custom CSS? It's possible there's a syntax error in there causing it not to render.
Hi Tom
yes that worked thank you! So would this mean there is a syntax error in some of the other code i have written?
David
Yep, try putting it all in this: https://jigsaw.w3.org/css-validator/#validate_by_input
Thanks Tom - yes found two errors - one was an unknown parameter which strangely still worked, and wasn't conflicting. The other is : Parse Error [empty string] in the following code - which is one of your codes for changing woo products to two columns. Any ideas?
@media (max-width: 768px) {
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce-page[class*=columns-] ul.products li.product,
.woocommerce[class*=columns-] ul.products li.product {
width: 48%;
float: left;
clear: both;
margin: 0 1% 2.992em;
}It's missing a closing }.
You can remove that CSS and do it using the add-on now though :)
Oh yeah - doh!
And of course!
Thanks for the support - learnt something new today!
Case closed.....
Glad I could help :)
