Rozmiary zdjęć produktów w WooCommerce: trzy rozmiary i jak je naprawdę zmienić

WooCommerce generuje trzy rozmiary dla każdego wysłanego zdjęcia produktu, a tylko dwa z nich da się edytować w kokpicie WordPressa. woocommerce_thumbnail to zdjęcie w siatce katalogu, woocommerce_single to duże zdjęcie na stronie produktu, a woocommerce_gallery_thumbnail to pasek małych miniatur pod nim. Zmieniasz je w Wygląd > Dostosuj > WooCommerce > Zdjęcia produktów — a jeśli w tym panelu widzisz listę kadrowania, ale nie widzisz pól szerokości, Twój szablon celowo zablokował szerokości w kodzie.

Trzy rozmiary

Nazwa rozmiaru	Gdzie się pojawia	Kadrowanie	Edytowalne w personalizatorze
woocommerce_thumbnail	Strona sklepu, siatki kategorii, produkty powiązane, cross-selle	Domyślnie twarde kadrowanie do kwadratu	Szerokość i proporcje
woocommerce_single	Główne zdjęcie na stronie pojedynczego produktu	Bez kadrowania — oryginalne proporcje zachowane	Tylko szerokość
woocommerce_gallery_thumbnail	Pasek pod głównym zdjęciem produktu	Twardo kadrowany kwadrat	Nie

Te rozmiary dochodzą do standardowych rozmiarów WordPressa. Jedno zdjęcie produktu zwykle wygeneruje thumbnail, medium, medium_large, large, trzy rozmiary WooCommerce oraz ewentualne dodatkowe rozmiary zarejestrowane przez szablon przez add_image_size. To sporo plików na jedną wysyłkę i właśnie dlatego import 300 produktów trwa tak długo.

Miniatura galerii zaskakuje ludzi najbardziej: nie ma dla niej żadnej kontrolki w kokpicie. Na domyślnej instalacji jest to mały kwadrat, historycznie 100px, i to właśnie ona najczęściej wygląda miękko na ekranie retina, bo fizyczny plik jest naprawdę malutki.

Gdzie te ustawienia faktycznie siedzą

Wygląd > Dostosuj > WooCommerce > Zdjęcia produktów daje Ci trzy kontrolki:

• Szerokość zdjęcia głównego — szerokość woocommerce_single. Wysokość jest wyliczana automatycznie, więc oryginalne proporcje zostają zachowane.
• Szerokość miniatury — szerokość woocommerce_thumbnail.
• Kadrowanie miniatury — 1:1 (kwadrat, domyślnie), Własne (wpisujesz proporcje w rodzaju 4:3) albo Bez kadrowania.

Zwróć uwagę, czego brakuje: nie ma pola wysokości dla miniatury katalogu, bo wysokość wynika z proporcji kadrowania. I nie ma zupełnie nic dla miniatury galerii.

Zanim cokolwiek zmienisz, warto zobaczyć, jakie dokładnie warianty powstaną z danego pliku — wrzuć prawdziwe zdjęcie produktu do narzędzia do rozmiarów obrazków WordPress, a dostaniesz pełną listę razem z informacją, czy Twoje źródło jest wystarczająco duże, żeby wypełnić każdy rozmiar bez powiększania.

Dlaczego zdjęcia w katalogu wyglądają źle

Miniatura katalogu kadruje twardo do kwadratu. Twarde kadrowanie oznacza, że WooCommerce wycina ze zdjęcia kwadrat ze środka, a resztę wyrzuca — nie dokłada pasów i nie ściska obrazu. Zdjęcie produktu 2000x1200 staje się wycinkiem 1200x1200 wziętym ze środka, a potem jest pomniejszane.

To działa dobrze przy butelce sfotografowanej dokładnie centralnie, z marginesem dookoła. To katastrofa przy:

• Długich produktach (narty, kable, karnisze) — widzisz środkową jedną trzecią i nic poza tym
• Kompozycjach poza środkiem — produkt ucieka do krawędzi kadru i zostaje przecięty
• Zdjęciach, na których przedmiot wypełnia kadr od krawędzi do krawędzi — góra i dół zostają ucięte
• Ujęciach lifestyle’owych z produktem w rogu

Popularna rada brzmi: „przełącz kadrowanie na bez kadrowania”. To działa, ale bądźmy szczerzy co do ceny: brak kadrowania oznacza, że każda miniatura zachowuje własne proporcje, więc siatka ze zdjęciami o różnej orientacji staje się wizualnie poszarpana, a rzędy przestają się równać, chyba że CSS Twojego szablonu radzi sobie ze zmienną wysokością. Większość szablonów zakłada kwadraty.

