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 » '); ?>
</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.