Site icon Hip-Hop Website Design and Development

Advance custom field image field is not outputting result as expected [closed]

Hello I have this website shop page https://vitoslife.co.il/shop-2/ where the header image is actually set via ACF image field plugin for mobile and desktop. Here is my archive-product.php template which is overriden by my theme file

<?php
/**
 * The Template for displaying product archives, including the main shop page which is a post type archive
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerceTemplates
 * @version 3.4.0
 */

defined( 'ABSPATH' ) || exit;

get_header( 'shop' );

/**
 * Hook: woocommerce_before_main_content.
 *
 * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
 * @hooked woocommerce_breadcrumb - 20
 * @hooked WC_Structured_Data::generate_website_data() - 30
 */
do_action( 'woocommerce_before_main_content' );

?>
<?php 

if( is_product_category() && wp_is_mobile() ){
    $term         = get_queried_object();
    $thumbnail_id = get_field('category_cover_for_mobile', $term);
    //$thumbnail_id = get_term_meta( $term->term_id, 'thumbnail_id', true );
}
elseif(is_product_category()){
    $term         = get_queried_object();
    $thumbnail_id = get_field('category_cover_image', $term);
}
elseif(is_shop() && wp_is_mobile()){
    $thumbnail_id = get_field('head_image_mobile');
}
elseif(is_shop()){
    $thumbnail_id = get_field('desktop_head_image');
}
else{
    $shop = get_option( 'woocommerce_shop_page_id' );
    $thumbnail_id = get_post_thumbnail_id($shop);
}

$bg_image = wp_get_attachment_image_src( $thumbnail_id, 'full' );
?>
<header class="woocommerce-products-header" <?php if($bg_image){ echo 'style="background-image: url('.$bg_image[0].');"'; } ?>>
    <?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>
        <h1 class="woocommerce-products-header__title page-title"><?php woocommerce_page_title(); ?></h1>
        <div class="breadcrumbsyoast">
            <?php echo do_shortcode('Home » Advance custom field image field is not outputting result as expected [closed]'); ?>
        </div>
        
    <?php endif; ?>
</header>

Here is the screenshots explaining where it doesn’t output background image URL as intended.

Here are shop page and acf settings.