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

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

Home Forums Support Use WooCommerce Product Category Thumbnail as Background Image in Header Element

  • This topic has 7 replies, 2 voices, and was last updated 4 months ago by David.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #997593
    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?

    #997773
    David
    Staff
    Customer Support

    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;
    }
    #998853
    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!

    #998887
    David
    Staff
    Customer Support
    #1720251
    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
        }
    }
    ?>
    
    #1720476
    David
    Staff
    Customer Support

    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 🙂

    #1720658
    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!

    #1721194
    David
    Staff
    Customer Support

    Awesome – glad to be of help!

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.