Hestia vs Woocommerce: Theme distorts images

FOLLOW UP

Just for giggles I removed all custom CSS in the Hestia Child theme’s CSS file. This way the theme would use the parent theme’s CSS.

Result: nothing changed

Everything looked exactly like the screenshots above show: portrait and progressively larger images. Thus, I think it’s something with the theme itself, not my custom CSS.

Thoughts?

I did some looking into the CSS via Chrome Dev Tools and saw that I can change some of the rules on Woocommerce classes (wc- or .woocommerce). However, everything I try seems to make things worse overall. Also, I’m still not sure if it’s not the theme considering my initial tests.

Because I’m now unsure if the problem is the theme or WC, I’m posting a cross-referential link in WC’s forum to see if they have any thoughts. Maybe between the two someone will have a solution recommendation. I’m really baffled by this.

• This reply was modified 6 years, 8 months ago by jrothra.

MAJOR UPDATES

I deactivated all plugins except Woocommerce and reactivated them one at a time until I found something. None of them made any impact except W3 Total Cache (but it’s not the only problem-maker).

To see what’s going on I ran tests using my preferred theme, Hestia, and the Twenty Seventeen theme. I tested both themes with W3TC on and off.

What I Discovered
I learned that W3TC is increasing the total size of the images on the storefront and in category pages (though something is making the 2nd, 3rd, etc. images larger). W3TC is also making ever subsequent image progressively larger in one theme. However, Hestia is forcing the images to the portrait, not square (the images I created are 1080 x 1080). See below:

Hestia Theme: Storefront
W3TC On – https://goo.gl/Y24wGg
W3TC Off – https://goo.gl/hd98J5

Hestia Theme: Category (products)
W3TC On – https://goo.gl/AJ6N6q
W3TC Off – https://goo.gl/WDBacJ

2017 Theme: Storefront
W3TC On – https://goo.gl/mFpQ5Z
W3TC Off – https://goo.gl/rknb4v

2017 Theme: Category (products)
W3TC On – https://goo.gl/sAjS6r
W3TC Off – https://goo.gl/tFJAL2

This now leads me to four questions I want to resolve:

1. How do I keep W3TC from increasing the image size?
2. How do I keep Hestia from forcing portrait images?
3. How do I keep the product images (on the category page) all the same size (they varied regardless of theme and W3TC)?
4. How do I have the store display the images in their default ratio?

• This reply was modified 6 years, 8 months ago by jrothra. Reason: clarification

Hi @jrothra,

Thank you for contacting us and for such a detail report.
We are currently working on making Hestia compatible with WooCommerce 3.3 and their new options for image sizes.

We’ll also try to investigate the problem you mentioned with W3TC and see what the problem may be.

Regards,
Rodica

@rodicaelena —

That’s great news! Thank you for the update.

• This reply was modified 6 years, 8 months ago by jrothra.

I downloaded the latest Hestia theme (1.1.70). I’m not sure if it’s the one that includes WooCommerce compatibility fixes, but if it is, then this applies. If not, then this reply won’t apply.

Note: I have W3TC disabled during this test because it’s still causing problems.

I opened the store and noticed it still displayed the images in a portrait style. So I looked in Customizer to check the WooCommerce image settings and noticed it was set to “Custom.” I tested how the images are displayed using the “Uncropped” setting (which should use the image’s default w:h ratio) and using the 1:1 setting. Here are the results:

Uncropped: https://goo.gl/RstzT1
1:1 Ratio: https://goo.gl/HEbpEs

Notice that the images are square when using 1:1. However, when using “uncropped,” Hestia forces them into the portrait version, which is contrary to how the “uncropped” setting should work. Also worth noting is that those three images are themselves already squares. Thus, Hestia is increasing their size and them cropping them when the image settings are set to “uncropped.” Yet, Hestia is not cropping them when set to to the supposed forced 1:1 crop.

Actual Images:
– https://www.johnrothra.com/wp-content/uploads/2018/03/Getting-Christian-Life-Right-Series.jpg
– https://www.johnrothra.com/wp-content/uploads/2018/03/Romans-Series.jpg
– https://www.johnrothra.com/wp-content/uploads/2018/03/Easter-2013-Series.jpg

Again, if Hestia 1.1.70 isn’t supposed to fix the WC compatibility issues found in 1.1.66, then I’ll have to retest when the updated version is released. If it is supposed to fix the problem, then, well, it doesn’t appear it did.

• This reply was modified 6 years, 8 months ago by jrothra. Reason: Clarification
• This reply was modified 6 years, 8 months ago by jrothra.

In the end the problem was W3TC. Disabling Minify fixed the problem.