Archived topic
Single product page > Use thumbnail for main product image?
3 replies · Started by Sammy on August 27, 2020
On my single product page, my 2000x2000px uploaded product image is being used. Size'wise a huge load on the page, looks like this:
<div class="woo-gallery-stack hide-on-mobile">
<img src="product.png" alt="" title="product">
</div>Is it possible to use the WP generated IMG thumbnails as main product image? Just like how it does on the frontpage (listing newest products etc.):
<img
width="400"
height="400"
src="product-400x400.png"
class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail"
alt=""
loading="lazy"
srcset="
product-400x400.png 400w,
product-300x300.png 300w,
product-1024x1024.png 1024w,
product-150x150.png 150w,
product-768x768.png 768w,
product-1536x1536.png 1536w,
product-600x600.png 600w,
product-100x100.png 100w,
product.png 2000w
"
sizes="(max-width: 400px) 100vw, 400px"
/>Tried to see if I could unhook the image and possibly re-add it, but something like:
remove_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );
Has no effect.
Hi there,
the Niche site adds a hook element named Gallery Stack, found in Appearance > Elements.
It uses PHP to output the stack. Currently the best i can do is help change the size of the image it loads - look for these two lines:
$attachment = wp_get_attachment_image_src( $attachment_ids[0], 'full' );
$image_url = wp_get_attachment_url( $product_image_id, 'full' );and change full to the attachment size you want to use.
Cheers!
It works. For reference it seems possible to use the following:
- 'thumbnail', 'small', 'medium', 'large', 'full'
Noone of those hit the sweatspot width'wise for my layout. (medium was too small and large too big)
But seems it also accepts specific integer which relates to whatever thumbnail size is generated within WP.
I noticed a 600x600px thumbnail was generated, so I could do:
$attachment = wp_get_attachment_image_src( $attachment_ids[0], array( 600, 600 ) );
$image_url = wp_get_attachment_url( $product_image_id, array( 600, 600 ) );Thats correct, woo creates the 600x600 image ( based on what you set in Customizer > Woocommerce > Product Images ).
You can also register your own sizes if needed:
https://docs.generatepress.com/article/adding-image-sizes/
Glad to be of help
