ResolvedSingle product page background color customization
- This topic has 4 replies, 2 voices, and was last updated 2 years, 5 months ago by
Tastytbrands.
- AuthorPosts
- April 1, 2021 at 12:37 pm #29794
Tastytbrands
ParticipantHello, 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!
April 1, 2021 at 12:41 pm #29795Althemist
KeymasterYou’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,
DimitarApril 1, 2021 at 1:06 pm #29801Tastytbrands
ParticipantThanks 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
April 1, 2021 at 1:48 pm #29804Althemist
KeymasterFor 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.
April 1, 2021 at 4:01 pm #29814Tastytbrands
ParticipantThanks 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!
- AuthorPosts
You must be logged in and have valid license to reply to this topic.