have you ever switched themes and your
product image is suddenly looked off if
so then let's take a look at how to fix
your blurry product images there are two
common causes of blurry or distorted
product images one is not having the
appropriate size images uploaded which
unfortunately we can't fix in this video
for that you'd need to re-upload a
higher resolution image appropriate for
your theme the second common cause is if
your images are high enough quality but
your image sizes set in woocommerce are
incorrect for your theme so how do we
fix this let's dive in first you'll want
to navigate to a problem image in your
store make note of what type of image it
is as there are three types of product
images in woocommerce there's catalog
images single product images and product
thumbnails in this case we're working
with a catalog
image next right click on the image and
choose the inspect or inspect element
option this works in most major browsers
just be sure to have its developer
features turned on in this case where
using Chrome you'll now be able to see
the HTML code that is displaying this
image if you look closely you'll find
the image placeholder height and width
listed in pixels make note of these
Dimensions as we'll need them in just a
moment in the theme that we're using the
image placeholder size is 185 pixels by
pixels now in your WordPress admin head
to woocommerce settings and then the
products tab then select the display
submenu here you'll see the current
woocommerce settings for your product
images take a look at the sizes for the
specific image type that you're trying
to fix in our case that's the catalog
images right now the catalog images are
set to 100x 100 pixels which is smaller
than the required 185x 185 that our
theme is trying to
display this is what's causing the image
to get stretched out and blurry on our
site so we'll need to update the setting
to match what we found on the front end
of our website you can enter the exact
size that you found in our first step or
if you want you can even make this
setting a little larger than what you
saw on the front end of your store for a
little extra image insurance now that
we've entered the correct size in our
settings we need to regenerate our
thumbnail images updating the sizes in
your woocommerce settings does not
automatically regenerate the images to
fix them to do that we'll want to use a
plugin called regenerate thumbnails
install and activate regenerate
thumbnails by Alex
Mills once that plug is activated if you
want to do this for your entire media
library then head to tools regen
thumbnails there you can regenerate the
thumbnails for every image on your site
otherwise head to your media library to
select the specific images you need to
regenerate make sure you're using the
list View and then select your
images in the bulk actions menu choose
regenerate thumbnails depending on how
many images you have and how fast your
server is this may take a minute or or
two to complete once this is done head
back to your store and your images
should now be the proper resolution and
looking great if your images still look
to be low quality make sure that the
product image that you originally
uploaded is large enough for most themes
any image larger than 800 by 800 pixels
should work keep this in mind anytime
you may switch themes using woocommerce
thanks for
[Music]
watching