Galeria produktu WooCommerce: zoom, lightbox i wideo

Przy produktach kupowanych wyglądem galeria jest witryną sklepu. Klient ocenia dopasowanie, jakość i detal ze zdjęć na długo przed przeczytaniem choćby słowa opisu, a słaba galeria po cichu kosztuje sprzedaż i zachęca do zwrotów. WooCommerce dostarcza galerię od ręki i ona działa, ale jest celowo podstawowa: pasek miniatur, prosty lightbox i efekt powiększenia oparty na starszych skryptach. Ten przewodnik wyjaśnia, co galeria produktu realnie robi dla konwersji, czego potrzebuje dobre jej ulepszenie i jak darmowa wtyczka Reel dodaje powiększenie, dostępny lightbox i wideo do galerii WooCommerce bez spowalniania strony i bez przesuwania układu.

Do czego służy galeria produktu

Galeria to część karty produktu, która wykonuje pracę sklepu stacjonarnego. W sklepie klient bierze przedmiot do ręki, obraca go, ogląda pod światło, sprawdza szwy. Online galeria musi to wszystko zastąpić. Jej zadaniem jest odpowiedzieć na pytania, które klient zadałby, gdyby trzymał produkt w rękach: jak wygląda faktura z bliska, jak duży jest naprawdę, jak się rusza lub układa, jak prezentuje się od tyłu. Gdy galeria dobrze na to odpowiada, dzieją się dwie rzeczy naraz. Więcej klientów kupuje, bo ich wątpliwości znikają, zanim pojawi się niepewność. I mniej osób zwraca towar, bo to, co przyszło, zgadzało się z oczekiwaniami.

Ten drugi efekt łatwo niedocenić. Zwrot to nie tylko refundacja: to koszt przesyłki zwrotnej, ponowne przyjęcie na stan, wątek do obsługi i klient, który teraz rzadziej zamówi ponownie. Galeria pozwalająca obejrzeć detal przed zakupem to jeden z najtańszych sposobów ograniczenia zwrotów wynikających z niedopasowanych oczekiwań, bo to niedopasowanie po prostu nie powstaje.

Uwaga: Galeria pozwalająca klientom obejrzeć detal przed zakupem działa podwójnie: podnosi konwersję i ogranicza zwroty wynikające z niedopasowanych oczekiwań, bo to niedopasowanie w ogóle nie powstaje.

Dlaczego domyślna galeria zostawia pieniądze na stole

Galeria z rdzenia WooCommerce jest w porządku jako punkt wyjścia. Pokazuje wyróżnione zdjęcie, rząd miniatur i lightbox otwierany kliknięciem, a w większości motywów główne zdjęcie powiększa się przy najechaniu. Problem w tym, że na tym się kończy, a po drodze nieco waży.

Powiększenie przy najechaniu i lightbox są zbudowane na starszych skryptach front-endu, w tym jQuery i kilku dołączonych bibliotekach, co dokłada JavaScriptu do strony. Lightbox jest użyteczny, ale prosty, a na jego zachowanie z klawiatury nie można polegać między różnymi motywami. Nie ma żadnej natywnej obsługi wideo produktu, więc najbardziej przekonujący element mediów dla wielu produktów nie ma miejsca w galerii. A że galeria siedzi na samej górze karty produktu, wszystko, co robi źle, przeskoki układu podczas ładowania zdjęć czy ciężki skrypt blokujący interakcję, ląduje wprost na pierwszym wrażeniu i wyniku Core Web Vitals.

Ostrzeżenie: Galeria siedzi na samej górze karty produktu, więc każdy przeskok układu podczas ładowania zdjęć czy ciężki skrypt blokujący interakcję ląduje wprost na pierwszym wrażeniu i wyniku Core Web Vitals.

Szansa nie polega więc na wymianie galerii. Polega na ulepszeniu trzech rzeczy, które realnie poruszają wskaźniki, a przy tym uczynieniu galerii lżejszą, a nie cięższą.

Trzy ulepszenia, które robią różnicę

Przy produkcie wizualnym trzy dodatki regularnie zasługują na swoje miejsce.

Powiększenie zdjęć. Pozwolenie klientowi powiększyć zdjęcie przy najechaniu, żeby przyjrzał się fakturze, szwom, słojom czy wykończeniu, ujawnia detal, który miniatura ukrywa. Przy wszystkim, gdzie jakość da się zobaczyć, buduje to pewność zakupu wprost. Kluczowy szczegół: powiększenie powinno zostawać wewnątrz ramki galerii, a nie rozlewać się na resztę strony i przesuwać układ.

