Product gallery image as thumbnail on Shop page

[erik_ragnar]

Is it possible to show the first image in product gallery on a product thumbnail on the shop page, instead of product featured image?

[thai]

Hi There,

Please consider that the theme code customization is outside of our support scope and we will not be able to implement such a functionality for you. but we will do our best to show you what is the standard way of doing the customization in X/Pro.

To get the first image of product gallery, please take a look at this:

How to get the first image gallery of a product in woocommerce in a loop

After that add this code to functions.php file to change the product featured image on shop page:

remove_action( 'woocommerce_before_shop_loop_item_title', 'x_woocommerce_shop_product_thumbnails', 10 );
add_action( 'woocommerce_before_shop_loop_item_title', 'x_woocommerce_shop_product_thumbnails_v2', 10 );

function x_woocommerce_shop_product_thumbnails_v2() {

  GLOBAL $product;

  $id     = get_the_ID();
  $thumb  = 'shop_catalog';
  $rating = ( function_exists( 'wc_get_rating_html' ) ) ? wc_get_rating_html( $product->get_average_rating() ) : $product->get_rating_html();

  woocommerce_show_product_sale_flash();

  echo '<div class="entry-featured">';
    echo '<a href="' . get_the_permalink() . '">';

      echo has_post_thumbnail() ? get_the_post_thumbnail( $id, $thumb ) : '<img src="' . x_woocommerce_shop_placeholder_thumbnail() . '" class="x-shop-placeholder-thumbnail">';

      if ( ! empty( $rating ) ) {
        echo '<div class="star-rating-container aggregate">' . $rating . '</div>';
      }

    echo '</a>';
  echo "</div>";

}

You need to replace this line with your code from the stackoverflow:

echo has_post_thumbnail() ? get_the_post_thumbnail( $id, $thumb ) : '<img src="' . x_woocommerce_shop_placeholder_thumbnail() . '" class="x-shop-placeholder-thumbnail">';

Hope it helps

[erik_ragnar]

Im trying to get the stuff done but i’m not quite dev savvy. Where should i replace with what?

[rad]

Hi @erik_ragnar,

Have you tried uploading some images to the product page? It’s not gonna work on images inserted to it, it should be uploaded on that specific page while you’re editing it. Inserting images will only add the image in the content while uploading it will attach it to it.

Else, I recommend contacting a Woocommerce developer as we’re not fully familiar with Woocomerce API code for that purpose.

Thanks!