How to display WooCommerce category image in my category page banner as a background?

Question

I am creating one WordPress website from scratch, where my client needs WooCommerce category image as a background for all respective categories pages, usually I call page banner like this, but this is not working for WooCommerce pages as well as categories.

url('<?php echo wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) ); ?>

<section>
    <div class="container" style="background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(255, 0, 0, 0.45) ), url('<?php echo wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) ); ?>'); background-repeat:no-repeat; background-size:cover; background-position: center center;">
        <div class="row py-5">
            <div class="col-sm-12 py-5">
                <div class="py-5">
                    <h3 class="text-center text-light">
                        <?php the_title();?>
                    </h3>
                </div>  
            </div>
        </div>
    </div>
</section>

Answer 1

get_post_thumbnail return featured image for post. in order to get a thumbnail of the category, you need to fetch it through term meta.

global $wp_query;
$cat = $wp_query->get_queried_object();
$thumbnail_id = get_term_meta( $cat->term_id, 'thumbnail_id', true ); 
$image = wp_get_attachment_url( $thumbnail_id ); 

on the product page, since there can be multiple terms for a single product, you need to fetch terms for that product first and then extract a thumbnail image of a specific term.