Не отображаются изображения товаров в WooCommerce: причины и как исправить

Если в WooCommerce пропали изображения товаров, сначала важно понять, где именно возникает сбой: в карточке товара, каталоге, галерее, у конкретной вариации или только на мобильном устройстве. Эти симптомы похожи внешне, но причины у них разные. Поэтому начинать с переустановки WooCommerce или массового пересоздания картинок — плохая идея.

Быстрая проверка: где именно не показывается изображение

Откройте проблемный товар в админке и проверьте блок «Изображение товара». Если основное фото там отсутствует, WooCommerce нечего выводить как featured image. Галерея товара не всегда заменяет основное изображение автоматически.

Затем откройте тот же товар в режиме инкогнито и сравните три места: каталог, страницу товара и корзину. Если картинка есть в одном месте и отсутствует в другом, исходный файл, скорее всего, доступен, а проблема находится на уровне шаблона, размера изображения, кэша или конкретного блока WooCommerce.

1. У товара не задано основное изображение

WooCommerce различает основное изображение товара и изображения галереи. Основное используется в карточке товара и обычно в каталоге. Галерея — дополнительные фотографии.

Если видите это — вероятнее всего: в редакторе товара есть несколько фото в галерее, но поле основного изображения пустое. Назначьте одно изображение главным, обновите товар и очистите кэш страницы.

Это особенно важно при импорте товаров. Ошибка в структуре CSV или пустое первое значение в списке изображений может привести к ситуации, когда галерея заполнена не так, как ожидается.

2. Файл есть в медиабиблиотеке, но WordPress не может его отдать

Откройте изображение непосредственно из медиабиблиотеки. Если файл возвращает 404, 403 или не загружается, проблема уже не в WooCommerce. Проверять нужно URL файла, каталог uploads, права доступа, CDN и правила веб-сервера.

После переноса сайта частая причина — старый домен в URL вложений или некорректная замена адресов в базе данных. Простая замена строк SQL-командой опасна: сериализованные данные можно повредить. Для рабочего магазина безопаснее использовать инструмент миграции, который понимает структуру данных WordPress.

Если одновременно появились серверные ошибки, используйте отдельный алгоритм диагностики ошибки 500 в WordPress — это уже другой уровень неисправности.

3. Миниатюры не создались или используются неправильные размеры

WooCommerce использует разные размеры изображений для каталога, страницы товара и миниатюр галереи. Поэтому оригинал может открываться нормально, а конкретная производная версия — отсутствовать или выглядеть размытой.

Что это значит: загрузка одного JPG или WebP не означает, что магазин везде показывает именно этот файл. WordPress создаёт дополнительные размеры, а тема и WooCommerce выбирают подходящий вариант через разметку изображения.

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

Не делайте так: не удаляйте массово файлы из uploads вручную, пытаясь заставить WordPress «создать их заново». База данных продолжит ссылаться на удалённые вложения.

4. Фото товара размыто, хотя оригинал качественный

Официальная документация WooCommerce рекомендует загружать товарные изображения не менее 800 × 800 px. Для товаров с мелкими деталями имеет смысл использовать более крупный исходник, но без бессмысленных файлов по 10–20 МБ.

В 2026 году тема особенно актуальна для блочных шаблонов. В GitHub WooCommerce обсуждалась ситуация, когда фиксированное соотношение сторон использует обрезанные миниатюры небольшой ширины, а затем растягивает их в более крупном блоке. На экране с высокой плотностью пикселей это заметно как потеря резкости.

Проверьте через DevTools, какой файл реально загружает браузер. Если блок шириной 700 px показывает миниатюру около 300 px, увеличение качества исходного изображения само по себе проблему не исправит — нужно исправлять выбранный размер или шаблон.

5. Не переключается изображение у вариативного товара

У каждой вариации может быть собственное изображение. Если оно не назначено, магазин использует основное фото товара. Но если фото назначено, а при выборе цвета или размера картинка не меняется, проверяйте JavaScript и используемый блок Add to Cart.

В официальном репозитории WooCommerce уже фиксировались случаи, когда Product Gallery не меняла изображение вместе с выбранной вариацией при определённой комбинации блочных компонентов.

Сначала убедитесь, что сама вариация корректно создана и доступна. Для этого используйте нашу отдельную инструкцию о том, почему не работают вариации товара в WooCommerce. Если вариация выбирается и добавляется в корзину, но изображение остаётся прежним, область поиска заметно сужается до галереи, JavaScript и шаблона.

6. Product Gallery работает неправильно на мобильном

Не каждый визуальный дефект галереи означает ошибку вашего сайта. Например, 9 сентября 2026 года в GitHub WooCommerce открыт Issue для WooCommerce 11.1.0: при свайпе Product Gallery на некоторых мобильных размерах экрана остаётся видна узкая часть соседнего изображения.

