How to display the product image in the header of the single product page in Hestia

In the latest Hestia release, we decided to remove the product image from the header area on WooCommerce's single product pages, as it was already displayed on that page, and using an image that looks best both in a square and a much larger rectangle formats can be pretty difficult. 

At this moment, for the header image on that page, you have the possibility to use the product's category featured image, the Header Background option from Appearance > Customize or the Header Gradient color option from Appearance > Customize, in this order.

Though, if you still want to have the product's featured image in the header, follow this doc:

1. Create a child theme using this document.

2. In the child theme's functions.php file add this code:

function child_filter_header_image( $default_thumbnail ) {
    if ( function_exists('is_product') && is_product() ) {
        $thumb = get_the_post_thumbnail_url();
        if ( ! empty( $thumb ) ) {
            return $thumb;
        }
    }

    return $default_thumbnail;
}

add_filter( 'hestia_header_image_filter', 'child_filter_header_image' );

Note: This filter can be also used on other pages, using another conditional statement instead of the is_product() check.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us