Woocommerce: Featured image different than product image

Question

Is there a way to add a featured image for the product to show in the product listings, but display another image as the product image? (just an image, not gallery of images)?

When clicking the product in the listing (with a featured image) the product displays just an image, with the description and stuff, but a different image, not the featured.

Solution

You can set the first image from Product Gallery as Product image and featured image that you set will be displayed on Product listing page.

Now to set your first image from Product Gallery as Product image, you need to override woocommerce template file - product-image.php.

To override, copy the file from woocommerce plugin folder to your theme/woocommerce/single-product/product-image.php

Replace the <div> part with the following code -

<div class="images">

<?php

    $attachment_ids = $product->get_gallery_attachment_ids();
    isset ($placeholder_width)? : $placeholder_width=0;
    isset ($placeholder_height)? : $placeholder_height=0;

    if ( $attachment_ids ) {
        $attachment_id = $attachment_ids[0];

    if ( ! $placeholder_width )
        $placeholder_width = $woocommerce->get_image_size( 'shop_catalog_image_width' );
    if ( ! $placeholder_height )
        $placeholder_height = $woocommerce->get_image_size( 'shop_catalog_image_height' );

        $output = '<div class="imagewrapper">';

        //$classes = array( 'imagewrapper' );
        $classes = array();
        $image_link = wp_get_attachment_url( $attachment_id );

        if ( $image_link ) {

        $image       = wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_thumbnail_size', 'shop_thumbnail' ) );
        $image_class = esc_attr( implode( ' ', $classes ) );
        $image_title = esc_attr( get_the_title( $attachment_id ) );

        echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s"  rel="prettyPhoto[product-gallery]">%s</a>', $image_link, $image_title, $image ), $post->ID );

        } else {

            echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="Placeholder" />', woocommerce_placeholder_img_src() ), $post->ID );

        }

    }
?>

<?php do_action( 'woocommerce_product_thumbnails' ); ?>

Also override product-thumbnails.php file and add following code just before foreach loop.

unset($attachment_ids);

By adding this line, the first image will not be displayed in product gallery, only be displayed as Product image.

Comments

[Stuart]

Any way you can update your sample code for the new version of woocommerce?