WooCommerce Base Page Featured Image Custom Theme

Question

WooCommerce Base Page Featured Image Custom Theme

Jarod Thornton

2022年4月26日 06:00

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?

Topic woocommerce-offtopic post-thumbnails Wordpress

Category Web

Jarod Thornton · Accepted Answer · 2017年6月15日 20:58

Since the base page for shop is a post type archive, you can grab the thumbnail for that post type archive conditionally and customize additional pages accordingly.

In this example the WooCommerce type is product

if (is_post_type_archive(product)){$base_thumb = wc_get_page_id( 'shop' );} 
$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $base_thumb ), "size" ); 
echo $thumbnail[0];

WebElaine · Accepted Answer · 2017年6月15日 19:00

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.

WooCommerce Base Page Featured Image Custom Theme

About