[Larissa Eremeeva-Tupitsyna]

Hi,

I wanted to change the header images which are displayed on the Category pages in WooCommerce shop, so I purchased the WooCommerce Banner Image plug-in. However, this just loads the banner image underneath the standard header image for the website. How can I customise the image at the top of each product category page? (On the individual product pages this is done and I get an image of the product in the header).Thanks!

[minal]

Hello @larissa:

On single-product pages, the header image works correctly because the product image serves as the featured image. However, on category pages, this behavior does not apply.

That thing is coming from the plugin, so the theme does not control it. It would be better to contact the WooCommerce Banner Image plugin support, who can provide a proper solution.

Sincerely,
Minal

[Larissa Eremeeva-Tupitsyna]

Thanks for quick reply. Have contaccted WooCommerce and this is what it tells me:

“I understand! You want category-specific header images that replace the site-wide header, similar to how individual product pages show the product photo in the header area.

This functionality is typically controlled by your theme’s template files rather than WooCommerce core or the Banner Images plugin. The Banner Images plugin adds promotional banners but doesn’t replace the main header image.

Since you’re using the zubrin-pro-child theme, this would likely require:

1. Theme customization to modify how category pages display header images
2. Custom code to pull category images into the header area
3. Template modifications in your child theme

However, I can’t provide custom code since it’s outside our WooCommerce Support Policy. For this type of customization, you’d need help from:

• A developer from our customizations page
• Our Developer Hub
• The Developer Slack Community

Alternatively, you could consider switching to a WooCommerce-compatible theme that has built-in category header customization features. Would you like me to help you explore theme options that might offer this functionality out of the box?”

Can you do anything to help or do I need to go to a new theme??

[minal]

Hello @Larissa:

Thank you for your query.

The feature you’re looking for, displaying a featured image for product categories as a header is not commonly included in most themes, as WooCommerce pages are typically designed to focus on products rather than header images.

However, there’s no need to switch your theme. All of our themes are fully compatible with WooCommerce.

You can achieve this functionality by adding a custom snippet to your child theme’s functions.php file. Try using the following code:

add_action('wp_head', function () {
	if (is_product_category()) {
		$term = get_queried_object();
		$thumbnail_id = get_term_meta($term->term_id, 'thumbnail_id', true);
		$image = wp_get_attachment_url($thumbnail_id);

		if ($image) {
	?>
			<style>
				.custom-header:before {
					background-image: url('<?php echo esc_url($image);?>');
					background-position: center top;
					background-repeat: no-repeat;
					background-size: cover;
				}
</style>

			
<?php
		}
	}
}, 30);

Sincerely,

Minal

[Larissa Eremeeva-Tupitsyna]

Hi Minal,

Thanks for this – it works perfectly!

Best wishes.

[Larissa Eremeeva-Tupitsyna]

Hi Minal,

Thanks for this – it works perfectly!

Best wishes.

[minal]

Hello @Larissa:

Glad to know that. Feel free to ask if you have any theme-related queries.

Sincerely,

Minal

[Author]

Posts