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"
- Click on catalog
- In the image options, you need to uncheck the "hard crop" setting and save settings
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
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