If you are working on a new project with WooCommerce, and notice that some of the images look blurry or stretched, or if you simply wish to change the size of the default WooCommerce product image sizes, you will have to setup or modify thumbnail/image sizes. In this article, we’ll cover changing both the WooCommerce product image sizes and the default WordPress image size you might need to change. Let’s see how you can change the default image sizes of your theme first, and then, we’ll look into how to do the same exact thing for WooCommerce product image sizes.

If you’re still new to WooCommerce, we’d recommend that you find some online resources and learn how to launch your online store with it – it’s easy!

Changing the WooCommerce Product Image Sizes

In WooCommerce, all you need to do is go into the WooCommerce->Settings->Products->Display section. This is where you will see the existing dimensions for Catalog Images, Single Product Images and Product Thumbnails. Set those sizes accordingly, hit Save Changes, and afterwards, regenerate (delete and insert one more time) your product thumbnails. In order to regenerate the product thumbnails, you’ll need to use a plugin such as Force Regenerate Thumbnails. Simply install the plugin and run it one time. Your WooCommerce product images should be updated right after doing that!

Changing Default Image Sizes in a WordPress Theme

In case your existing thumbnail size are not looking alright for you, or if you need to add an entirely new default thumbnail size, navigate to your theme’s root directory and open the functions.php. Then, at the bottom of the file, we will write a simple function and hook it to the appropriate action:

function our_custom_thumbnail_sizes() {
	// Set small thumbnail size
	add_image_size('slt-small-thumbnail', 180, 150, true);
	// Set medium thumbnail size
	add_image_size('slt-medium-thumbnail', 220, 170, true);
	// Set large thumbnail size
	add_image_size('slt-large-thumbnail', 1600, 800, true);
}
add_action(‘after_setup_theme’, ‘our_custom_thumbnail_sizes’);

Once you get the concept of how the default thumbnails work on WordPress, it would be super easy to customize and fit to your needs. Furthermore, you can adjust these images in various ways, such as to allow cropping or not.
Lastly, in order for these changes to take effect, you need to remove the existing post thumbnails, and add them again into your pots.

If you need a savvy WordPress developer to help you out, please consider Hiring an Expert.