[Ryanb18]

Hello

I have added all my products to my WooCommerce store, however I would like to customise the header image for each product page so it isn’t a black block. How can I either simply change the colour or add an image?

Kind regards
Ryan

[Skandha]

@ryanb18: Hello Ryan,
Please post in your site URL so that I can look into the issue.

Kind Regards,
Skandha

[Ryanb18]

Hello Skandha

Its my mothers site which I have been putting together for her: suebrowncrafts.com

An example of one of the products I would like to change the header image of: https://suebrowncrafts.com/product/crochet-blanket/

Kind regards
Ryan

[Skandha]

@ryanb18: Hello Ryan,
I am afraid it is not possible to have separate header image for single product pages.
To change the background color and height of the header content
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

@media screen and (min-width: 64em) {
	.single-product .custom-header-content {
	    padding: 60px 50px !important;
	}	
}

.single-product .header-media {
	background-color: #123456;
}

You can change the padding to change the height and change the color according to your choice.
Let me know if this works out!
Kind Regards,
Skandha

[Ryanb18]

Thank you

I will have a go at changing the colour of the headers

Kind Regards
Ryan

[Ryanb18]

Hello Skandha

I still can’t change the colour of the header image, am I to remove the #12345 and replace it with a colour such as #ed618d ? or am I doing it wrong?

Kind Regards
Ryan

[Skandha]

@ryanb18: Hello Ryan,
Can you try the following CSS Code instead?

.single-product .header-media {
	background-color: #ed618d !important;
}

Let me know if this works out!
Kind Regards,
Skandha

[Ryanb18]

Hello

Yes, this has worked, thank you!

Can I have each individual product header a different colour or do all of them have to be the same colour?

Kind Regards
Ryan

[Skandha]

@ryanb18: Hello Ryan,
You can have different color for individual product page.

Kind Regards,
Skandha

[Ryanb18]

Hello Skandha

How do I make each of the product headers different colours?

Kind Regards
Ryan

[Skandha]

@ryanb18: Hello Ryan,
For the product page https://suebrowncrafts.com/product/crochet-blanket/
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

.postid-335 .header-media {
    background-color: #f23456 !important;
}

Like wise you will need to use the post id for your other product pages.
Let me know if this works out!
Kind Regards,
Skandha

[Ryanb18]

Hello Skandha

Yes, that is great! thank you very much!

Kind regards
Ryan

[Skandha]

@ryanb18: Hello Ryan, I hope I was able to resolve your issue. If it’s not too much trouble, I have a quick request: could you please leave an honest review?
https://wordpress.org/support/theme/izabel/reviews/#new-post
Your review will help others know what to expect when they’re looking for the support I offer. Even a sentence or two would be hugely
appreciated. Thanks, and if there’s anything else at all that I can do to help, don’t hesitate to let me know. Have a good day! 🙂

Kind Regards,
Skandha

[Author]

Posts