How can I get an image as my Woocommerce shop page header background?

Question

My Woocommerce category pages have the option to change thumbnail and it goes on the header area of the page (under the main menu), but there isn't such option for Woocommerce shop page. Maybe because it is an archive page?

My Woocommerce shop page header has a white background, so there is a white space between main menu and products. Page title also is displayed in this area. I know how to change this background color, but I would like to upload an image.

So - How can I get an image as my Woocommerce shop page header background?

Thank you!

If this isn't supported by your theme, you could just add it using CSS yourself. Could you share your code / the page you want the image on? — Sam Johnson
Hello, Sam! How can I do that? This is the page - watchempire.co.uk/shop — Rudolfs

Sam Johnson Sam Johnson · Accepted Answer · 2018-01-16T16:44:04

You should be able to fix this quite easily with CSS.

.opacity-light.bg-dark-gray {
  opacity: 1;
  background-image:url('IMAGE_URL_HERE');
}

To be certain it doesn't override your other pages, you could be more specific with the selector so that it only targets the div on that type of page, so:

.post-type-archive-product .opacity-light.bg-dark-gray { .. }

Hope that helps!

How can I get an image as my Woocommerce shop page header background?

2 Answers