Product Review Text Box Background Color Change Woocommerce

Support
#1

Hello,

I removed all borders from everything on the product pages.
The downside of that is no one can see the review text box white on white with no border.
Does anyone have a snippet that can change the background color of the review text box?
Ideally, I just want to change it to a light grey #ECECEC

Thank you!

Jesse

#2

Hello Jesse,

Thanks for writing in!

If you only want to change background color of Review box, please add following CSS under X > Theme Options > CSS:

.reviews_pane.active {
    background-color: #ECECEC;
    margin-top: 10px; 
    border-radius: 20px;
}

In case you also want to change background color of Description area, please add following CSS under X > Theme options > CSS:

.description_pane.active{
    background-color: #ECECEC;
    margin-top: 10px;
    border-radius: 20px;
}

In above code margin-top: 10px; and border-radius: 20px; is optional that I added to style the background color. You can remove the same as per your requirement.

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#3

Thank worked great,

I also applied it to this site.
https://vitalitycbd.com/buy/water-soluble-cbd-tincture-500-mg/

I figured out the additional information tab code as well.
BUt i have a custom tab for customer reviews that pulls in shortcode.
The code I tried making up for that one didn’t work.
Any ideas?

Jesse

#4

Hi Jesse,

For this site (https://vitalitycbd.com/buy/water-soluble-cbd-oil/) the review pane class selector is .brand-reviews_pane.active

e.g.

.brand-reviews_pane.active {
    background-color: #ECECEC;
    margin-top: 10px;
    border-radius: 20px;
}

Hope it helps,
Cheers!

#5

You’re awesome! Thank you! Worked like a charm.

#6

You’re most welcome, Jesse.

#7

Weird Problem, https://luminacbd.com/product/lumina-citrus-cbd-oil/

The additional tab on this website shows up inside a white text box.
It doesn’t do that on my Vitality site.
Any ideas?

#8

Hello Jesse,

Are you referring to this tab?

This is because of the contents being displayed in a table element and by default, it has a background color. To resolve this, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.woocommerce div.product .woocommerce-tabs table,
.woocommerce div.product .woocommerce-tabs table th, 
.woocommerce div.product .woocommerce-tabs table td {
    background-color: transparent !important;
}

We would love to know if this has worked for you. Thank you.

#9

Awesome, thank you!

#10

You’re always welcome!

In case you still have inquiry, please open a new thread.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.