Increase Size of Gallery Images on Product Page

  • Resolved Bradley Allen

    (@bradley)


    9 years, 8 months ago

    I’m trying to change the size of the gallery images on the single product pages.

    I went to: WooCommerce // Settings // Products // Display.
    I changed: Product Thumbnails to 200 x 200.
    I used the regenerate thumbnails plugin on all images.

    The gallery images still display at 100 x 100.

    When I inspect the element, I see this code says 200 x 200, but that’s not how it displays.

    <img class="attachment-shop_thumbnail" width="200" height="200" alt="Apricots" src="https://staging1.copperpanjams.com/wp-content/uploads/2015/06/apricots-close-up-200x200.jpg" scale="0">

    What changes can I make so that the gallery images are 200 x 200 before they are enlarged in the lightbox?

    Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi,

    It looks like the images have been resized just fine. The layout of the images however is controlled by the CSS in the theme.

    To change the width, try some CSS like:

    .single-product div.product .images .thumbnails a.zoom {
width: 20%;
}

    You’ll need to adjust margins etc as well.

    Thread Starter Bradley Allen

    (@bradley)

    Hey James,

    Thanks so much for your help!

    Here’s what seems to work for me:

    .single-product div.product .images .thumbnails a.zoom {
	width: 100px !important;
}

    I like the way it looks:
    https://copperpanjams.com/shop/plum-jam/

    -bradley

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Increase Size of Gallery Images on Product Page’ is closed to new replies.