Dostępny lightbox. Otwarcie zdjęć na pełnym ekranie pozwala obejrzeć je porządnie, zamiast mrużyć oczy nad miniaturą. Słowo “dostępny” jest tu nośne: lightbox powinien otwierać się i zamykać z klawiatury, utrzymywać fokus tam, gdzie należy, dopóki jest otwarty, i czysto przywracać fokus po zamknięciu, żeby działał dla użytkowników klawiatury i czytników ekranu, nie tylko dla osób z myszką.

Uwaga: Przy lightboxie słowo “dostępny” jest nośne: powinien otwierać się i zamykać z klawiatury, zatrzymywać fokus, gdy jest otwarty, i czysto przywracać go po zamknięciu, żeby służył także użytkownikom klawiatury i czytników ekranu.

Wideo produktu. Krótki film pokazuje skalę, ruch i realne użycie w sposób, którego zdjęcia nie oddadzą, czy to układ tkaniny, gadżet w działaniu, czy mebel zestawiony obok człowieka dla skali. Wyróżnione wideo w obszarze galerii to jeden z dodatków o największym wpływie przy każdym zakupie przemyślanym.

Reel dla WooCommerce dodaje dokładnie te trzy rzeczy: powiększenie przy najechaniu, dostępny lightbox i wyróżnione wideo produktu.

Czego potrzebuje dobre ulepszenie galerii

Niezależnie od tego, czy budujesz, kupujesz, czy instalujesz, narzędzie galerii dla WooCommerce powinno przejść krótką listę kontrolną:

• Ulepszaj, nie zastępuj. Powinno bazować na istniejącej galerii WooCommerce, żeby Twoje zdjęcia, miniatury i stylowanie motywu dalej działały, zamiast podstawiać równoległą galerię, którą musisz utrzymywać.
• Bez przeskoków układu. Każdy element mediów powinien zarezerwować swoje miejsce przed wczytaniem, żeby nic nie skakało, gdy strona się układa. To największe pojedyncze ryzyko galerii dla Core Web Vitals.
• Lekki ślad. Nowoczesna interakcja nie potrzebuje jQuery. Mały, odroczony skrypt wczytywany tylko tam, gdzie jest używany, utrzymuje kartę produktu szybką.
• Realna dostępność. Obsługa klawiatury i poprawne zarządzanie fokusem w lightboxie, a nie tylko warstwa działająca wyłącznie pod myszkę.
• Rozsądna kontrola. Niezależne przełączniki włącz/wyłącz dla każdej funkcji, żeby uruchamiać tylko to, czego wymaga Twój katalog.
• Czyste zachowanie. Skrypty wczytywane tylko na kartach produktów, łatwo dostępne ustawienia i czysta deinstalacja, która nie zostawia śmieci.

Zwróć uwagę, czego na tej liście nie ma: ciężkiego, robiącego wszystko slidera, który przebudowuje Twój motyw. Celem jest ostrzejsza wersja galerii, którą już masz, a nie druga galeria doczepiona na wierzchu.

Jak radzi sobie z tym Reel

Reel to darmowa, otwarta wtyczka, która ulepsza istniejącą galerię pojedynczego produktu WooCommerce, zamiast ją zastępować. Znaczniki są budowane w PHP i progresywnie wzbogacane jednym plikiem czystego JavaScriptu, odroczonym i wczytywanym w stopce, a skrypty i style są kolejkowane tylko na stronie pojedynczego produktu. Nie ma jQuery. Każda z trzech funkcji ma własny przełącznik włącz/wyłącz, więc uruchamiasz tylko to, czego potrzebujesz.

Galeria produktu Reel na stronie sklepu, z powiększeniem przy najechaniu i dostępnym lightboxem na głównym zdjęciu produktu.

Powiększenie przy najechaniu

Zdjęcia galerii powiększają się przy najechaniu w skali, którą wybierasz, w zakresie od 1.0x do 3.0x. Transformacja jest przycięta do ramki galerii, więc powiększanie zdjęcia nigdy nie przesuwa reszty strony. Ponieważ najechanie jest zawodne na ekranach dotykowych, jest opcja pominięcia powiększenia na urządzeniach dotykowych, żeby klienci na telefonach i tabletach nie walczyli z efektem, który nigdy nie był dla nich przeznaczony.

Dostępny lightbox

Kliknij dowolne zdjęcie galerii albo naciśnij na nim Enter lub Spacja, żeby otworzyć je na pełnym ekranie. Lightbox jest naprawdę obsługiwalny z klawiatury: Tab zostaje na przycisku zamknięcia, więc fokus nie zsunie się pod warstwę, Escape go zamyka (podobnie jak kliknięcie w tło), a fokus wraca do zdjęcia, które otworzyłeś. To stała warstwa, która startuje ukryta, więc nie rezerwuje miejsca i nie dokłada przeskoku układu, dopóki klient faktycznie jej nie otworzy. Możesz pokazać w lightboxie podpis zaczerpnięty z tekstu alternatywnego zdjęcia oraz przemianować dla czytników ekranu kontrolkę otwierania zdjęcia, żeby zapowiadała coś sensownego.