Поэтому перед тем как переписывать CSS, воспроизведите проблему на стандартной теме или тестовом окружении. Если дефект повторяется без ваших дополнений, это сильный признак ошибки самого компонента.

Универсальный принцип: сначала отделяйте собственную конфигурацию сайта от бага платформы. Иначе можно написать десяток CSS-правил для ошибки, которую разработчики исправят следующим обновлением.

7. Изображения ломает тема, Elementor или кастомный шаблон

WooCommerce отдаёт данные товара, но окончательную разметку часто формирует тема или конструктор. Если стандартная карточка товара показывает фото, а шаблон Single Product в Elementor — нет, искать нужно уже в виджете Product Images, условиях шаблона и конфликтующем CSS/JavaScript.

Если одновременно перестал загружаться сам редактор, используйте инструкцию что делать, если не работает Elementor. Не смешивайте две диагностики: ошибка редактора и ошибка изображения на фронтенде могут иметь общий источник, но это не одно и то же.

8. Кэш или CDN отдаёт старую версию страницы

После замены изображения WordPress уже может хранить новый файл, а посетитель продолжает видеть старый URL из page cache, CDN или оптимизатора изображений. Проверка простая: сравните страницу в обычном режиме, инкогнито и с временно отключённым CDN-кэшем.

Очищайте кэш по уровням: страница → объектный кэш → CDN. Не начинайте с полного отключения всех оптимизаций на рабочем магазине. Так сложнее понять, какой слой действительно виноват.

9. JavaScript-ошибка останавливает галерею

Откройте DevTools → Console и перезагрузите страницу товара. Красная ошибка JavaScript рядом с моментом инициализации галереи — важнее десятка догадок о настройках WooCommerce.

Затем проверьте Network: нет ли 404/403 у изображений и JS-файлов. Если после обновления плагина появились fatal error, белый экран или недоступна часть сайта, не продолжайте экспериментировать на production. Сначала определите источник по алгоритму поиска причины Fatal Error в WordPress.

10. Конфликт плагина оптимизации изображений

WebP/AVIF-конвертация, lazy load, CDN rewrite и объединение JavaScript могут вмешиваться в вывод галереи. Но отключать все плагины на живом магазине одновременно рискованно: можно повлиять на оплату, доставку, аналитику и фоновые процессы.

Правильный conflict test проводят на staging: оставляют WooCommerce и стандартную тему, проверяют проблему, затем возвращают компоненты по одному. Это медленнее случайного щёлканья переключателями, зато результат можно доказать.

Что проверить по порядку

1. Есть ли основное изображение товара.
2. Открывается ли исходный файл из медиабиблиотеки.
3. Какой URL изображения получает браузер.
4. Есть ли 404/403 в Network.
5. Какой размер изображения выбран через src/srcset.
6. Назначены ли изображения вариациям.
7. Есть ли ошибки JavaScript в Console.
8. Исчезает ли проблема без кэша/CDN.
9. Повторяется ли ошибка на staging со стандартной темой.

Изображения товаров и SEO

Google рекомендует использовать обычные HTML-элементы img, сохранять fallback URL в src, давать изображениям понятные имена файлов и описательный alt. Картинки, заданные только как CSS background, Google не индексирует как обычные изображения страницы.

Для магазина это не косметика. Поломанная картинка влияет сразу на несколько уровней: покупатель хуже понимает товар, падает доверие к магазину, карточка хуже конвертирует, а поисковая система получает меньше качественных визуальных сигналов.

FAQ

Почему в WooCommerce вместо фото товара пустое место?

Сначала проверьте основное изображение товара и доступность файла. Затем Network в браузере: 404 указывает на отсутствующий файл или неверный URL, 403 — на ограничение доступа.

Почему изображение товара размыто?

Чаще всего браузер растягивает слишком маленькую миниатюру. Проверьте фактический файл в DevTools и настройки размеров изображений темы/WooCommerce.

Почему фото не меняется при выборе вариации?

Проверьте изображение конкретной вариации, JavaScript Console и используемый блок выбора вариаций. Если сама вариация работает, проблема обычно находится в связке галереи и frontend-скриптов.

Нужно ли регенерировать миниатюры?

Это имеет смысл после изменения размеров или смены темы, если старые изображения не имеют нужных производных файлов. Перед массовой операцией сделайте резервную копию и проверьте решение на нескольких товарах.

Можно ли просто отключить все плагины?

На рабочем магазине лучше не делать этого. Conflict test безопаснее проводить на staging, чтобы не затронуть заказы, оплату и фоновые задачи.

Коротко: что делать сейчас

Начните с одного проблемного товара: основное фото → прямой URL → Network → фактический размер → Console → вариация → кэш → staging. Такая последовательность идёт от безопасных проверок к вмешательству в конфигурацию и помогает не сломать то, что работает.