Better thumbnails in WooCommerce

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;}

Sanat Hegde @Sanat