[Resolved] Change Colour of Site Title and Site Tag Line on Woocommerce Product Page

[Laurie]

Hello Good Morning, I hope you are well,

I have a woocommerce site I am just putting together and wish to change the colour of the site title and site tag line on the woocommerce product page to a different colour.

It is currently white on the home page and this is how it is set in the customiser, I would like it to be black on the product page.

Can I also ask, is there also a generic code to change the colour on all or other woo pages (product, checkout etc.), I have been looking for the .page names so I could add them to the css and whilst I found some information could not find what I was looking for.

Many thanks for your help.

[Fernando]

Hi Laurie,

For reference, can you share the link to your product page?

[Laurie]

Hello, Thank you for your response, please see link to a product page, this product has been added to multiple categories. As mentioned I am wishing to display the product category image from the relevant product category that was used to access the product.

The field used to identify the category is the “Client Interest” field, so this product will have been added to both the. “Loft or Roof insulation” and “Cavity Wall Insulation” categories.

thank you for your response.

[Fernando]

Sorry, I’m confused. Are you looking to change the color of the site title and tagline on this page or the logo?

If it’s the color, the CSS code for that would be this:

.woocommerce .site-branding p a, .site-branding p{
    color: #000 !important;
}

[Laurie]

hello, Sorry I have a couple of help requests with you at the moment and think I gave you information relating to the other one!

yeas, I want to change the colour or the “Site Title” and the Site Tag line on the single product pages to black.

As in the page referenced below, the site title is white as it is set within the customisation, in the product page with the background being white it cannot been seen, as such I would like to change this to black on this page.

Thank you, sorry for the confusion.

[Fernando]

I see. Can you try the code I provided above and see how it goes?

[Laurie]

hello, yes I tried that, whilst it changes the color of the text on the product page to the black as desired, it also changes the colour of the tag line to black on the home page. (The home page site title remains white as intended but also want the site title in whit on the home page too.)

I have left the css added so you can see the results, thank you

[David]

Hi there,

try adding this CSS to fix the homepage issue:

.header-wrap .site-description {
    color: #fff !important;
}

[Laurie]

hello David,

Thank you for your response, I have added the code as suggested, unfortunately, while this now results in the home page Site title and tag line showing in white as wanted, the tag line on the product page is now also white but the site title is still black (as required) on the product page?

As mentioned, I need the color of both the site title and tag line white on the home page and both Site title and tag line black on the woocommerce product page.

many thanks

[David]

OK, so your site is using a Header Element, found in Appeearance > Elements:

https://docs.generatepress.com/article/header-element-overview/

It doesn’t look like you need that on your product pages.
Can you edit the element and change the display rules location to: Front page.

That should fix the color issue, and stop your other pages from floating up behind the navigation.

[Laurie]

Hi , Many thanks that worked, I have added the pages that I need to the display rules, looks good!

many thanks for your help.

[David]

You’re welcome

[Author]

Posts