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.
Yes! this works – thanks Rhys!
Just what I needed! Thank you 🙂
It didn’t work for me unfortunately. At least I’ve eliminated one possible cause.
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
This has fixed my issue Thank you so much. I have also updated the Astra support team investigate this because it should not be happening.