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.
It works! After I tried all the other methods, only this one worked. Thank you so much for fixing my pain.
Thank you Rhyso for sharing this! Sorry if this is a silly Q, I am not a tech person- What if there is no child theme on my website? I am using astra theme. In that case should I be updating the above code in the main theme’s functions.php file? Or should I be creating a child theme? Also, I am assuming the above code is to be added at the end, correct?
Hey mate you will need to create a child theme, I recommend using a plugin like WP Child Theme Generator:
https://wordpress.org/plugins/wp-child-theme-generator/