Zdjęcie główne produktu WooCommerce i kolejność galerii: krótka instrukcja
Zdjęcie główne produktu WooCommerce ustawiasz w edycji produktu, w prawej kolumnie, w polu Zdjęcie produktu. To ono pokazuje się na liście produktów, w koszyku i jako pierwsze na karcie. Pozostałe zdjęcia dodajesz niżej, w polu Galeria produktu, a ich kolejność zmieniasz, przeciągając miniatury myszką.
Autor: Zespół TellMyShop. Piszemy o PrestaShop na podstawie pracy z zapleczem prawdziwych sklepów i testów na własnym sklepie testowym.
Aktualizacja: · 5 min czytania
Gdzie które zdjęcie się pokazuje?
Zdjęcie główne pracuje w większej liczbie miejsc niż galeria, dlatego warto wybierać je osobno, a nie brać pierwszego z sesji.
| Miejsce | Które zdjęcie | Na co uważać |
|---|---|---|
| lista produktów i kategorii | zdjęcie główne, przycięte do miniatury | domyślnie kwadrat, więc wysokie zdjęcia tracą górę i dół |
| karta produktu | zdjęcie główne, a pod nim galeria | kolejność galerii ustalasz ręcznie |
| koszyk i e-maile o zamówieniu | zdjęcie główne, mała miniatura | detal z bliska jest w koszyku nieczytelny |
| wybrany wariant | zdjęcie wariantu zamiast głównego | bez zdjęcia wariantu klient widzi zawsze główne |
| udostępnienie w mediach społecznościowych | zwykle zdjęcie główne, przez wtyczkę SEO | wtyczka SEO może mieć osobne pole na obraz |
| Google i plik produktowy | zdjęcie główne jako obraz produktu | ma pokazywać sam produkt, czytelnie |
WooCommerce opisuje trzy rozmiary zdjęć i ustawienia przycinania w dokumentacji o zdjęciach produktu i galeriach. Google w specyfikacji linku do zdjęcia produktu prosi, żeby główne zdjęcie wyraźnie pokazywało sprzedawany produkt, a inne ujęcia trafiały do zdjęć dodatkowych.
Jak zmienić zdjęcie główne i ułożyć galerię?
Jeden produkt zmienisz w panelu w kilka minut.
- Otwórz Produkty, Wszystkie produkty i wejdź w edycję produktu.
- W prawej kolumnie znajdź pole Zdjęcie produktu. Kliknij obecne zdjęcie albo link do jego ustawienia.
- Wybierz zdjęcie z biblioteki mediów albo wgraj nowe. Przy okazji wpisz tekst alternatywny, czyli krótki opis tego, co widać.
- Niżej, w polu Galeria produktu, dodaj kolejne zdjęcia. Kilka zaznaczysz naraz, trzymając Ctrl albo Cmd.
- Przeciągnij miniatury galerii w kolejności, w jakiej klient ma je oglądać.
- Kliknij Zaktualizuj i otwórz kartę w oknie prywatnym, żeby zobaczyć ją jak klient.
Kolejność galerii, która zwykle działa: produkt na białym tle, produkt w użyciu, detal (szew, faktura, zapięcie), skala albo wymiary, opakowanie. Pierwsze zdjęcie odpowiada na pytanie „co to jest”, kolejne na pytania, które klient zadałby w sklepie stacjonarnym.
Jakie zdjęcie wybrać na główne? Takie, które w małej miniaturze na liście nadal mówi, co to jest. Sam produkt, bez opakowania, na jasnym, spokojnym tle, w całości i wyśrodkowany. W całej kategorii trzymaj jeden kadr i jedną proporcję, bo lista z mieszanką zdjęć pionowych, poziomych i aranżacji wygląda na nieuporządkowaną. Zdjęcia z modelką, aranżacje i detale zostaw do galerii.
W produkcie zmiennym ustaw zdjęcie każdemu wariantowi, który wygląda inaczej, zwykle każdemu kolorowi. Otwórz zakładkę Warianty, rozwiń wariant i kliknij ikonę zdjęcia przy nim. Rozmiary tego samego koloru mogą mieć to samo zdjęcie.
Teksty alternatywne opisuj konkretnie: „czarna bluza z kapturem, widok z boku”, bez upychania fraz. Szerzej piszemy o tym we wpisie o tekście alternatywnym w WordPress, a Google w poradniku o SEO zdjęć.
Złe zdjęcie na liście, choć na karcie jest dobre?
Najczęściej winne jest przycinanie, pamięć podręczna albo wariant. Przejdź te trzy rzeczy po kolei.
- Przycinanie miniatur. W Wygląd, Dostosuj, WooCommerce, Zdjęcia produktów jest ustawienie proporcji miniatur. Kwadrat ucina zdjęcia pionowe. Po zmianie WooCommerce przelicza miniatury w tle, przy dużym katalogu trwa to chwilę.
- Pamięć podręczna. Wtyczka cache albo hosting może pokazywać starą listę. Sprawdź w oknie prywatnym, a jeśli trzeba, wyczyść cache. Więcej w tekście o tym, czemu w WordPress nie widać zmian.
- Wariant z własnym zdjęciem. W produkcie zmiennym zdjęcie wybranego wariantu zastępuje główne. Jeśli wariant ma stare zdjęcie, klient zobaczy stare zdjęcie.
Jeśli nie widać obrazka przy wpisach na blogu, to inny temat. Obrazek wyróżniający we wpisach opisujemy w osobnym tekście o obrazku wyróżniającym WordPress.
Jak zmienić zdjęcia w wielu produktach naraz?
Przy jednym produkcie panel wystarczy. Gdy dostawca przysłał nowe packshoty do 80 produktów albo po imporcie połowa katalogu ma zdjęcie opakowania jako główne, to wiele wieczorów klikania.
Wtyczka TellMyShop dla WordPress i WooCommerce łączy sklep z Claude'em. W darmowej wersji TellMyShop Free Claude znajdzie produkty bez zdjęcia głównego i zdjęcia bez tekstów alternatywnych i pokaże ich listę. Nic nie zapisuje.
W TellMyShop Pro Claude zmienia zdjęcia w paczkach do 50 produktów. Ustawia zdjęcie główne z biblioteki mediów albo z publicznego adresu, dodaje i usuwa zdjęcia galerii, układa jej kolejność i wpisuje teksty alternatywne. Dla wariantu ustawia jedno zdjęcie wariantu. Działa to od razu po aktywacji licencji, bez przełączników.
W kategorii Kubki zdjęciem głównym jest pudełko. Ustaw jako główne zdjęcie samego kubka, a pudełko daj na koniec galerii.
W kategorii Kubki są 24 produkty. W 19 pierwsze zdjęcie to pudełko, a kubek jest drugi w galerii. Próbka:
Kubek Emalia 350 ml
było: Zdjęcie główne: kubek-emalia-pudelko.jpg
będzie: Zdjęcie główne: kubek-emalia-bok.jpg
było: Galeria: kubek-emalia-bok.jpg, kubek-emalia-detal.jpg
będzie: Galeria: kubek-emalia-detal.jpg, kubek-emalia-pudelko.jpg
W 5 produktach nie ma zdjęcia samego kubka, tych nie ruszam.
Dobrze, zrób 19.
Przygotuję podgląd całej paczki. Zapiszę po twoim „tak”.
Liczby i nazwy plików w rozmowie są przykładowe. Każda paczka trafia do historii zmian. Cofnięcie przywraca przypisanie zdjęć i teksty alternatywne, a pliki pobrane z adresów zostają w bibliotece mediów. Większość zmian cofniesz jednym poleceniem.
Czego TellMyShop nie robi: nie robi zdjęć, nie poprawia ich w programie graficznym i nie zmienia proporcji miniatur w ustawieniach wyglądu. Przycinanie ustawisz sam, w kilku kliknięciach.
Zacznij od darmowej wersji TellMyShop Free, która znajdzie produkty bez zdjęć. Działa też z darmowym kontem Claude. Szczegóły są na stronie TellMyShop dla WordPress i WooCommerce, ceny Pro w cenniku. Jeśli dopiero zakładasz produkty, zacznij od wpisu o tym, jak dodać produkt w WooCommerce.
Pytania i odpowiedzi
Gdzie w WooCommerce zmienić zdjęcie główne produktu?
W edycji produktu, w prawej kolumnie, w polu Zdjęcie produktu. Kliknij obecne zdjęcie, wybierz inne z biblioteki mediów albo wgraj nowe i zaktualizuj produkt. Zdjęcie z tego pola pokazuje się na liście produktów, w koszyku i jako pierwsze na karcie.
Jak zmienić kolejność zdjęć w galerii produktu?
W polu Galeria produktu przeciągnij miniatury myszką w nowe miejsca i zaktualizuj produkt. Zdjęcie główne zawsze stoi przed galerią, więc żeby inne zdjęcie było pierwsze, ustaw je jako zdjęcie produktu.
Dlaczego miniatury na liście produktów są ucięte?
WooCommerce przycina zdjęcia na listach do jednej proporcji, domyślnie kwadratu. Proporcję zmienisz w Wygląd, Dostosuj, WooCommerce, Zdjęcia produktów. Gdy zdjęcia mają różne proporcje, najlepiej przygotować je od razu w jednym formacie.
Czy wariant produktu może mieć własne zdjęcie?
Tak, jedno zdjęcie na wariant. Ustawiasz je w zakładce Warianty, w ustawieniach danego wariantu. Gdy klient wybierze na przykład kolor czerwony, to zdjęcie zastąpi zdjęcie główne na karcie.
Czy Claude zmieni zdjęcia w wielu produktach naraz?
Tak, w TellMyShop Pro, do 50 produktów w jednej paczce i bez włączania przełączników. Ustawi zdjęcie główne, doda zdjęcia do galerii, ułoży ich kolejność i wpisze teksty alternatywne. Każdą paczkę widzisz w podglądzie przed zapisem.
WordPress jest znakiem towarowym WordPress Foundation. WooCommerce jest znakiem towarowym Automattic Inc. Claude jest znakiem towarowym Anthropic. TellMyShop nie jest powiązany z żadnym z tych podmiotów.