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

Проблема: неправильные размеры изображений товаров в WooCommerce

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

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

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

• woocommerce_thumbnail — миниатюры в каталоге и виджетах;
• woocommerce_single — изображения на странице отдельного товара;
• woocommerce_gallery_thumbnail — миниатюры в галерее товара.

Чтобы узнать текущие размеры, можно посмотреть настройки в панели администрирования WordPress в разделе Настройки > Медиафайлы или вывести размеры через PHP:

echo 'Thumbnail size: ' . get_option('woocommerce_thumbnail_image_width') . 'px';

Однако WooCommerce с версии 3.3 и выше рекомендует настраивать размеры через кастомный код и регенерацию миниатюр.

Пошаговое решение: изменение размеров изображений через functions.php и регенерация

1. Добавление кода в functions.php вашей темы (желательно дочерней)

Добавьте следующий код, чтобы переопределить размеры изображений WooCommerce:

function wplab_custom_woocommerce_image_sizes() {
    // Размер миниатюр в каталоге
    update_option('woocommerce_thumbnail_image_width', 300);
    // Размер основного изображения товара
    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);

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

2. Регенерация миниатюр

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

Самый простой способ — использовать плагин Regenerate Thumbnails. Но если вы хотите обойтись без плагинов, можно запустить WP-CLI команду:

wp media regenerate --yes

Для этого нужен доступ к SSH. Команда пересоздаст все миниатюры в соответствии с новыми размерами.

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

• Очистите кеш сайта и браузера.
• На странице каталога товаров убедитесь, что миниатюры соответствуют новым размерам (например, около 300px по ширине).
• На странице отдельного товара проверьте основное изображение — должно быть шириной около 600px.
• В инспекторе браузера убедитесь, что загружаемые изображения имеют соответствующие размеры.

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

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

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

• Добавляйте код только в дочернюю тему, чтобы не потерять изменения при обновлении.
• Регенерацию изображений запускайте в периоды низкой нагрузки сайта, так как процесс может быть ресурсоёмким.
• Используйте современный формат изображений (WebP) для ускорения загрузки.
• Ограничьте количество размеров изображений в настройках WordPress, чтобы не засорять сервер лишними копиями.

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