[Support request] Product image size

Home Forums Support [Support request] Product image size

Home Forums Support Product image size

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #712543
    Angelo

    I am having problems with images being very high. I looked at past support and tried the following first:

    -disabled jetpack
    -regenerated thumbnails
    -set image max image size
    – I am not using a child them

    If I go to
    appearance – customize – woocommerce – product images

    the site (showing on the right) will now display the images correctly. But if viewed in live mode, the images are too tall and not cropped. This is for both the category page and product page

    Sample category page:
    https://www.sunward1.com/product-category/rocketry/plastic-nose-cones/

    GP Premium 1.7.2
    #712555
    Leo
    Staff
    Customer Support

    Hi there,

    It’s usually a caching issue when something works in customizer preview but not on live site.

    Any caching plugins or server cache?

    Also the panel you are referring to (customize – woocommerce) is actually from WooCommerce itself and not GP.

    GP’s WooCommerce panel is under customize – layout – woocommerce.

    #712560
    Angelo

    There is no caching plugins or server cache. I did a hard refresh on the page.

    For
    customize – layout – woocommerce

    there is no area to configure the size of the images.

    #712568
    Leo
    Staff
    Customer Support

    That case I’m not sure why it’s not working.

    I would try disabling all plugins first to eliminate any conflicts. If that doesn’t help then you will need to check with WooCommerce’ support as it’s their feature.

    I can only tell you that I’m not seeing any code to resize the image:
    https://www.screencast.com/t/A24Pe6PThy

    And yup I know there is no option to resize WooCommerce image using GP (no point adding something WooCommerce already did). Just letting you know that the resize feature is from WooCommerce so you might need to check with them.

    Hope this helps!

    #712574
    Angelo

    I will check with woocommerce

    #712582
    Leo
    Staff
    Customer Support
    #776824
    Angelo

    I checked with woocommerce and they blame the theme.

    I tried the following code:
    .single-product .images img {
    max-height: 600px;
    }

    as additional CSS. This caused the image to have a max height of 600, but it did not adjust the width, so tall images are skewed.

    #777387
    Tom
    Lead Developer
    Lead Developer

    Hmm, not sure why they would say that. It’s happening because the WooCommerce resizer isn’t initiating.

    However, we can cause the cropping to happen with some CSS.

    Try this:

    .woocommerce ul.products li.product a img {
        height: 300px;
        width: 300px;
        object-fit: cover;
        object-position: top;
    }
    #777425
    Angelo

    no effect.

    I did refresh the page.

    #777507
    Tom
    Lead Developer
    Lead Developer

    How’d you add the code? I’m not seeing it on the page.

    #777524
    Angelo

    ok, I added it.
    appearance – customize – additional CSS

    I entered 600 px and it changed the thumbnail at:
    https://www.sunward1.com/product-category/rocketry/nylon-ripstop-streamer/

    The thumbnail was not the problem. I want to change the size of the product image on the product page itself
    https://www.sunward1.com/product/nylon-ripstop-streamer/

    I have changed it back to 300 for the values.

    #777832
    Tom
    Lead Developer
    Lead Developer

    In that case, something like this might work:

    .woocommerce div.product div.images img {
        height: 500px;
        object-fit: cover;
        object-position: top;
    }
    #777840
    Angelo

    I tried the above solution and it worked on the main image. However, secondary images were also very high.

    I then added the “a” to the line and it fixed that problem. Some of the thumbnails were too high so I also added the first code.

    There is still a problem on very high or very small images ( bottom gets cropped and it doesn’t scroll properly) but looks much better.

    final code I added at:
    appearance – customize – additional CSS

    is:

    .woocommerce div.product div.images a img {
    height: 600px;
    object-fit: cover;
    object-position: top;
    }
    .woocommerce ul.products li.product a img {
    height: 300px;
    width: 300px;
    object-fit: cover;
    object-position: top;
    }

    #778462
    Tom
    Lead Developer
    Lead Developer

    I believe that’s the best solution unless WooCommerce or your hosting support is able to figure out why their image resizing isn’t working. It’s usually a server related issue that would prevent it from firing.

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