Equalizing Product Cards without cropping

  • Resolved Ralf

    (@stepanyanr)


    2 years ago

    hello, I need some help with my product feed. I am using the flatsome theme and I have over 1k skus with unique images on my site. That being said The images are all cropped extremely awkwardly coming from the suppliers feeds. I have the option to “equalize” all the images cropping them and making all the product cards the same size or to not equalize it and try to manually set up ratios. Neither of these options in the flatsome/woocommerce theme are doing anything for me. If you look on my catalog site right now I do not have anything equalized so that the full images of products actually display. This results in the cards being staggered and unequal. Is there anyway to make the product cards equal and just have the images “resize” to fit into the image box without cropping? I saw another support thread with similar question and I tried the code from their but it has done nothing for me.

    I would really appreciate any help.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Saif

    (@babylon1999)

    Hello @stepanyanr,

    If I understand you correctly, you want the height of all product cards images to be the same.

    You can first start by navigating to Customize > WooCommerce > Product Images and changing the crop to something like 1:1.


    Link to image: https://d.pr/i/wNQEpb



    If that doesn’t help, you can add the snippet below to the additional CSS section of your theme temporarily until you figure out a solution with the theme author.

    Here’s a guide on how to add a CSS snippet to your theme.

    /*  Make product height a static 100px  */

.product-small > .box-image {  height: 130px !important;  aspect-ratio: 1/1 !important;;}
}

    Hope this helps!

    Thread Starter Ralf

    (@stepanyanr)

    Thank you so much for your help, The CSS did help me mitigate some products with vertical product images that were causing extreme stagger. That being said I am still having stagger issues and cropping the images isn’t the right way to go about it I think. What ultimately has to be done is the thumbnail has to be “fit” uncropped into a image box so that I can somehow have the product cards all equal height and width while displaying the full image. As you can still see the product cards are still slightly staggered. Is there any css that tells the theme to fit images into x by x box maybe?

    Your help is appreciated!

    Saif

    (@babylon1999)

    Hello @stepanyanr,

    That being said I am still having stagger issues and cropping the images isn’t the right way to go about it I think. What ultimately has to be done is the thumbnail has to be “fit” uncropped into a image box so that I can somehow have the product cards all equal height and width while displaying the full image.

    This is something related to the theme, not WooCommerce, the best option here is to get in touch with your theme author.

    If they’re not helpful, you can hire a WooExpert to help you build a custom solution.

    Cheers!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Equalizing Product Cards without cropping’ is closed to new replies.