[Tastytbrands]

Hello, I need to customize the single product pages background colour. Right now it is set to white, but i need it to be set on black. Searching online, I found that a possible solution is that of adding a custom code on the CSS:

body.single-product {
background: black;
}

However, it does not seem to work. This is an example of a product page I am trying to customize: https://tastyt.it/prodotto/cbc/

How can I do it? furthermore, what if instead of setting a color, I would like to set an image?

Thanks in advance to the team or whoever manages to help me!

[Althemist]

You’d also need to set the background for the main container:

body.single-product #content > .inner, body.single-product #content:not(.has-sidebar) #products-wrapper .woocommerce-tabs.wc-tabs-wrapper {
background: black;
}

Keep in mind you’d also need to style a lot of other elements (texts etc.), as the theme wasn’t meant to be used on dark background.

Best regards,
Dimitar

[Tastytbrands]

Thanks a lot Dimitar, I did as you said and it worked wonders. There is only a problem, that is that the “extras” (addons that you can add to the food) are not correctly displayed. In fact, it’s as if there was a white rectange, and since the text is white as well, it does not show (please see https://tastyt.it/prodotto/cbc/ for reference).

Furthermore, as you said, i need to chenage the colour of the text/icons. That was a problem i was experiencing with other pages as well in the when adding elements from Woocommerce. If i am not mistaken, the colours are pre-set by woo-commerce to a colour like grey (it seems like grey at least). What can i do to change them (to white, in my case?)? is there a specific place i need to go or is it custom code? If you have some documentation for reference, I would love to check it. thanks again

[Althemist]

For the white rectangle:

h3.addon-name {
    background-color: #yourcolor;
}

For the texts, you may need to style many different elements, but the base text color comes from the Theme Options > Fonts > Body font settings. You can override it with CSS for teh single product page only like this:

body.single-product, body.single-product .tagcloud span:not(.sku), .lafka-nutrition-allergens, body.single-product div.product .woocommerce-product-details__short-description, body.single-product .lafka-product-summary-wrapper div.summary {
    color: #yourcolor;
}
body.single-product div.product .price {
    color: #yourcolor !important;
}
.summary.entry-summary .yith-wcwl-add-to-wishlist a {
    color: #yourcolor;
}

You may need to add more selectors depending on your needs.

[Tastytbrands]

Thanks again for the fast reply. It works now. I’ve also understood how to play with the css a bit but some things i still can’t figure out. it’ll take time. thanks again, and have a good day!

[Author]

Posts