Wyróżnione wideo

Reel pokazuje wideo per produkt po galerii albo przed podsumowaniem produktu, do wyboru. Źródłem może być plik na własnym serwerze (MP4, M4V, WebM lub OGV), odtwarzany natywnym odtwarzaczem wideo WordPressa, albo dowolny adres oEmbed, taki jak YouTube czy Vimeo, który rdzeń WordPressa osadza automatycznie. W obu przypadkach wideo siedzi w ramce 16:9 wymiarowanej właściwością CSS aspect-ratio, więc jego miejsce jest trzymane przed wczytaniem i strona nie skacze. Adres wideo per produkt mieszka w polu meta produktu _reel_video_url, z opcjonalnym _reel_video_title na nagłówek tego produktu. Jeśli chcesz umieścić wideo gdzieś poza obszarem galerii, kod skrócony [reel_video] (przyjmuje atrybuty id i title) albo blok “Reel: Featured video” wyrenderuje wideo bieżącego produktu, w tej samej ramce 16:9, w dowolnym miejscu treści produktu.

Z założenia Reel nie wykonuje żadnych własnych wywołań API ani żądań analitycznych. Jedyne żądanie wychodzące to to, które wykonuje sam rdzeń WordPressa przez wp_oembed_get(), gdy skierujesz wideo na YouTube, Vimeo lub innego dostawcę oEmbed, a Reel buforuje wynik w transiencie, żeby uniknąć ponownych pobrań. Wideo na własnym serwerze nie wykonuje żadnego żądania zewnętrznego.

Konfiguracja

Uruchomienie Reela zajmuje kilka minut:

1. Zainstaluj wtyczkę z Wtyczki, Dodaj nową albo wgraj ją do /wp-content/plugins/reel. WooCommerce musi być zainstalowany i aktywny.
2. Aktywuj ją.
3. Otwórz menu najwyższego poziomu Reel i włącz funkcje, których chcesz. Każda z trzech ma własny przełącznik.
4. Dla powiększenia przy najechaniu ustaw skalę i zdecyduj, czy pominąć je na urządzeniach dotykowych. Dla lightboxa opcjonalnie włącz podpis z tekstu alternatywnego i dostosuj etykietę otwierania zdjęcia. Dla wideo wybierz pozycję, autoodtwarzanie, nagłówek i tekst wprowadzający.
5. Żeby nadać produktowi wideo, ustaw jego adres w polu meta produktu _reel_video_url (PRO dodaje przyjaźniejsze pole edytora do tego, opisane niżej).

Ekran ustawień korzysta z układu kart z przełącznikami, podpowiedziami pomocy w linii i podglądem siły powiększenia na żywo, więc widzisz, co robi każda opcja, gdy ją ustawiasz. Stylowanie witryny opiera się na motywowalnych właściwościach niestandardowych CSS z płynnym wymiarowaniem, obsługą trybu ciemnego i zabezpieczeniami dla ograniczonego ruchu, więc galeria czuje się jak u siebie w Twoim motywie bez dodatkowej pracy. Reel jest zgodny z HPOS oraz blokami koszyka i zamówienia, gotowy do tłumaczenia z dołączonym plikiem POT i polskim tłumaczeniem, a przy deinstalacji w całości usuwa swoje opcje.

Ekran ustawień Reela w panelu WordPressa, z przełącznikami dla każdej funkcji i podglądem siły powiększenia na żywo.

Praktyczne wskazówki dla galerii, która konwertuje

Wtyczka daje mechanizm. Kilka nawyków pozwala wykorzystać go najlepiej:

• Fotografuj pod powiększenie. Powiększenie przy najechaniu pomaga tylko wtedy, gdy zdjęcie źródłowe jest na tyle duże i ostre, że to wynagrodzi. Wgrywaj zdjęcia w wysokiej rozdzielczości, żeby powiększenie ujawniało realny detal, a nie miękkie piksele.

Wskazówka: Powiększenie przy najechaniu opłaca się tylko wtedy, gdy zdjęcie źródłowe jest na tyle duże i ostre, że to wynagrodzi. Wgrywaj zdjęcia w wysokiej rozdzielczości, żeby powiększenie ujawniało realny detal, a nie miękkie piksele.

