Change Woocommerce Lightbox Links to Another Image Size Link Instead of Full Size

I’ve found it important to have Woocommerce product page main image and more images gallery to link to a “large” image size instead of a full size. This images are opening in prettyPhoto lightbox.

I often advice to clients to add some watermark to lightbox images in full size. But if we add a watermark to the full size image and then regenerate all image sizes, watermark will be inserted to all image thumbnails. This way we can preserve the original full size image, so if we change a watermark or will need to remove it, we’ll have a backup.

Assuming you have a child theme of woocommerce, copy following 2 pages to your child theme’s themes/your-theme-name/woocommerce/single-product folder from plugins/woocommerce/templates/single-product:

1. product-image.php
2. product-thumbnails.php

We’ll make some tweaks first in product-image.php, which is used for large image on product’s page. Instead of

$image_link = wp_get_attachment_url( get_post_thumbnail_id() );

Put:

$image_link = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large');

And at the bottom of the page change $image_link to $image_link[0]

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

Now big image on product page should link to a large image size, which is present by default in WordPress. If your images are smaller than the large size set, you’ll still have a link to full size, take care and check on a really large image. Beware of cache 🙂

Ok, now we need to change a lightbox link for bottom thumbnails gallery images. In product-thumbnails.php change following lines:

$image_link = wp_get_attachment_url( $attachment_id );

to:

$image_link = wp_get_attachment_image_src( $attachment_id, 'large' );

And at the bottom of the page just add [0] to $image_link like that:

echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', 
sprintf( '<a href="%s" class="%s" title="%s" rel="prettyPhoto[product-gallery]">%s</a>', 
$image_link[0], $image_class, $image_title, $image ), 
$attachment_id, $post->ID, $image_class );

Now also small thumbnails link to large size instead of full. And we’ll be free to assign i.e. a watermark to large size instead of full, original image will be safe for all future changes.