ResolvedSingle product page background color customization

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #29794
    Tastytbrands
    Participant

    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!

    #29795
    Althemist
    Keymaster

    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

    #29801
    Tastytbrands
    Participant

    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

    #29804
    Althemist
    Keymaster

    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.

    #29814
    Tastytbrands
    Participant

    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!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in and have valid license to reply to this topic.

License required for the following item
Login and Registration Log in · Register