Better thumbnails in WooCommerce
Recently we uploaded a lot of products and images for a shopping website that we’re making. The thumbnails generated automatically by woocommerce were not good though. This is what we did to improve them.
We unchecked all hard crop in woocommerce settings and set the images to sizes to be the following
Catalog Images:-width-150 height-150
Single Product Image:-width-575 height-388
Product Thumbnails:-width-200 height-200
We rebuilt all the thumbnails at one go Ajax Thumbnail Rebuild using to the changes done for your images at once rather uploading the images again.
We added this CSS to make the new thumbnails more centered.
For outer image div
ul.products li.product a.image_wrap{
height: 150px; width: 150px; position: relative; margin-left: auto; margin-right: auto;}
For the inner image div
ul.products li.product a img
{display: block; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0;}
