The WooCommerce Shop page is a post type archive. It’s not outside of WP, it’s just managed within either the plugin or the theme, rather than as a “Page” or other post type. Similar to how Post Categories are handled.
Since the Shop page is an archive, its loop/query identifies Products. That’s why it’s getting the last product image. You should be able to adjust your code to something like:
... (up to line 16 of your existing code) ...
echo '<img class="background-image" src="';
// if this is the Shop page - function specific to WooCommerce
if(is_shop()) {
echo get_template_directory_uri().'/images/shop-page-image.jpg';
// all other content
} else {
if ( has_post_thumbnail() ) {
the_post_thumbnail_url('header-bg');
} else {
echo get_template_directory_uri().'/images/default.jpg';
}
}
$image_title = get_post(get_post_thumbnail_id())->post_title;
echo '" alt="' . $image_title . '" title="' . $image_title . '" />';
Just change “shop-page-image.jpg” to the filename you want to display on the Shop page.