[Spencer MParticipant]

Hello,

I am trying to make all thumbnails on the Shop index pages and ‘recent posts’ widget the same height. I tried setting the size in the wordpress media settings (and woocommerce product settings) and then regenerating thumbnails, but the thumbnails all still have varying heights depending on their respective aspect ratio.

How can I make the thumbnails on the shop pages and ‘recent posts’ widget be hard cropped to a certain size?

Thank you – I am putting site link in a private post.

[Spencer MParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please add the following CSS code under Customize -> Custom -> CSS:

@media (min-width:760px){
.x-recent-posts-img {
height: 109px;
}

.woocommerce .entry-product img {
height: 211px;
}
}

Hope it helps.

[Spencer MParticipant]

Thanks that helped line up the photos as desired, but now the images are distorted.

Is there a way to make sure the thumbnails hard crop to that size? It is okay if part of the image is cut off in the thumbnail crop, but doesn’t look right when image is squeezed down and distorted to fit that size.

Again, I tried to regenerate the thumbnails with wordpress and woocommerce media settings set to hard crop, but with no luck.

Thanks

[ZeshanMember]

Hi Spencer,

Thanks for posting in! Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks!

[Spencer MParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please go under Woocommerce settings -> Products -> Product Image Sizes and check the box for hard crop,clear cache and regenerate thumbnails,test again.

Hope that helps.

[Spencer MParticipant]

That did not work. Still not resizing correctly. The hard crop is not working.

With the previous fix you provided, the thumbnails are all the same size but the images are distorted.

I am trying to get the thumbnails to all have the size size, but with images not distorted, just cropped.

Please advise, thank you.

[ChristopherModerator]

Hi there,
Please delete this code:

@media (min-width:760px){
.x-recent-posts-img {
height: 109px;
}

.woocommerce .entry-product img {
height: 211px;
}
}

And try this one:

@media (min-width:760px){
.home .entry-product .entry-featured {
height: 163px;
overflow: hidden;
}
.archive .entry-product .entry-featured {
height: 137px;
overflow: hidden;
}
}

Feel free to change the height.

Hope it helps.

[Author]

Posts