Site icon Hip-Hop Website Design and Development

WooCommerce Base Page Featured Image Custom Theme

I have a very basic theme that is running WooCommerce beautifully so far. In my functions.php I’ve setup the following to support woocommerce.

//
// WooCommerce Hooks and Theme Overrides
//
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);

add_action('woocommerce_before_main_content', 'cm_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'cm_theme_wrapper_end', 10);

function cm_theme_wrapper_start() {
echo '
<div class="main-content-wrapper">
<section class="layout-standard">
<section class="cards">
    <div class="layout-gallery short">
        <div class="background"></div>
        <img class="background-image" src="'; if ( has_post_thumbnail() ) { the_post_thumbnail_url('header-bg'); } else { echo get_template_directory_uri().'/images/default.jpg'; } echo '" alt="'; $image_title = get_post(get_post_thumbnail_id())->post_title; echo $image_title; echo '" title="'; $image_title = get_post(get_post_thumbnail_id())->post_title; echo $image_title; echo '">
        <div class="width-container">
            <div class="inner-container">
                <h1 class="section-title">'; woocommerce_page_title();  echo '</h1>
            </div>
        </div>
    </div>
</section>
<div class="width-container">
    <div class="content-container">
        <div class="content-holder">';
}

function cm_theme_wrapper_end() {
echo '
        </div>
    </div>
</div>
<div class="sidebar-container">'; 
get_sidebar(); 
echo '
</div>
</section>
</div>';
}

This works great, however on the shop base page it is not showing the pages featured image. However it is showing the last product image. This is basically an archive page, but outside of WordPress I guess.

How can I get the featured image of the base shop page to show instead of the last product image?