Related images size with WooCommerce

Community Forums Forums Design Tips and Tricks Related images size with WooCommerce

This topic is: not resolved

This topic contains 3 replies, has 2 voices, and was last updated by  David Chu 10 months, 2 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #67149

    Bart van Maanen
    Participant
    Post count: 26

    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 150×150, 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/
    #67181

    David Chu
    Participant
    Post count: 1355

    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.

    [css]
    .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%;
    }[/css]

    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

    #67293

    Bart van Maanen
    Participant
    Post count: 26

    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.

    #67315

    David Chu
    Participant
    Post count: 1355

    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.