Woocommerce Product Category Image

How to add a Woocommerce category page header

Woocommerce Product Category ImageAdding a header image or banner to a Woocommerce category page is not terribly difficult but finding out how to do it can be so I’ve written this quick guide as a future reference and to make your life easier if you need to do this too.

The first thing that you will want to do is to add a banner image to your product categories. It’d be handy if you could do this with Woocommerce out of the box but at this point in time you can only add a thumbnail. Using thumbnail images is a possible solution but changing the sizes to accomodate large banner images is arguably more trouble than it’s worth.

Fortunately there is a handy plugin by Eduardo Stuart for adding images to WordPress categories. Once the images are added to the product categories we will write a simple hook callback function that utilises the plugin’s shortcode to display our banner images.

You can install the WPCustom Category Image plugin from within WordPress and then you will see that when adding or editing your product categories you can now add your category images. You can follow the plugin instructions for further details but you shouldn’t have any trouble with this step.

Now we need to create our hook callback function to display the image using woocommerce_before_main_content. Add the following function (including the add_action line) to your child themes functions.php file.

// define the woocommerce_before_main_content callback
function add_category_banner_images() {
if ( is_archive() ) {
echo do_shortcode('[wp_custom_image_category size="full"]');
}
};
// add the action
add_action( 'woocommerce_before_main_content', 'add_category_banner_images', 10, 2 );

The function first tests that we’re on an archive page type, although to be honest that isn’t necessary because the shortcode doesn’t work on product pages. I’ve left it in as an unnecessary fall back. Inside that conditional statement we simply call the shortcode for the category image and set the size parameter to “full”. There are other parameters that can be added to the shortcode like an alt tag but we’ve relied on the one already set for the image within WordPress.

Our image now appears in the category page across the full width of the page container. If you want to match the image width to the page content then you simply attach the function to the woocommerce_before_shop_loop instead like so:

// define the woocommerce_before_shop_loop callback
function add_category_banner_images() {
if ( is_archive() ) {
echo do_shortcode('[wp_custom_image_category size="full"]');
}
};
// add the action
add_action( 'woocommerce_before_shop_loop', 'add_category_banner_images', 10, 2 );

You can learn more about Woocommerce hooks by consulting the hook reference.