[Resolved] Use WooCommerce Product Category Thumbnail as Background Image in Header Element

[Damiane]

I’m trying to use the product category thumbnail from WooCommerce as a Header Element background image.

I assumed I could use “Featured image” as the Background Image setting but that doesn’t work.

Any ideas?

[David]

Hi there,

unfortunately the Product Categories don’t set the featured image. You could use a Hook to create your own Product Hero – which would be something like this:

1. Create a new Hook Element, Select the after_header hook and check Execute PHP then add this for your content, which will add the background image, add the title and the description:

<?php
if ( is_product_category() ){
    global $wp_query;

    // get the query object
    $cat = $wp_query->get_queried_object();

    // get the thumbnail id using the queried category term_id
    $thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true ); 

    // get the image URL
    $image = wp_get_attachment_url( $thumbnail_id ); 
	
	// if image is present display hero
	if ( $image ) {
        ?>
        <div class="product_cat_hero" style="background-image: url('<?php echo $image ?>')">
            <div class="inside_product_cat_hero grid-container">
                <h1><?php single_term_title() ?></h1>
                <p><?php echo category_description(); ?></p>
            </div>
        </div>
    <?php
    }
}
?>

Then set you Display Rules to Product Category Archive.

2. Now some CSS to style it:

.product_cat_hero {
    padding-top: 100px;
    padding-bottom: 100px;
    background-size: cover;
    background-repeat: none;
    color: #fff;
}

[Damiane]

Thanks David,

I was hoping to have it set up in Elements to keep things easy for my client to see and understand – but I will use the Hook option!

[David]

You’re welcome

[Roberto Enrique]

Oh David! Thank you very much!

It’s been a while since I’ve been trying to add a second category image for doing something like this (a product_cat hero with a custom image).

I was trying to add a second image field to my product categories “manually” but that just turned out too difficult so I had to install ACF ( Absurdly easy with that…)

My code in that situation:

<?php
if ( is_product_category() ){
  global $wp_query;
  // get the query object
  $cat = $wp_query->get_queried_object();
  // get the image URL
  $acf_image = get_field('product_category_hero_image', $cat); 
	// if image is present display hero
	if ($acf_image) {
        ?>
        <div class="product_cat_hero" style="background-image: url('<?php echo $acf_image ?>')">
            <div class="inside_product_cat_hero grid-container">
                <h1><?php single_term_title() ?></h1>
            </div>
        </div>
    <?php
    }
}
?>

[David]

Thats great Roberto – glad to be of help.
A few things have changed since then – like i became aware of this filter generate_page_hero_background_image_url

Example of it being used here to pass a custom field URL to the hero background.

https://generatepress.com/forums/topic/using-a-shortcode-for-image-reference-in-an-element/#post-1665786

Might be of interest to you 🙂

[Roberto Enrique]

Mmm, that’s actually a better idea, thanks.

Now I’m going the “global header” way with this:

add_filter( 'generate_page_hero_background_image_url', 'artomultiplo_change_bg_url' );

function artomultiplo_change_bg_url( $url ) {
    global $wp_query;
    $cat = $wp_query->get_queried_object();

    $acf_image = get_field('product_category_hero_image', $cat);

    if ( $acf_image ) {
        $url = $acf_image;
    }
    
    return $url;
}

Thanks!

[David]

Awesome – glad to be of help!

[Author]

Posts