Размеры изображений товара в WooCommerce: три размера и как их менять

WooCommerce создаёт три размера для каждой загруженной фотографии товара, и только два из них можно править в админке WordPress. woocommerce_thumbnail — изображение в сетке каталога, woocommerce_single — крупная картинка на странице товара, woocommerce_gallery_thumbnail — полоска маленьких миниатюр под ней. Меняются они в Внешний вид > Настроить > WooCommerce > Изображения товаров — и если в этой панели есть выпадающий список обрезки, но нет полей ширины, значит ваша тема намеренно зафиксировала ширины в коде.

Три размера

Название размера	Где встречается	Обрезка	Правится в кастомайзере
woocommerce_thumbnail	Страница магазина, сетки категорий, похожие товары, кросс-селлы	По умолчанию жёстко режется в квадрат	Ширина и соотношение
woocommerce_single	Главное изображение на странице товара	Без обрезки — исходные пропорции сохраняются	Только ширина
woocommerce_gallery_thumbnail	Полоска под главным изображением товара	Жёсткая обрезка в квадрат	Нет

Всё это накладывается поверх стандартных размеров WordPress. Одно фото товара обычно порождает thumbnail, medium, medium_large, large, три размера WooCommerce и, возможно, дополнительные, зарегистрированные темой через add_image_size. Файлов на одну загрузку выходит немало — вот почему импорт трёхсот товаров тянется так долго.

Больше всего людей удивляет миниатюра галереи: у неё вообще нет настройки в админке. На чистой установке это маленький квадрат, исторически 100px, и именно она чаще всего выглядит мыльной на ретине, потому что сам файл действительно крошечный.

Где на самом деле лежат настройки

Внешний вид > Настроить > WooCommerce > Изображения товаров даёт три поля:

• Ширина главного изображения — ширина woocommerce_single. Высота считается автоматически, поэтому исходные пропорции сохраняются.
• Ширина миниатюры — ширина woocommerce_thumbnail.
• Обрезка миниатюры — 1:1 (квадрат, по умолчанию), Произвольная (вы вводите соотношение вроде 4:3) или Без обрезки.

Обратите внимание, чего здесь нет: поля высоты для миниатюры каталога — потому что высота выводится из соотношения обрезки. И совсем ничего для миниатюры галереи.

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

Почему изображения в каталоге выглядят неправильно

Миниатюра каталога жёстко режется в квадрат. Жёсткая обрезка означает, что WooCommerce берёт из фотографии центральный квадрат, а остальное выбрасывает: он не добавляет полей и не сжимает пропорции. Кадр 2000x1200 превращается в срез 1200x1200 из середины, который затем уменьшается.

Для бутылки, снятой ровно по центру с полями по краям, это нормально. Для остального — катастрофа:

• Длинные товары (лыжи, кабели, карнизы) — видна средняя треть и больше ничего
• Смещённые композиции — товар уезжает к краю кадра и обрезается
• Фото, где предмет занимает кадр от края до края, — верх и низ отрезаются
• Лайфстайл-съёмка с товаром в углу

Обычный совет — «переключите обрезку на Без обрезки». Это работает, но скажем честно о цене: без обрезки каждая миниатюра сохраняет свои пропорции, поэтому сетка из фото разной ориентации становится рваной, а ряды перестают выравниваться, если CSS темы не рассчитан на разную высоту. Большинство тем ожидают квадраты.

Решение получше, если оно вам по силам, — на уровне съёмки: единый формат квадратных фотографий с товаром по центру и одинаковыми полями. Тогда квадратная жёсткая обрезка ничего не меняет, и всё дальше по цепочке предсказуемо. Смена настройки обрезки — обходной путь; одинаковые исходники — настоящее решение.

Когда тема блокирует ширины

Если панель «Изображения товаров» предлагает только обрезку, значит тема объявила фиксированные ширины при регистрации поддержки WooCommerce:

add_theme_support( 'woocommerce', array(
    'single_image_width'    => 800,
    'thumbnail_image_width' => 400,
) );

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

Переопределить их можно из functions.php дочерней темы фильтром для конкретного размера:

add_filter( 'woocommerce_get_image_size_single', function ( $size ) {
    $size['width']  = 1000;
    $size['height'] = '';
    $size['crop']   = 0;
    return $size;
} );

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function ( $size ) {
    $size['width']  = 150;
    $size['height'] = 150;
    $size['crop']   = 1;
    return $size;
} );

Тот же приём работает для woocommerce_get_image_size_thumbnail. И это единственный способ изменить миниатюру галереи, у которой нет интерфейса.

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

Смена размеров означает пересоздание

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

WooCommerce запускает фоновое пересоздание при сохранении кастомайзера. Для маленького каталога этого хватает. Для большого всё упирается в надёжность WP-Cron, который на магазине с малым трафиком часто не срабатывает, — и вы получаете наполовину пересозданную медиатеку. Лучше запустить самому:

wp media regenerate --yes

Чтобы перестроить только изображения товаров:

wp media regenerate --yes --post_type=product

Если хочется убрать фоновую задачу с дороги, пока вы делаете это руками:

add_filter( 'woocommerce_background_image_regeneration', '__return_false' );

Двух вещей пересоздание не делает. Оно не удаляет старые файлы — в каталоге загрузок остаются все осиротевшие производные от прошлых настроек, и он будет расти. И оно не может создать размер больше исходника, потому что WordPress не увеличивает изображения. Если задать ширину главного изображения 1200, а фото товаров у вас шириной 800px, файла на 1200px не появится: браузер получит файл на 800px и растянет его, а srcset нечего будет предложить взамен.

Какой размер загружать на самом деле

Ориентируйтесь на квадратные исходники примерно вдвое больше самой крупной заданной ширины: 1200x1200 для главного изображения в 600px, 1600x1600 — если тема использует 800px. Это покрывает ретину с двойной плотностью и даёт WordPress достаточно пикселей, чтобы собрать все производные без растягивания. Держите все товары в одинаковых размерах, чтобы сетка оставалась ровной.

Всё ещё не работает?

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