1

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?

0

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.

  • Is there no way to get the featured image set for that base page? – Jarmerson Jun 15 '17 at 19:05
  • You'd need to add a theme option somewhere - for example, in the Customizer. You won't be able to view the Shop page as a "page" because it's not actually a single post type. It's the same with categories. – WebElaine Jun 15 '17 at 19:10
  • I think I understand this. However I do get a page ID when I'm on the base shop page. Is there no way to say, "Hey! look at the page ID and get THAT thumbnail..." – Jarmerson Jun 15 '17 at 19:14
  • 1
    Check out my answer - I found wc_get_page_id( 'shop' ) and it works! It returns the ID of the "fake" page. – Jarmerson Jun 15 '17 at 20:59
  • 1
    I think this is the case with any archive post type. I was able to track it down using the Query Monitor plugin - noticed a query with the ID being requested so I KNEW WP was making it available. The plugin showed the files asking request to the query, tracked it down in the core files and it worked :) – Jarmerson Jun 16 '17 at 23:22
0

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]; 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.