Inconsitant grid alignment when product image not 1:1 ratio

This topic has 6 replies, 3 voices, and was last updated 7 years, 4 months ago ago by Olga Barlow

  • Avatar: pt1011
    pt1011
    Participant
    November 16, 2016 at 06:09

    on the shop or category pages, when a product image is not a perfect square, the title aligment of each product in that row of products is off. the title appears under the image and not in line with the other titles. this is not ideal.

    5 Answers
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    November 18, 2016 at 09:52

    Hello,

    If you use images with different size you can enable crop option in WooCommerce settings (WooCommerce > Settings > Products > Display) to make them equal height. Or you may try to add max-height for your image block, this is not good practice in general but if you want to have all the image block with the same size it can be like workaround for you.

    Regards

    Avatar: hazwan
    hazwan
    Participant
    December 6, 2016 at 17:48

    Hi, I am trying to do the same thing here. Referring to your last answer, where do I add max-height to adjust the image block?

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    December 7, 2016 at 19:21

    Hello, @hazwan,

    Provide, please, link to your site and screenshot of the block where you want to add max-height. I’ll check and send you the custom CSS.

    Regards

    Avatar: hazwan
    hazwan
    Participant
    December 8, 2016 at 00:33

    Hi,

    Below are the link and screenshots

    Please, contact administrator
    for this information.
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    December 8, 2016 at 16:01

    Hello, @hazwan,

    1) Go to Theme Options > Styling > Custom CSS > add the following code in custom CSS

    .content-product .product-content-image img {min-width: 1px;}

    2) Go to WooCommerce > Settings > Products > Display > Catalog Image settings and set height 262px, Hard Crop – Off.
    3) Go to Plugins > Install and activate Regenerate Thumbnails plugin. After that go to Tools > Regenerate thumbnails and regenerate all the images.

    Regards

  • Viewing 6 results - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.