How To Add A Header Image WooCommerce Archive

In this tutorial I’ll show you how to add a script to your functions file so that the native category thumb will show as a header image in your theme. With a little CSS and some tweaking you can have a stunning woocommerce header image above your products.

WooCommerce Category Header Without Image

WooCommerce Category Header With Image


I don’t recommend adding this to your parent theme. Custom snippets should always be added to your child theme.


//add this somewhere in your functions.php file
add_action( 'woocommerce_archive_description', 'woocommerce_category_image', 2 );
function woocommerce_category_image() {
    if ( is_product_category() ){
	    global $wp_query;
	    $cat = $wp_query->get_queried_object();
	    $thumbnail_id = get_term_meta( $cat->term_id, 'thumbnail_id', true );
	    $image = wp_get_attachment_url( $thumbnail_id );
	    if ( $image ) {
		    echo '<img src="' . $image . '" alt="' . $cat->name . '" />';

I used the TwentyNineteen theme for this example. You can use pretty much use any theme you want, but in some cases it may not load due to unforeseen coding differences. A lot of themes may already come with this built in. So you’re going to want to check with the author of your theme before attempting to do this. Remember, this script works off the native category upload area seen below. If you’re displaying different category dimensions this won’t work. This works only for a header image and exact dimensions. Not for thumbs with various dimensions and what have you.

The screenshot below shows the upload area for your header category. Simply upload the photo and watch the magic happen.

WooCommerce Category Header Image Button

If you have any questions write them below and as always thanks for visiting my site.

View On Github

Leave a Reply