Почему нечеткие изображения в магазине Woocommerce?

Question

[Artem-subbotin]

Помогите понять почему и как поправить баг с картинками товаров
https://amico-hc.com/shop/
Некоторые изображения товаров, если смотреть с телефона или планшета выглядят нечеткими (на дэсктопе все ок).
Все изображения одинаковые по размерам. И логику почему одни - ОК, а другие размытые понять не могу. Пробовал загружать разного расширения и т.д. Проблема не решается никак.

Comments

[zorca]

Приведите конкретные два примера страниц с четким и нечетким изображениями.

[Artem-subbotin]

Для этого необходимо смотреть на сматрфоне или планшете.
https://amico-hc.com/shop/page/3/
Товар Lifesaver явно выглядит размыто на фото.

Answer 1

[Сергей Шилов]

Мне кажется проблема в адаптивном теге и том, как woocommerce распределяет какое изображение какому устройству отдавать.
Если речь идет только а миниатюрах в цикле товара, то проще всего перезаписать их вывод:

function woocommerce_template_loop_product_thumbnail(){
    $product_img = get_the_post_thumbnail_url();
    echo '
        <div class="product-image" style="background-image:url(' . $product_img . ');"></div>
    ';
}

В этом коде я миниатюру вывожу в качестве фона, мне лично так проще управлять потом внешним видом, указываешь просто родителю высоту, а ,product-image: background-size: contain - и всех делов

Answer 2

[Artem-subbotin]

Добавил код, но теперь вообще пропали все изображения:
joxi.ru/MAjZJBNUvMpo1A

Answer 3

[Орхан Гасанлы]

Здравствуйте!

1) проверьте версию вукомерц и при необходимости обновите
2) обновите шаблоны вукомерц вашей темы
3) проверьте шаблоны вукомерц темы и посмотрите, какие миниатюры выдаются.
4) регенерируйте миниатюры установив regenerate thumbnails может быть вы просто тему сменили, а регенерировать миниатюры забыли.

Comments

[Artem-subbotin]

Попробую все. Спасибо!