Okay
  Public Ticket #3208148
Change WooCommerce Single Product Background Color
Closed

Comments

  •  4
    Florent started the conversation

    I'm trying to change WooCommerce Single Product Background Color.  I didn't find the option in Salient > Woocommerce > Singleproduct. 

    I managed to edit  the following color  in : Salient > Woocommerce > general then select 'Product Archive Page BG Color'.

    First I would like to be able to define easily a background color for a single product page, editing an option i may haven't seen yet or adding a CSS code in my child theme.

    Then my final goal is to define a customised color for each singleproduct. Product 1 : background color 1 ; Product 2 : background color 2, .... (I have only 4 products)

    Thanks

  •  1,659
    Judith replied

    Hello Florent,

    Thanks for choosing Salient.

    Please send in your website URL so that we can check this out.

    Thanks.

  •   Florent replied privately
  •  8,441
    Tahir replied

    Could you allow us to log in to your website backend dashboard so we can check on this for you more?. We are gonna need the username and password of admin user as well as the login url.

    Thanks 


    ThemeNectar Support Team 

  •   Florent replied privately
  •  8,441
    Tahir replied

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    body.single-product,body.single-product .container-wrap {
        background: #f44336 !important;
    }

    Thanks


    ThemeNectar Support Team 

  •   Florent replied privately
  •  2,733
    Andrew replied

    Hello Florent,

    Thank you for getting back to us.

    You can make the CSS target a specific page by using a post/product id in your CSS. Replace the current CSS with this one to target this specific product. You need to change the id for each of your 4 pages.

    body.single-product.postid-2507 ,body.single-product.postid-2507 .container-wrap {
        background: #f44336 !important;
    }
    

    You can get the post id by right-clicking your page and inspect option, or ctrl + shift + i, and scroll to the top of the elements tab. Here's a screenshot of the same:

    5129558964.png

    I hope that helps.

    Kind regards,

  •  4
    Florent replied

    Thank you that was exactly what I was looking for.

    thanks again for your technical support

  •  2,733
    Andrew replied

    Hello Florent,

    Glad we could help, let us know if you have any other queries.

    Kind regards,