Розміри зображень товарів 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. Це чимало файлів на одне завантаження — і саме тому імпорт 300 товарів триває так довго.

Мініатюра галереї — та, що зазвичай дивує: у неї взагалі немає жодного налаштування в адмінці. На типовому встановленні це маленький квадрат, історично 100px, і саме він найчастіше виглядає м’яко на retina-екрані, бо фізичний файл справді крихітний.

Де насправді живуть налаштування

Зовнішній вигляд > Налаштувати > 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. Це покриває retina-екрани з подвійною щільністю й дає WordPress достатньо пікселів, щоб побудувати кожну похідну без збільшення. Тримайте всі товари в однакових розмірах, щоб сітка лишалася рівною.

Досі не працює?

Якщо розміри налаштовані правильно, перегенерацію зроблено, а товар усе одно виглядає не так, відкрийте зображення в новій вкладці й подивіться на ім’я файлу. Суфікс із розмірами, який не відповідає жодному з налаштованих вами розмірів, означає, що його зареєстрував хтось інший. Відсутність суфікса взагалі означає, що WooCommerce відкотився до файлу повного розміру, а це майже завжди означає, що джерело було замалим для запитаного розміру. Прогоніть цей вихідний файл через інструмент розмірів зображень і порівняйте те, що WordPress мав би згенерувати, з тим, що браузер справді завантажив — коли ці дві речі не збігаються, між ними зазвичай стоїть плагін-оптимізатор або ресайзер зображень у CDN.