Removing Featured image from Single Product Page in Woocommerce

Question

I have an installation of Wordpress with Woocommerce. Every product of the shop has a Featured Image that will show in the Shop Page and Single Product Page , and Gallery Images that will show only in Single Product Page (first as thumbs, after bigger in a Lightbox on click).

This is produced by the following code:

<div class="images">

    <?php
        if ( has_post_thumbnail() ) {

            $image_title    = esc_attr( get_the_title( get_post_thumbnail_id() ) );
            $image_caption  = get_post( get_post_thumbnail_id() )->post_excerpt;
            $image_link     = wp_get_attachment_url( get_post_thumbnail_id() );
            $image          = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array(
                'title' => $image_title,
                'alt'   => $image_title
                ) );

            $attachment_count = count( $product->get_gallery_attachment_ids() );

            if ( $attachment_count > 0 ) {
                $gallery = '[product-gallery]';
            } else {
                $gallery = '';
            }

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

        } else {

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

        }
    ?>

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

</div>

This, in a normal Single product page will produce the following:

<div class="images">

    <a href="br1-opression.jpg" 
       itemprop="image" 
       class="woocommerce-main-image zoom" 
       title="" 
       data-rel="prettyPhoto[product-gallery]">

            <img width="750" 
                 height="544" 
                 src="br1-opression.jpg" 
                 class="attachment-shop_single wp-post-image" 
                 alt="br1-opression" 
                 title="br1-opression">
    </a>

    <div class="thumbnails columns-3">

        <a href="br1-opression-1.jpg" 
           class="zoom first" 
           title="br1-opression-1" 
           data-rel="prettyPhoto[product-gallery]">

                <img width="180" 
                     height="180" 
                     src="br1-opression-1-180x180.jpg" 
                     class="attachment-shop_thumbnail" 
                     alt="br1-opression-1">
        </a>

        <a href="br1-opression-2.jpg" 
           class="zoom" 
           title="br1-opression-2" 
           data-rel="prettyPhoto[product-gallery]">

            <img width="180" 
                 height="120" 
                 src="br1-opression-2-180x120.jpg" 
                 class="attachment-shop_thumbnail" 
                 alt="br1-opression-2">
        </a>

    </div>

</div>

As you can see, it basically put together Featured Image (In big size) and Gallery Image in thumbs (smaller, under the Featured Image), in a single gallery.

What I'm trying to achieve is the following:

• Remove Featured Image from Single Product Page
• Take the first image from the Gallery, and put in big (same size as the Featured Image was)
• Leave the other thumbs under it

Long story short, I want to replace the Featured image with the First image from the gallery in the Single Product page.

So far, I've tried:

Hiding Featured Image using both CSS and new hook in Functions.php.

It does kill the featured image, but it will still show in the lightbox. And the thumbs will still be all small, so no big image in the Single Product page, which is not desirable.

Any thoughts or ideas?

Answer 1

you can try this:

$imgid = $product->get_gallery_attachment_ids();

get_gallery_attachment_ids() function gets all the gallery IDs in an array, so now you can get the first image of that array in this way:

<a href="<?php echo wp_get_attachment_url( $imgid[0] ); ?>" class="woocommerce-main-image zoom"><img src="<?php echo wp_get_attachment_url( $imgid[0] ); ?>" alt=""></a>