Snippet: Display WooCommerce Category Thumbnail as Page Header Background

  • Updated:

WooCommerce thumbnails are used by default for the category grid/listing. Because of this it’s not used as the title backgrounds by default, however, it can be enabled via a child theme function.

add_filter( 'totaltheme/page/header/style', function( $style ) {
	if ( function_exists( 'is_product_category' ) && is_product_category() ) {
		global $wp_query;
		$cat = $wp_query->get_queried_object();
		if ( $thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true ) ) {
			$style = 'background-image';
		}
	}
	return $style;
} );

add_filter( 'wpex_page_header_background_image', function( $image ) {
	if ( function_exists( 'is_product_category' ) && is_product_category() ) {
		global $wp_query;
		$cat = $wp_query->get_queried_object();
		if ( $thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true ) ) {
			$image = $thumbnail_id; 
		}
	}
	return $image;
} );
All PHP snippets should be added via child theme's functions.php file or via a plugin.
We recommend Code Snippets (100% Free) or WPCode (sponsored)
Back To Top