Woocommerce gallery thumbnails blurry in the WP Astra Theme? Here is the fix

I’ve said it before – I am a big fan of the WP Astra theme. I only have one little pet peeve and that is the thumbnail images being 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.

6 thoughts on “Woocommerce gallery thumbnails blurry in the WP Astra Theme? Here is the fix”

    1. Wait no. It’s worked! I had to customise the woocommerce product image sizes a bit and finally I can see clearly! Thankyou so much. What a life saver! Phew

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top