Related images size with WooCommerce

[Bart van Maanen]

Hi all,
I'm setting up an WooCommerce page with the Modern Portfolio theme and Genesis Connect plugin (and HTML5 activated). Besides a problem with line breaks in all WooCommerce pages and text fields I'm having troubles with the images of related products. In Firebug the settings are 150x150, but they show up on page much larger and thus blurred by this resolution.

I've tried Regenerate Thumbnails plugins with the same settings, but nothing happens.
Does anyone recognize the issue and can suggest a fix?
Thanks.

http://roydames.nl/winkel/

[David Chu]

Hi,
As always with Woo, the CSS is so thick that you couldn't cut it with a knife. This bit of code is making your product image extra wide. See "width: 100%;". You could try changing that setting to taste. If you make it smaller, you may have to make other CSS changes that will compensate for the area holding the image. If you're not comfortable making CSS changes, you'd best leave it alone, or hire someone for help.

.woocommerce div.product div.images img, .woocommerce #content div.product div.images img, .woocommerce-page div.product div.images img, .woocommerce-page #content div.product div.images img {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  display: block;
  height: auto;
  transition: all 0.2s ease-in-out 0s;
  width: 100%;
}

But there's something else, too. The product images are 300 x 300. If that's a good size, then you're OK. Otherwise, I assume that somewhere buried in Woo's settings is a place where you can change the product image size. And the product image will not be effected by the thumbnail setting at all, by the way - that's separate.

Good luck, Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Bart van Maanen]

Hi David,
Thanks for your reply. I've tried to scale all the images with the Regenerate Thumbnails plugin as suggested by another developer. To no effect yet. But you can change the image settings - not really buried - in Woo > Settings > Pages (with supposedly a Hard Crop).

The Woo css is rather thick as you mentioned. Is your css trick here meant to be added to the child theme's css?
Thanks again.

[David Chu]

Hi,
Yes, you can add it to your child theme's CSS.

Again, Regenerate Thumbnails will have no effect at all on the product images, which are completely separate from the thumbnail images. You can see that in your HTML source code. I don't use Woo Commerce much, but you may need to change the product image size settings AND re-enter product images.

That's my best guess from outside.

Good luck, Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Author]

Posts