WooCommerce Product Page Loop – Output All Product Thumbnails

http://69.89.31.200/~horologi/shop/

I’m working on the site above and the client has requested that on the shop page, all the product information is displayed on that page, including all product thumbnails. I have copied the WooCommerce template files into my theme directory so I can modify them, and have been messing around with the loop-shop.php file. What I tried first was simply adding the following code into the product page loop:

<div class="images">

<?php if ( has_post_thumbnail() ) : ?>

    <a itemprop="image" href="https://wordpress.stackexchange.com/questions/65068/<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>" class="zoom" rel="thumbnails" title="<?php echo get_the_title( get_post_thumbnail_id() ); ?>"><?php echo get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ) ) ?></a>

<?php else : ?>

    <img src="<?php echo woocommerce_placeholder_img_src(); ?>" alt="Placeholder" />

<?php endif; ?>

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

I pulled that code from the product-image.php file. Unfortunately it outputs the thumbnails full-size. I wasn’t sure of the ‘best practice’ way of doing this. Any help is greatly appreciated. Thank you!

2 Answers
2

The second parameter on get_the_post_thumbnail takes the size of the image you want. You’re currently passing in:

apply_filters( 'single_product_large_thumbnail_size', 'shop_single' )

but change that to

apply_filters( 'single_product_small_thumbnail_size', 'shop_thumbnail' )

And you’ll have the smaller image size. You can also pass in “thumbnail” or any of the custom sizes you have in that spot without the apply_filter function.

Leave a Comment