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.

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

  /**
   * @snippet Add Custom Stylesheets & Scripts - WordPress
   * @author Serafin Tech
   * @compatible WordPress 6+
   * @website https://serafintech.io
   */
     //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 '';
		}
	}
}

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.

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

View On Github

Snippet (still) work?

Let me know in the comments if everything went as expected. I’d be happy to help revise the snippet if you report otherwise (please provide screenshots using Loom). I have tested this code with my ShopKeeper theme, the WooCommerce version listed above and a Siteground Web Hosting.

Thank you in advance!