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.

Share:
This entry was posted in WordPress and tagged . Bookmark the permalink.

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

  1. Brad says:

    Very nice! Exactly what I was looking for…client was uploading HUGE images!

    Thanks again, this worked great!

  2. Thanks for this Iggy! I had been looking everywhere for this and finally found this post. Exactly what I needed!

  3. Jonas says:

    Thanks! Worked like a charm!

  4. bipin says:

    dear sir
    i m using woo commerce plugins. im sear product page ‘s url link.
    but product image not display. slider images display. how to solved it.

    i want to sear/post. Facebook,google specific product page image on right side

  5. Thanks for sharing this nice and helpfull post.

Leave a Reply

Your email address will not be published. Required fields are marked *