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

Диагностика проблемы: почему изображения товаров в WooCommerce искажаются?

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

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

Пошаговое решение: как отключить масштабирование и сохранить пропорции

1. Проверяем размеры изображений в WooCommerce

Перейдите в Консоль WordPress > WooCommerce > Настройки > Продукты > Отображение (для WooCommerce версии до 3.3) или Консоль > Внешний вид > Настройки > Медиафайлы (в новых версиях) и посмотрите, какие размеры заданы для изображений каталога, миниатюр и полноразмерных изображений.

2. Отключаем автоматическую обрезку изображений

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

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

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

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

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

3. Перегенерируем миниатюры

После внесения изменений важно обновить миниатюры, чтобы новые настройки применились. Используйте плагин Regenerate Thumbnails или выполните с сервера команду WP-CLI:

wp media regenerate --yes

Это пересоздаст все миниатюры с учетом новых параметров.

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

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

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

• Изображения остаются искаженными: Проверьте, не активированы ли в теме стили CSS, которые задают фиксированные размеры с object-fit или width/height. Их нужно скорректировать.
• Миниатюры не обновились: Забудьте перегенерировать миниатюры после изменения настроек — это обязательный шаг.
• Кэш браузера или плагина мешает видеть изменения: Очистите кеш сайта и браузера.
• Конфликт с плагинами оптимизации изображений: Отключите плагины типа Smush, EWWW, ShortPixel и проверьте результат без них.

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

• Если вы отключаете масштабирование, убедитесь, что загружаемые изображения изначально оптимизированы по размеру и весу (например, 1200x1200 px, сжатые через TinyPNG или подобные сервисы).
• Используйте lazy load для изображений товаров, чтобы не нагружать страницу сразу большим количеством тяжелых файлов.
• При использовании Regenerate Thumbnails запускайте процесс в часы с минимальной нагрузкой на сервер, чтобы избежать подвисания сайта.
• Регулярно обновляйте WooCommerce и тему, чтобы избежать проблем с несовместимостью обработчиков изображений.

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