changing the size of woocommerce image.

  • Resolved bluestandish

    (@bluestandish)


    8 years, 10 months ago

    I have been trying to reduce the size of the image of product on the product page at least to just about the same size of image on the shop page. i tried to change the product image sizes at woocommerce settings page but it’s not reflecting on the product page. it’s still the same size of photo appearing on the product page even after regenerating thumbnails with another plugin. looking at the saved settings, the size is what i changed to at the woocommerce page but still no change is appearing on the product page. can you help me please?.

    https://www.ads-software.com/plugins/woocommerce/

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

  • WooCommerce image size settings + regenerate thumbnails sets the size of the image sent to the browser.

    The browser will enlarge or shrink the image to fit the space allowed by the styles set by the theme designer.

    To alter the image size on the product page, and bring the product text inwards a bit, try this in your custom css:

    .woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images
{width:26%}
.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary
{width:60%}

    For best quality images in this case, WooCommerce settings + regenerate thumbnails should be 280px square.

    Thread Starter bluestandish

    (@bluestandish)

    Thank you very mch lorro. You have been very helpful. I’m most grateful.

    Hi,
    It works fine but I’d like to change also the related product image size and catalog product image. How can i do this?

    @ciccione82
    This can usually be achieved with custom css. In what way do you want to change the sizes? Please could you post a link to your site so the markup can be examined with browser tools.

    Why do I keep getting emails from every single topic in the forum????? I’m not subscribed to ANY topics. How can stop this??? It’s very annoying….

    I solved for related product image size. Now I only have to solve for catalog product image size. I used this code in cuastom css:

    .woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images
{width:26%}
.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary
{width:60%}
.woocommerce #content div.product div.related,
.woocommerce div.product div.related,
.woocommerce-page #content div.product div.related,
.woocommerce-page div.product div.related
{width:70%}

    This is the catalog page: https://www.studiofazzari.it/categoria-prodotto/per-avvocati/

    I’d like to reduce catalog image.

    • This reply was modified 8 years, 2 months ago by ciccione82.

    Nobody can help me please? ??

    
.woocommerce ul.products li.product a img {
  width: 70%;
}

    It works!!!!!!!! thank you!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘changing the size of woocommerce image.’ is closed to new replies.