In Interior Pro bg-front-page.jpg, bg-page.jpg and bg-post.jpg appear as background images for hero section below header on front page, single posts / archives and static Pages respectively and these can be changed via Customizer.
In this tutorial we shall customize this
if ( front page ) {
front page image
} else if ( single post or archive ) {
post image
} else {
page image
}
logic to
if ( front page ) {
front page image
} else if ( ( single post and not WooCommerce product ) or ( archive and not WooCommerce product category archive ) ) {
post image
} else if ( WooCommerce product ) {
image of product category to which this product is assigned to
} else if ( WooCommerce product archive ) {
this product category's image
} else {
page image
}
to display category image on the WooCommerce product taxonomy archives and on single product pages as hero images below header. Additionally we shall add the product title inside the header image on product entry pages.
Note: Since it is possible to assign a product to multiple product categories, this solution works best in the set ups where each product belongs to a single category.
Sample screenshots:
A taxonomy archive (example.com/product-category/posters):
A single product page (example.com/product/ship-your-idea):
Step 1
At Products > Categories edit the categories and upload/select the images.
Step 2
Add the following in Interior Pro's functions.php:
