Images different sizes in product catalog

This topic has 6 replies, 3 voices, and was last updated 4 years ago ago by Rose Tyler

  • Avatar: vincedebode
    vincedebode
    Participant
    March 20, 2020 at 17:36

    Hi Everyone,

    Currently we are working on this webshop. However, but we experience a difficulty in getting our pictures right in the catalog area. Every picture has a different size. We tried to rescale them to a square but this did not worked out. Does someone have an idea how to fix it so every product is well aligned.

    5 Answers
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    March 20, 2020 at 18:21

    Hello,

    I would recommend you to edit images before uploading them to your media, for example https://gyazo.com/e72cb160a45d26155d875411d35527d3
    In case you can’t do this then you may disable crop and use custom CSS to limit product image height

    .content-product .product-content-image img {
        max-height: 200px;
        width: auto;
    }

    But the first way is the better.

    Regards

    Avatar: vincedebode
    vincedebode
    Participant
    March 20, 2020 at 21:00

    Thank you this somewhat worked. Is there a way to align the text under the pictures? This seems to cause to difference in alignment. Since some pictures are lower than others I thought if I could align the text next to each other might solve it too.

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 21, 2020 at 08:53

    Hello,

    Try to add the next custom CSS code:

    .content-product .product-title a {
        min-height: 47px;
    }

    Regards

    Avatar: vincedebode
    vincedebode
    Participant
    March 23, 2020 at 09:29

    Thank you for the quick respons. However this does not align them. Please see the link which I have included. Looking for a way to just simplly align all the ‘add to shopping cart buttons’

    https://joyhouse.nl/product-category/hond/

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 23, 2020 at 10:35

    Try to change “Product Title Chars Limit” in Theme Options > WooCommerce (Shop) > Shop > Product style.

    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.