Hi HKN,
Since you have your theme settings > woocommerce > shop product columns set to 3, that makes the images display larger than you have catalog image sizes set to, which causes the image to blur when it’s expanded.
Go to Admin > WooCommerce > Settings > Products > and change Catalog Image Size to no less than 400×400. I don’t believe you have to use hard crop (I don’t and have had no problems).
You might have to follow this up by getting a plugin called Regenerate Thumbnails from the WP plugin repository. It works well and will regenerate all of your image thumbnails to fit the dimensions you have set in the area I mentioned above.
Hope that helps!
– Matt