Set Product Hero Image in Essence Pro

Use product image instead of Shop page featured image for header hero image in Essence Pro theme.

Recently a member of the closed Genesis WordPress Facebook group asked about having a unique header hero image for each product in the Essence Pro theme. It uses the post or page’s featured image, except for WooCommerce pages, where it uses the featured image of Shop page.

I downloaded and installed Essence Pro locally. It has a clever bit of code to set the header image. If you are viewing a product, product category or tag archive it retrieves the featured image from the WooCommerce Shop page.

Filter the Image

Initially I examined the ‘get_header_image()‘ function as it was the last function called before the CSS for the image is generated. I used error_log() to view the data going through a filter in that function. I didn’t get anywhere with this because it was the wrong function!

I went back and read the code in Essence Pro and saw where it was using ‘genesis_get_image()‘ to retrieve the image for WooCommerce pages. This function returns the featured image, if set, otherwise it can return the first image attached to a post (or page).

Short Circuit for Speed

Some Genesis functions have a short-circuit filter where an attached function can return a non-false value and the original function will return and skip the rest of its code. This obviously makes things quicker.

There is a ‘genesis_get_image‘ filter at the end of the ‘genesis_get_image()‘ function. I initially used it before trying the short-circuit filter, ‘genesis_pre_get_image.’

In ‘genesis_get_image()‘ determining the featured image, or attached images, involves a number of database queries so skipping these can only be a good thing.

The Code

The Result

Enhancement Ideas

The CSS for the header image sets the ‘background-size‘ to ‘cover‘ so stretches the image which, depending on the product image, may not look good.
Changing from ‘cover‘ to ‘contain‘ or ‘auto‘ will allow the entire image to be seen but will involve repeating the image. Disabling repeating doesn’t look good as you will see a plain black background either side of the single image.

Another enhancement idea is to use a different image for the header image. I would add a new upload button to the Edit Product page (likely with CMB2), with a note about suggested image dimensions. That’s a demo for another day. UPDATE: I developed that enhancement: Use CMB2 to set product hero image in Essence Pro.