• Zacznij od pytania, które zadaje klient. Ułóż galerię tak, by pierwsze zdjęcia odpowiadały na największą wątpliwość, skalę, dopasowanie, tył przedmiotu, a ujęcie reklamowe zostaw na nadanie tonu.
• Trzymaj wideo krótkie i użyteczne. Klip na dziesięć do dwudziestu sekund pokazujący produkt w użyciu lub w ruchu bije dwuminutowy film wizerunkowy, którego nikt nie ogląda do końca. Stosuj wideo tam, gdzie ruch lub skala faktycznie coś wnoszą.
• Pamiętaj o użytkownikach dotyku. Powiększenie przy najechaniu należy do użytkowników myszki; opcja pominięcia na dotyku istnieje po to, by klienci na telefonach dostali czysty lightbox. Zostaw ją włączoną, chyba że masz powód, by tego nie robić.
• Chroń pierwsze malowanie. Ponieważ galeria siedzi na górze strony, trzymaj wyróżnione zdjęcie dobrze zoptymalizowane i pozwól znacznikom z zarezerwowanym miejscem wykonać swoją robotę, żeby strona układała się bez skoków.

Reel a domyślne WooCommerce

Galeria z rdzenia to punkt wyjścia; Reel zaostrza części, które sprzedają. Oto różnica konkretnie dla galerii:

Funkcja	Domyślne WooCommerce	Reel
Powiększenie zdjęć	Podstawowe	Powiększenie przy najechaniu, skala 1.0x do 3.0x, do pominięcia na dotyku
Lightbox	Podstawowy	Dostępny: otwieranie i zamykanie z klawiatury, pułapka i powrót fokusu
Wideo produktu	Brak natywnej obsługi	Wyróżnione wideo w galerii, własny serwer lub oEmbed
Wideo w dowolnym miejscu	Nie dotyczy	Kod skrócony [reel_video] i blok
Stabilność układu	Starsze skrypty	Zarezerwowane miejsce, bez przeskoków
Ślad	Wymaga jQuery	Jeden odroczony plik czystego JS, bez jQuery, tylko karty produktów
Kontrola per funkcja	Nie dotyczy	Niezależny przełącznik dla każdej
Galerie per wariant, obrót 360	Nie	Tak (dodatek PRO)
Koszt	Za darmo (rdzeń)	Za darmo (GPL); dodatek PRO rozszerza

Free a PRO

Darmowa wtyczka Reel jest pełnym ulepszeniem sama w sobie: powiększenie przy najechaniu, dostępny lightbox i wyróżnione wideo produktu, wszystko z zarezerwowanym miejscem i bez jQuery. To nie jest zajawka.

Reel Pro to osobny dodatek, który wymaga zainstalowanej i aktywnej darmowej wtyczki, i jest dostarczany przez Freemius, a nie przez katalog WordPress.org. Rozszerza darmową wtyczkę dla sklepów o bogatszych potrzebach medialnych. PRO dodaje zakładkę Reel w edytorze produktu z porządnym polem adresu wideo i statusem “wideo wykryte” na żywo, więc ustawiasz wideo produktu bez ręcznego dotykania pól meta. Dodaje galerie per wariant, gdzie główne zdjęcie galerii podmienia się na własne zdjęcia wariantu w chwili, gdy klient go wybierze, dzięki maleńkiemu skryptowi bez zależności, który ładuje z wyprzedzeniem, żeby uniknąć mignięcia, i trzyma swoje pole, żeby uniknąć przeskoku układu. Dodaje obrót 360 stopni, uporządkowaną sekwencję klatek, którą klient może przeciągać, przesuwać palcem lub przewijać strzałkami w przeglądarce o zarezerwowanych proporcjach. Dodaje reguły autoodtwarzania wideo, które mogą czekać, aż wideo będzie w widoku, blokować autoodtwarzanie na mobile i respektować preferencje ograniczonego ruchu. I dodaje media z CDN i leniwe ładowanie, przepisując adresy plików na origin CDN dla klatek obrotu i galerii wariantów oraz odraczając cięższe media, dopóki nie znajdą się w widoku. Darmowa edycja pokrywa powiększenie, lightbox i wideo od początku do końca; PRO jest dla katalogów, które potrzebują mediów per wariant, obrotu albo dokładniejszej kontroli nad tym, jak te media się ładują.

W skrócie

Przy produktach wizualnych to galeria sprzedaje, więc warta jest więcej niż domyślny punkt wyjścia. Trzy ulepszenia, które robią różnicę, to powiększenie zdjęć, dostępny lightbox i wyróżnione wideo produktu, ale tylko jeśli dodane z zarezerwowanym miejscem i bez jQuery, żeby strona pozostała szybka i stabilna na samej górze, gdzie żyją pierwsze wrażenia i Core Web Vitals. Darmowa wtyczka Reel wzbogaca istniejącą galerię WooCommerce o wszystkie trzy, każde z osobna przełączalne, bez żadnych własnych wywołań zewnętrznych. Zacznij od niej i dodaj galerie per wariant, obrót 360 oraz kontrolę autoodtwarzania lub CDN z dodatku PRO, gdy katalog tego zawoła.