[Support request] Product image size

[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

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[Leo]

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!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Angelo]

I will check with woocommerce

[Leo]

Sounds good 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[Tom]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Angelo]

no effect.

I did refresh the page.

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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.

[Tom]

In that case, something like this might work:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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;
}

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts