Image setting in woocommerce store

We currently have a catalogue on our site, available at http://gct.wpengine.com/services.

So far, we've been manually creating 300x300 pngs of logos, so that when they're uploaded to products they'll look normal (a la http://take.ms/viKZS)

If we upload a rectangular logo without doing this, it will come back cropped, a la http://take.ms/eStoS.

Is there a way can avoid this, and have it simply set rectangular images to match their width?

It looks like it's an issue of how the thumbnail is being set, rather than merely css issues, as the link itself seems to show the same cropping...
http://gct.wpengine.com/wp-content/uploads/2015/07/2fe5348-300x223.png

Thanks!
Benji

  • Predrag Dubajic
    • Support

    Hey @Benji,

    Hope you're doing well today :slight_smile:

    I believe that WooCommerce hard cropping is causing this, so after disabling it you should be good to go but you might need to upload the images again.

    To disable hard cropping go to WooCommerce > Settings > Products tab and click on Display link.
    Disable hard cropping for desired thumbnails and that should be it.

    Let me know if this worked for you :slight_smile:

    Best regards,
    Predrag

  • Benji
    • Design Lord, Child of Thor

    So, curious if there's a way to set the image to sit vertically in the center of the box... ie so it will be in line with the other images (see attached)

    Seems like the issue is that the product boxes should perhaps be fixed height... is this something that would have to be changed in the template?

  • Benji
    • Design Lord, Child of Thor

    Hmm... the problem there though is it's a responsive design, so when you shrink the window, it's leaving big gaps (see attached).

    meanwhile, ideal would definitely if were able to center the image vertically within that box, so it aligns with the other ones??

    Thanks!
    Benji

  • Benji
    • Design Lord, Child of Thor

    Just cause i made that one test item (Morrow Lane) a draft... I've put it back on the page, so check now (you'll have to just add your custom css in the browser). Morrow Lane is toward the bottom of the page

    • Kasia Swiderska
      • Support nomad

      Hi Benji,

      Centring images horizontally - when theirs sizes are not predictable - can be tricky and it requires changes of CSS in few places, if this should be responsive.
      This is nice technique for doing that http://jsfiddle.net/kizu/4RPFa/4570/ - but also require the min-height of the wrapping element of image. So it's not very responsive.
      The quick way - use images with 300x300px size. This is totally workaround I know, but works, and looks good and will not break you whole layout.

      Kind regards,
      Kasia

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.