CODEWITHSUNDEEP
cssimagewoocommerce
user49624
user49624

Reputation: 11

How do I align my Woocommerce product images to the top?

http://cameleonjackets.com/product-category/fall-2014/

The models heads are being cut off. How can I align the photo to the top? I've tried adjusting the photo sizes and the columns, but I want to keep the layout and product images as is. Is there a way to do this with CSS? Thanks!

Upvotes: 1

Views: 2639

Answers (1)

codewizard
codewizard

Reputation: 1687

The issue isn't with CSS. It's with the fact that your CMS is cropping the images, and doing so from the center of your images.

First you need to disable cropping on your generated thumbnails. Settings in wordpress will be found at

Dashboard > settings > media

and (depending on your installation of woocommerce)

Dashboard > Woocommerce > Settings > Product > Product Image Sizes

You will also need to disable cropping anywhere in your themes code that could be causing problems. Look for functions that look the similar to

 add_image_size( $name, $width, $height, $crop );

Where $crop would be a true false statement that we want to be false.

Then you will need to have your thumbnails regenerated. You can use this plugin to do that.

Then you can use css to set the size of whatever wraps your images as well as set overflow:hidden and then set the image styles min-width and min-height to 100%. That way if you upload different sized images it still appears to be properly cropped.

Upvotes: 1

Related Questions