pixel MENU
0845 303 9394hello@e-techuk.com

Image sizing issues in wordpress and woocommerce

I have written this post and included screenshots to help anyone who has a simlar issue with image sizing issues in wordpress. My customer was experiencing the issue whereby product thumbnail images were being cut off at the top and bottom in wordpress using WooCommerce.

Step 1: CSS

I naturally looked at tweaking the stylesheets, so I narrowed this down to the following classes, but nothing happened.

.woocommerce ul.products li.product a img,.woocommerce-page ul.products li.product a img

Step 2: CSS and JS

I disabled all Javascript and CSS on the page, but something was still cutting the top and bottom of the images

Step 3: WooCommerce Settings

Referenced this online and then went into the WoCommerce settings, where you can control the image sizes

  • Go to Wocommerce and click "settings"

woocommerce settings

  • Click on catalog
  • In the image options, you need to uncheck the "hard crop" setting and save settings

image options

Step 4: Regenerate Images

Once that has been done you will not see any effect on the website as the images are still set at a specific size and need to be regenerated which once done will remove the hard crop and size the images accordingly.

You will then need to run through the process of adding the "Regenerate Thumbnails" plugin

- Go to Plugins > Add New

- Search for "Regenerate Thumbnails"

- Install the plugin

- Then Active plugin

- Once installed, run the program through Tools > Regen. Thumbnails

regenerate thumbnails

The program will then run through all your images and regenerate them which could take some time, but once completed all images should not have any crop and should be easily viewed.

After this you can tweak the catalog and product images and thumbnails again which will apply the changes withouth having to regenerate them again.

Step 5: Tweaking Images if they appear blurred

Additional tweaks maybe required through CSS once this is done as the images may appear blurred and low quality. In this instance I tweaked the CSS by removing the width percentage and made additional style tweaks to make it look good.

We hope you find this post useful and should you need to ask any web development or design questions, please call Eadetech Web Design or email us, thank you.

25th of September 2013 By Simon

contact us direct on 0845 303 9394 or complete our online quote

get in touch today
Privacy Policy & CookiesTerms © Copyright 2018 - Eadetech Limited | Company Registration No: 04770510
103 Daventry RoadRomfordEssexRM3 7RD
0845 303 9394