Lepsze rozwiązanie, jeśli możesz sobie na nie pozwolić, leży u źródła: ujednolić zdjęcia produktów do kwadratu, z przedmiotem na środku i równym marginesem. Wtedy kwadratowe twarde kadrowanie nic nie zmienia, a wszystko dalej jest przewidywalne. Zmiana ustawienia kadrowania to obejście; spójne pliki źródłowe to prawdziwe rozwiązanie.

Kiedy szablon blokuje szerokości

Jeśli panel Zdjęcia produktów oferuje tylko kadrowanie, Twój szablon zadeklarował stałe szerokości przy rejestrowaniu wsparcia dla WooCommerce:

add_theme_support( 'woocommerce', array(
    'single_image_width'    => 800,
    'thumbnail_image_width' => 400,
) );

Kiedy szablon przekaże te wartości, WooCommerce usuwa kontrolki szerokości z personalizatora i zostawia same proporcje. To nie jest błąd ani złośliwość szablonu — jego arkusze stylów dla strony produktu są zbudowane wokół dokładnie tych szerokości w pikselach, a możliwość ich zmiany rozwaliłaby siatkę.

Możesz je nadpisać z pliku functions.php motywu potomnego, korzystając z filtra dla konkretnego rozmiaru:

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;
} );

Ten sam wzorzec działa dla woocommerce_get_image_size_thumbnail. To także jedyny sposób na zmianę miniatury galerii, bo nie ma ona żadnego interfejsu.

Prawdziwy koszt, powiedziany wprost: nadpisanie zablokowanej szerokości sprawia, że plik generowany przez WooCommerce przestaje pasować do tego, czego oczekuje CSS szablonu. Zwykle obrazek po prostu skaluje się w przeglądarce i wygląda dobrze, bo jest teraz większy niż kontener. Czasem szablon ma kontener o stałej wysokości i dostajesz pasy albo wylewanie się poza obszar. Przetestuj to na jednym produkcie, zanim zregenerujesz 2000.

Zmiana rozmiarów oznacza regenerację

Każde ustawienie rozmiaru wpływa wyłącznie na nowe wysyłki. Istniejące produkty nadal serwują pliki wygenerowane w momencie ich wysłania, więc nic widocznego się nie zmieni, dopóki ich nie odbudujesz.

WooCommerce uruchamia regenerację w tle, gdy zapiszesz personalizator. Przy małym katalogu to wystarczy. Przy dużym zależy to od niezawodnego działania WP-Cron, co w sklepie o małym ruchu często zawodzi, i kończy się biblioteką zregenerowaną w połowie. Uruchom to sam:

wp media regenerate --yes

Żeby odbudować tylko zdjęcia produktów:

wp media regenerate --yes --post_type=product

Jeśli chcesz na czas ręcznej pracy pozbyć się zadania działającego w tle:

add_filter( 'woocommerce_background_image_regeneration', '__return_false' );

Dwie rzeczy, których regeneracja nie zrobi. Nie usuwa starych plików — Twój katalog uploads zachowa każdy osierocony wariant z poprzednich ustawień i będzie rósł. I nie stworzy rozmiaru większego niż źródło, bo WordPress nie powiększa. Jeśli ustawisz szerokość zdjęcia głównego na 1200, a zdjęcia produktów mają 800px szerokości, plik 1200px nie powstanie; przeglądarka dostanie plik 800px i go rozciągnie, a srcset nie ma nic lepszego do zaoferowania.

Jaki rozmiar naprawdę wysyłać

Celuj w kwadratowe pliki źródłowe o mniej więcej dwukrotności największej ustawionej szerokości — 1200x1200 przy zdjęciu głównym 600px, 1600x1600, jeśli Twój szablon używa 800px. To pokrywa ekrany retina o podwójnej gęstości i daje WordPressowi dość pikseli, żeby zbudować każdy wariant bez powiększania. Trzymaj wszystkie produkty w tych samych wymiarach, żeby siatka pozostała równa.

Nadal nie działa?

Jeśli rozmiary są ustawione poprawnie, regeneracja przeszła, a produkt nadal wygląda źle, otwórz obrazek w nowej karcie i przeczytaj nazwę pliku. Końcówka z wymiarami, która nie pasuje do żadnego skonfigurowanego rozmiaru, oznacza, że zarejestrowało go coś innego. Brak jakiejkolwiek końcówki oznacza, że WooCommerce wrócił do pliku w pełnym rozmiarze, a to prawie zawsze znaczy, że źródło było za małe na rozmiar, o który poprosiłeś. Przepuść ten plik źródłowy przez narzędzie do rozmiarów obrazków i porównaj to, co WordPress powinien wygenerować, z tym, co przeglądarka faktycznie pobrała — gdy te dwie rzeczy się nie zgadzają, pomiędzy nimi zwykle siedzi wtyczka optymalizująca albo skalowanie obrazków po stronie CDN.