Woocommerce Item Size (for catalog pages)

Support
#1

After removing Hard Crop from Woocommerce (because some of the images were being cut off) I am seeing uneven box sizes for the product previews. Please see example here: https://nfjexpanded.flywheelsites.com/bracelets/.

My goal is to have each box be the same size. I know one option is to go in by hand and add white space to every image, but that would be pretty time consuming. Is there a way to achieve this via CSS?

Thanks!

#2

Hey,

This article should help you with this problem:
https://docs.woocommerce.com/document/featured-images/

#3

Hey John,

Thanks for the link. So I have read it over and it doesn’t look like it would apply to this? It references settings that are in Woo-built themes, not Pro.

#4

Hello There,

Do you want something like this?

If that is the case, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.woocommerce li.product .entry-featured {
    text-align: center;
}

.woocommerce li.product .entry-featured img {
    min-width: 10%;
    width: auto;
    max-height: 200px;
}

Hope this helps. Please let us know how it goes.

#5

Worked perfectly. I also had to adjust the height of the div that contained the text (since some items broke to two lines for the product name), but all working now! Thanks you!

#6

Glad we were able to help :slight_smile:

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.