[Support request] Single product page > Use thumbnail for main product image?

Home Forums Support Single product page > Use thumbnail for main product image?

  • This topic has 3 replies, 2 voices, and was last updated 1 month ago by David.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1420373
    Sammy

    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.

    #1420439
    David
    Staff
    Customer Support

    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.

    #1420632
    Sammy

    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 ) );
    #1420651
    David
    Staff
    Customer Support

    Thats correct, woo creates the 600×600 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

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.