Как изменить размеры изображений товаров WooCommerce без плагинов

Почему важно корректно настроить размеры изображений в WooCommerce

Размеры изображений товаров напрямую влияют на скорость загрузки страниц, внешний вид витрины и конверсию. WooCommerce по умолчанию создает несколько вариантов изображений, но часто их размеров недостаточно или они не соответствуют дизайну. Использование плагинов для изменения размеров — распространённый путь, но он нагружает сайт и добавляет сложности. В этой статье разберём, как изменить размеры изображений WooCommerce с помощью кода в functions.php или в собственном плагине, без сторонних плагинов.

Диагностика текущих размеров изображений WooCommerce

Для начала нужно понять, какие размеры изображений используются сейчас и какие из них генерируются.

• Перейдите в Консоль WordPress > Медиафайлы > Добавить новый и загрузите изображение.
• Перейдите в WooCommerce > Настройки > Товары > Отображение (в новых версиях WooCommerce настройки изображений могут быть в Внешний вид > Настроить > WooCommerce > Изображения товаров).
• Обратите внимание на размеры миниатюр, каталога и одиночного товара.
• Проверьте, какие размеры изображений есть в базе данных через FTP или плагин «Regenerate Thumbnails» — какие размеры реально создаются.

После этого вы узнаете, какие размеры нужно изменить или добавить.

Пошаговое решение: изменение размеров изображений WooCommerce через код

Чтобы изменить размеры изображений, достаточно добавить в functions.php вашей темы (лучше дочерней) или в собственный плагин следующий код:

function wplab_custom_woocommerce_image_sizes() {
    // Размер миниатюры в каталоге товаров
    update_option( 'woocommerce_thumbnail_image_width', 300 ); // ширина в пикселях
    update_option( 'woocommerce_thumbnail_cropping', '1:1' ); // обрезка по квадрату (1:1), можно 'custom' или 'uncropped'

    // Размер изображения в каталоге
    update_option( 'woocommerce_single_image_width', 600 );

    // Размер миниатюры для галереи
    update_option( 'woocommerce_gallery_thumbnail_image_width', 100 );
}
add_action( 'after_setup_theme', 'wplab_custom_woocommerce_image_sizes', 20 );

Объяснение параметров:

• woocommerce_thumbnail_image_width — ширина миниатюры каталога
• woocommerce_thumbnail_cropping — тип обрезки: 1:1 (квадрат), custom (произвольное соотношение) или uncropped (без обрезки)
• woocommerce_single_image_width — ширина главного изображения товара
• woocommerce_gallery_thumbnail_image_width — ширина миниатюр в галерее товара

После внесения изменений нужно пересоздать миниатюры, иначе новые размеры не применятся.

Перегенерация миниатюр

Самый простой способ — использовать плагин Regenerate Thumbnails. После установки:

1. Перейдите в Инструменты > Regenerate Thumbnails
2. Нажмите кнопку «Regenerate All Thumbnails»

Если хотите сделать это без плагина, можно воспользоваться WP-CLI:

wp media regenerate --yes

Этот процесс создаст новые версии изображений согласно обновленным размерам.

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

Чтобы проверить, что размеры изменились и работают как надо:

• Откройте страницу товара на фронтенде, убедитесь, что изображения имеют желаемый размер и не растягиваются.
• В инспекторе браузера (DevTools) посмотрите реальные размеры загружаемых изображений (вкладка Network или Elements).
• Проверьте в wp-content/uploads наличие новых изображений с размерами, соответствующими настройкам.

Если изображения слишком маленькие или искажены, проверьте параметры обрезки.

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

• Изменение размеров без перегенерации миниатюр. Новые размеры не применятся без регенерации.
• Редактирование functions.php в родительской теме. При обновлении темы изменения потеряются. Используйте дочернюю тему или плагин.
• Использование некорректных значений для обрезки. Например, указание некорректных соотношений приведет к странному отображению.
• Кэширование изображений. Если используется плагин кэширования, очистите кеш после изменений.
• Недостаточные права на запись в папку uploads. Новые изображения не будут создаваться.

Практические советы по оптимизации изображений WooCommerce

• Используйте правильный формат. Для фотографий — JPEG, для логотипов и иконок — PNG или WebP.
• Включите поддержку WebP. WordPress 5.8+ поддерживает WebP, это уменьшит вес изображений.
• Минимизируйте размеры. Не делайте изображения слишком большими, чтобы не замедлять загрузку.
• Lazy load. Используйте встроенный в WP lazy load для изображений, чтобы ускорить показ страницы.
• Кэшируйте изображения на CDN. Для сайтов с большой аудиторией используйте CDN (например Cloudflare) для быстрой отдачи.

Сравнение способов изменения размеров изображений WooCommerce