Как отключить автоматическое масштабирование изображений в WooCommerce

Проблема: почему WooCommerce автоматически масштабирует изображения

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

Автоматическое масштабирование происходит из-за настроек в самом WooCommerce и стандартных функций WordPress, ответственных за генерацию размеров картинок. Особенно это заметно при использовании тем или плагинов, которые полагаются на оригинальные размеры.

Диагностика проблемы с масштабированием изображений в WooCommerce

• Проверьте, создаются ли дополнительные размеры изображений помимо оригинала в папке wp-content/uploads. Для этого можно зайти в медиафайлы через FTP или файловый менеджер хостинга.
• Откройте настройки WooCommerce в разделе WooCommerce → Настройки → Продукты → Отображение и посмотрите, какие размеры заданы для изображений.
• Проверьте, не переопределяет ли тема размеры с помощью хуков add_image_size или фильтров woocommerce_get_image_size_*.
• Используйте инструмент разработчика браузера, чтобы проверить, какие именно размеры изображений загружаются на странице товара или каталога.

Пошаговое решение: отключение и настройка масштабирования в WooCommerce

1. Отключаем автоматическую генерацию размеров WooCommerce

Добавьте следующий код в файл functions.php вашей дочерней темы или в отдельный плагин для кастомного кода:

add_filter('woocommerce_get_image_size_thumbnail', function() {
    return array(
        'width'  => 0,
        'height' => 0,
        'crop'   => 0,
    );
});
add_filter('woocommerce_get_image_size_single', function() {
    return array(
        'width'  => 0,
        'height' => 0,
        'crop'   => 0,
    );
});
add_filter('woocommerce_get_image_size_gallery_thumbnail', function() {
    return array(
        'width'  => 0,
        'height' => 0,
        'crop'   => 0,
    );
});

Этот код установит размеры всех WooCommerce-изображений в 0, что фактически отключит масштабирование.

2. Отключаем стандартную генерацию размеров в WordPress (если нужно)

Для предотвращения создания стандартных размеров (thumbnail, medium, large) при загрузке можно использовать:

function disable_default_image_sizes( $sizes) {
    unset( $sizes['thumbnail']);
    unset( $sizes['medium']);
    unset( $sizes['large']);
    return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'disable_default_image_sizes');

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

3. Удалите уже сгенерированные ненужные размеры

Для удаления лишних размеров можно использовать плагин Clearfy Pro с функцией очистки медиафайлов или вручную удалить папки с размерами через FTP.

Проверка результата после внедрения

• Загрузите новую картинку товара и проверьте папку uploads, чтобы убедиться, что дополнительные размеры не создаются.
• Откройте страницу товара и каталога, убедитесь, что загружается оригинальное изображение без уменьшения или искажений.
• С помощью инструмента разработчика браузера проверьте URL загружаемых изображений — они должны вести на оригинал или на нужный размер без масштабирования.

Частые ошибки и способы исправить

• Изображения по-прежнему масштабируются: возможно, тема или другой плагин переопределяют размеры. Проверьте наличие хуков add_image_size и фильтров woocommerce_get_image_size_*.
• Появляются ошибки при отключении размеров 0х0: некоторые темы требуют определённых размеров изображений. В этом случае можно задать минимальные размеры, например 300х300 без обрезки, вместо 0.
• Проблемы с производительностью при загрузке оригинальных больших изображений: отключение масштабирования ведет к загрузке тяжелых файлов. Оптимизируйте исходные картинки.

Практические советы по безопасности и производительности

• Перед удалением размеров сделайте резервную копию медиафайлов.
• Используйте оптимизацию изображений (например, через плагин Smush или Imagify) вместе с отключением масштабирования.
• Если нужно оставить масштабирование, настройте размеры под дизайн сайта, чтобы избежать лишнего веса страниц.
• Следите за тем, чтобы не создавать слишком большие загружаемые файлы — это влияет на скорость и SEO.

Сравнение вариантов отключения масштабирования WooCommerce