[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 3 replies, 2 voices, and was last updated 1 year ago by David.
Viewing 4 posts - 1 through 4 (of 4 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
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.