Web/ Design/ Vista

Resources for Designers & Developer

How to Show Different Product Image in Woocommerce Shop/Category and Single Product Pages

By default woocommerce shows the same product image on both shop/category pages and single product page. In many cases this is not ideal, as the product image is cropped in shop/category pages to fit into a display box.

This problem arises as often the uploaded image is not a good fit for the shop/category pages. It is either too big or too small, height is too much or breadth is out of whack! you get the gist!

I have gone through many woocommerce sites. The best results are obtained when the image is squarish in shape with an ideal width of 800px and above.

Still, how about having a separate image specially for the shop/category page? You can use a separate customized image that fits nicely to the display blocks on the shop/category page. Let me show you how!

For this solution to work you will need to have images in the product gallery. The first image on the product gallery will be used for the shop/category pages – so that image must fit the product box dimensions in shop/category pages.

Next, you will need the hook “woocommerce_init” to replace the default product thumbnail and set up the first gallery image as product image.

add_action( 'woocommerce_init', 'vista_replace_loop_product_thumbnail' )


vista_replace_loop_product_thumbnail is a custom function where we will write code to remove the default product thumbnail on shop/category pages and also insert new product image from product image gallery.

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

Here woocommerce_template_loop_product_thumbnail is the function hooked onto woocommerce_before_shop_loop_item_title action hook to generate product thumbnail on shop/category pages. Using remove_action we are removing the output of this function (product thumbnail). If you view the shop/category pages now, you will find blanks in place of product thumbnails.

Next, we will use the same action hook to generate the replacement.

add_action( 'woocommerce_before_shop_loop_item_title', 'vista_replace_product_thumbnail', 10 );

Here vista_replace_product_thumbnail is another custom function that will be used to pick up the replacement from product image gallery and insert in place of the product thumbnail (which is removed by now).

function vista_replace_product_thumbnail() {
        global $product;
        $attachment_id = $product->get_gallery_attachment_ids()[0];
        echo "<img src='" . wp_get_attachment_url( $attachment_id ) . "'>";
}

The declaration global $product gets us the current product on which the action hook is running.

$product->get_gallery_attachment_ids()[0] gets us the first image id in product image gallery.

Then we are outputting the image by assigning the image path to wp_get_attachment_url( $attachment_id ) which gets us the first image of the product gallery.

Thats it. The full code for this is given below.

add_action( 'woocommerce_init', 'vista_replace_loop_product_thumbnail' );

function vista_replace_loop_product_thumbnail() {
    
    remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

    function vista_replace_product_thumbnail() {
        global $product;
        $attachment_id = $product->get_gallery_attachment_ids()[0];
        echo "<img src='" . wp_get_attachment_url( $attachment_id ) . "'>";
    }
    
    add_action( 'woocommerce_before_shop_loop_item_title', 'vista_replace_product_thumbnail', 10 );
}

By the way – all this code goes to functions.php file of your theme (it can be placed in a plugin also – that is a topic for another article).

Comments, feedbacks are welcome.