How to fix Woocommerce gallery thumbnails blurry in the WP Astra Theme?

WP Astra is the most popular option among WordPress’s themes. Some readers have one little pet peeve and that is that the thumbnail images are blurry for Woocommerce products. This is because the gallery renders the images in a flexbox with each image displaying at 120px wide, however, the image thumbnail itself is only 100px, causing the image to stretch and distort. However, the solution is simple. Just add this code to your child theme’s functions.php file:

/**
 * Thumbnails
 * Fixed pixelated gallery thumbs for woocommerce
 */
add_action('after_setup_theme', 'astra_child_woocommerce_support');
function astra_child_woocommerce_support()
{
    add_theme_support('woocommerce', array(
        'gallery_thumbnail_image_width' => 250,
    ));
}

add_filter('woocommerce_get_image_size_gallery_thumbnail', function ($size) {
    return array(
        'width' => 250,
        'height' => 250,
        'crop' => 1,
    );
});

This will resize the images to 250px wide and they will look crisp again.