Thumbnails look very blurry, I cannot find a solution.

[Fernando Perez Gomez]

Hello,

I have renewed support, in order to finally fix the blurryness of the preview product images on my client’s website: https://nakawetrading.com

Please look at the following page:
https://www.nakawetrading.com/handmade-mexican-hammock/

I have regenerated thumbnails (via wp-cli), disabled “imagify”, and “perfect images” plugins  and I still cannot make it work. Can you please help me with this?

The actual product pages’ images are fine. So if I go onto individual product pages, the images look ok and in high-resolution. However for the listing of products, they look blurry, I am attaching a screenshot of the above page so that you can see.

59d3960de57404289a7e55e70b72a309.png d4b49a6c11fcc48d02f3f652da1c7751.png

[Nodari]

Hi there

Try this css code in the page CSS options:

img.product-loop-image {
    height: 247px !important;
}

This will make your image

[Fernando Perez Gomez]

Hi thanks for your reply.

I added the code, however it is not making any difference.

Images still look blurry on the product listing page.

[Nodari]

Hi Fernando

The code is not added, it’s not rendered, can you please share the screenshot of the code?

Please note, your image size is 247-330px at this moment its rendered as 250-330px that’s why it looks not naturally, this code will display image without stretch https://prnt.sc/-_UZ31fN4cgI

Regards

[Fernando Perez Gomez]

Hi, please see attached screenshot. I have changed the size (witdth and height) to match with the ‘natural’.

However – there is no change to how the image is (badly) displayed. Please this is very important. Why do I need to make css changes to things I haven’t modified to your theme? Should it not work normally?

 

Regards,

78c7901a0b696013abcff12b5192792a.png

[Fernando Perez Gomez]

Also, this doesn’t work because it brings another error on the front page. See attached.

I will revert to original without this fix because the fix doesn’t work with the problem.

Please provide a working solution for your theme.

 

Regards

fc80df1da18e4d95551d2ed3eb05bb71.png

[Fernando Perez Gomez]

Hello,

Could you please give me another solution that works?

We cannot have the thumbnails look so blurry on the site.

[Mohsin Al-Rabieai]

Hi Fernando,

I overrided the woocommerce/content-product.php file in your child theme and changed this line:

echo '<img src="'.mk_thumbnail_image_gen($image_output_src, $width, $height).'" class="product-loop-image" alt="'.get_the_title().'" title="'.get_the_title().'" itemprop="image">';

And this line:

echo '<img src="'.mk_thumbnail_image_gen($image_hover_src, $width, $height).'" alt="'.get_the_title().'" class="product-hover-image" title="'.get_the_title().'" >';

To this:

echo '<img src="'.$image_output_src.'" class="product-loop-image" alt="'.get_the_title().'" title="'.get_the_title().'" itemprop="image">';

And this:

echo '<img src="'.$image_hover_src.'" alt="'.get_the_title().'" class="product-hover-image" title="'.get_the_title().'" >';

Now the images won’t get a second resize and show clean. Can you please check if this is what you need?

Bests

• This reply was modified 6 months, 1 week ago by Mohsin Al-Rabieai.

[Fernando Perez Gomez]

Yes – this seems to have done the trick.

Thanks a lot.

 

[Nodari]

You are welcome Fernando 🙂

Regards

[Fernando Perez Gomez]

This reply has been marked as private.

[Mohsin Al-Rabieai]

This reply has been marked as private.

[Fernando Perez Gomez]

This reply has been marked as private.

[Mohsin Al-Rabieai]

This reply has been marked as private.

[Fernando Perez Gomez]

This reply has been marked as private.

[Mohsin Al-Rabieai]

This reply has been marked as private.

[Fernando Perez Gomez]

This reply has been marked as private.

[Fernando Perez Gomez]

Hello again,

I have solved this problem by forcing regenerate thumbnails.

 

Kind regards,

Fernando

[Mohsin Al-Rabieai]

Glad to hear that 🙂

[Fernando Perez Gomez]

Hi again Moshin,

We have a problem with the product listing around the whole website, where you hover over a product and another tiny image comes on top. I think the theme wants to show another overlay image from the product gallery images, however not sure why it doesn’t cover the whole original product image and it makes the hover effect look bad.

Can you please take a look and let me know why is this happening? How can we fix this?

You can check this on any product pages, or in the homepage on the featured products section. Just hover over any product listed on the website.

Kind regards,
Fernando

• This reply was modified 3 months, 2 weeks ago by Fernando Perez Gomez.

[Nodari]

Hi Fernando

I’m sorry for asking, but can you please start a new ticket? This one becomes too long to handle it, it will easier for us to provide better support if you start a new ticket.
p.s. include direct link and access details in the new ticket.

Thanks in advance and have a good weekend 🙂

[Author]

Posts