[eimkeithParticipant]

OK guys, I’m on to Woocommerce questions now (I heard that sigh of relief!) 😉

On my single product pages: http://zuffenhaus.jkeithwalters.com/product/2-8rsr-brake-kit/ (for example)

I’m closing in on getting the look and feel of the rest of the site, but have unnecessary elements/clutter in a few areas:

1.) I don’t need category tags to show on my single product pages – can that be omitted?

2.) Similarly, the ‘Product Description’ and ‘Reviews’ headlines in the PD and R tabs is redundant, can I omit them?

3.) I’ve made the background and removed the box borders for the tab content areas, which is what I’d like – but this creates a visual problem with the tab buttons. Currently the unselected tab button background changes to a solid color on hover, and the text is hard to see when not selected. Is it possible for the unselected tab to have a shaded transparent background to give the text more clarity?

4.) Can the tab button borders be removed?

[eimkeithParticipant]

Ok, I’ve solved #2 with this CSS:

/* remove prod descr and reviews titles in single product tabs */
.woocommerce div.product .woocommerce-tabs h2 {
display: none;
}
.woocommerce div.reviews .woocommerce-tabs h2 {
display: none;
}

[eimkeithParticipant]

For #1, I tried:

.posted_in, .tagged_as, .product_meta {
display: none !important;
}

– but it removes both SKU and Category (I’d like to keep SKU)

[DarshanaModerator]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

#1.

.single-product .product_meta {
    display: none;
}

#2.

.single-product .woocommerce-tabs li {
    display: none;
}

#3. & #4. Tabs will be removed from the above code.

Let us know how it goes.
Thanks!

[eimkeithParticipant]

In the above code, #1 removes the SKU also – is there a way to keep that but omit the category?

#2 removes the tabs altogether, which prohibits the use of reviews, which would be nice to keep as well.

[ChristopherModerator]

Hi there,

Please try this :

.single-product .product_meta span:first-child {
    display: none;
}
li.x-nav-tabs-item.description_tab,.x-tab-pane.fade.in.description_pane.active {
    display: none;
}
li.x-nav-tabs-item.reviews_tab {
    width: 100%;
}

Hope that helps.

[eimkeithParticipant]

OK, looks like that CSS does the following:

a. removes the SKU, but leaves the Category (opposite of what I’m after)
b. not sure what .x-tab-pane.fade.in.description_pane.active is doing, but the product description disappears altogether (I need that!)
c. makes the reviews tab the total width of the body (it will let me select it to show the reviews, but I cannot get the description)

[ChristopherModerator]

Hi there,

#1 It removes category successfully, see the attachment.

#3 Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks.

[eimkeithParticipant]

OK, I think I understand what might be happening, on the page I gave you, there is no associated SKU, so the code seems to function as needed. One my products that do have SKUs, the code removes the SKU but retains the Category.

Is there a way to specify “category”? (or perhaps I shouldn’t apply categories to my catalogue items?)

Here is another product page with the CSS change:
http://zuffenhaus.jkeithwalters.com/product/911rs-horn-button/

[RadModerator]

Hi there,

Yes, you can remove or specify your product category, you can do that at Admin > Woocommerce > Products > Categories and by editing your product.

Or simply hide it by this CSS.

.product .posted_in {
display: none;
}

Thanks!

[eimkeithParticipant]

that CSS, did it! thanks so much!

[JadeModerator]

You’re most welcome.

[Author]

Posts