Na li\u015bcie produkt\u00f3w klienci podejmuj\u0105 wi\u0119kszo\u015b\u0107 decyzji. Je\u015bli uk\u0142ad jest chaotyczny, zdj\u0119cia nie m\u00f3wi\u0105 prawdy, a filtry m\u0119cz\u0105, ludzie po prostu wracaj\u0105 do wyszukiwarki. Z perspektywy w\u0142a\u015bciciela to tak\u017ce wi\u0119cej pyta\u0144 do obs\u0142ugi, d\u0142u\u017csze kompletowanie zam\u00f3wie\u0144 i niepotrzebne zwroty.<\/p>\n
WooCommerce to nie tylko silnik. To te\u017c spos\u00f3b pokazania oferty, wygoda zakupu, p\u0142atno\u015bci, dostawy, maile transakcyjne, UX i codzienna praca z zam\u00f3wieniami. Dobrze pouk\u0142adana lista produkt\u00f3w skraca drog\u0119 do koszyka, zmniejsza liczb\u0119 w\u0105tpliwo\u015bci i porz\u0105dkuje procesy po Twojej stronie.<\/p>\n
Ustal prosty, powtarzalny wz\u00f3r karty produktu. Na komputerze zwykle sprawdzaj\u0105 si\u0119 trzy albo cztery kolumny, na tablecie dwie, a na telefonie jedna. Ka\u017cda karta powinna mie\u0107 t\u0119 sam\u0105 kolejno\u015b\u0107 element\u00f3w zdj\u0119cie, nazwa, cena, przycisk i ewentualna etykieta. Dzi\u0119ki temu oko szybko wyszukuje to co wa\u017cne.<\/p>\n
Ogranicz nadmiar tre\u015bci na li\u015bcie. Zrezygnuj z d\u0142ugich zajawki opis\u00f3w, nie mieszaj r\u00f3\u017cnych wysoko\u015bci kart. Je\u015bli tytu\u0142y s\u0105 bardzo d\u0142ugie, ustal prost\u0105 zasad\u0119 skracania i ko\u0144cz wielokropkiem. Cena musi by\u0107 zawsze widoczna i w tym samym miejscu. Oceny gwiazdkowe pokazuj tylko tam gdzie masz ich naprawd\u0119 sporo, inaczej wprowadzaj\u0105 szum.<\/p>\n
Du\u017c\u0105 r\u00f3\u017cnic\u0119 robi klikalna przestrze\u0144. Je\u015bli to mo\u017cliwe, ca\u0142a karta powinna prowadzi\u0107 do produktu, a przycisk dodaj do koszyka dzia\u0142a\u0107 niezale\u017cnie. To ogranicza nietrafione klikni\u0119cia i irytacj\u0119. Pami\u0119taj te\u017c o kontrastach i wielko\u015bci czcionek, zw\u0142aszcza na telefonach.<\/p>\n
Ustal jeden format zdj\u0119\u0107 pionowy, poziomy albo kwadrat i trzymaj si\u0119 go. R\u00f3\u017cne proporcje psuj\u0105 rytm siatki i rozbijaj\u0105 uwag\u0105. Pliki nie mog\u0105 by\u0107 ci\u0119\u017ckie, ale powinny by\u0107 ostre. Dobrze sprawdza si\u0119 jasne t\u0142o i kadr pokazuj\u0105cy produkt w ca\u0142o\u015bci, a dopiero w galerii detale.<\/p>\n
Drugi kadr po najechaniu kursorem bywa pomocny, o ile pokazuje co\u015b istotnego, na przyk\u0142ad ty\u0142 produktu albo jego u\u017cycie. Nie stosuj znak\u00f3w wodnych i agresywnych filtr\u00f3w, bo obni\u017caj\u0105 wiarygodno\u015b\u0107. Pomy\u015bl o opisach alternatywnych, czyli kr\u00f3tkich tekstach dla os\u00f3b korzystaj\u0105cych z czytnik\u00f3w ekranu.<\/p>\n
Nazwa ma jasno m\u00f3wi\u0107 co to jest, dla kogo i czym si\u0119 r\u00f3\u017cni od innych w tej kategorii. Cena powinna by\u0107 czytelna z informacj\u0105 czy zawiera VAT. Je\u015bli pokazujesz cen\u0119 od, niech faktycznie odpowiada najta\u0144szej dost\u0119pnej konfiguracji, a nie nieistniej\u0105cej wersji. Nie kombinuj z zapisem waluty ani separatorami, bo to spowalnia decyzj\u0119.<\/p>\n
Dla prostych produkt\u00f3w szybki przycisk dodaj do koszyka ma sens i cz\u0119sto skraca \u015bcie\u017ck\u0119. Daj jasny komunikat \u017ce produkt zosta\u0142 dodany oraz szybkie przej\u015bcie do koszyka albo mo\u017cliwo\u015b\u0107 dalszych zakup\u00f3w. Brak reakcji wizualnej po klikni\u0119ciu to cz\u0119sty pow\u00f3d ponownych klikni\u0119\u0107 i podw\u00f3jnych pozycji w koszyku.<\/p>\n
Przy produktach z wariantami od razu na li\u015bcie wymu\u015b wyb\u00f3r kluczowej opcji albo przenie\u015b do karty produktu. Dodawanie domy\u015blnego wariantu bez \u015bwiadomego wyboru ko\u0144czy si\u0119 zwrotami i reklamacjami. Nie zmuszaj te\u017c u\u017cytkownika do prze\u0142adowania strony po ka\u017cdym dodaniu, ma\u0142y panel koszyka w nag\u0142\u00f3wku w zupe\u0142no\u015bci wystarczy.<\/p>\n
Przy wyborze rozmiaru lub koloru wygodniejsze s\u0105 kafelki ni\u017c pola rozwijane. \u0141atwiej trafi\u0107 palcem, wida\u0107 ca\u0142\u0105 pul\u0119 opcji i nie trzeba zgadywa\u0107 co ju\u017c wybrano. W WooCommerce osi\u0105gniesz to po prostu dobrze definiuj\u0105c atrybuty i wybieraj\u0105c ich wizualn\u0105 prezentacj\u0119 w motywie lub prostym rozszerzeniu.<\/p>\n
Niedost\u0119pne opcje poka\u017c jako wyszarzone i nieklikalne zamiast chowa\u0107 ca\u0142kiem. To oszcz\u0119dza czas i zapobiega niepotrzebnym prze\u0142adowaniom. Unikaj automatycznego wybierania pierwszej opcji, bo klienci b\u0142\u0119dnie zak\u0142adaj\u0105 \u017ce to rekomendacja i z rozp\u0119du dodaj\u0105 z\u0142y wariant.<\/p>\n
Je\u015bli wariant\u00f3w jest bardzo du\u017co, nie przeno\u015b ca\u0142ej matrycy na list\u0119. Lepiej pozwoli\u0107 wybra\u0107 najwa\u017cniejszy parametr na li\u015bcie, a reszt\u0119 w karcie produktu. Dzi\u0119ki temu lista pozostaje lekka i szybka.<\/p>\n
Filtry maj\u0105 odzwierciedla\u0107 spos\u00f3b my\u015blenia klienta. Cena, rozmiar, kolor, kluczowe cechy plus kategoria wyj\u015bciowa zwykle wystarcz\u0105. Na telefonie filtr powinien otwiera\u0107 si\u0119 w czytelnym panelu, a przycisk zastosuj by\u0107 zawsze pod r\u0119k\u0105. Krzy\u017cyk do szybkiego wyczyszczenia filtr\u00f3w to drobiazg kt\u00f3ry realnie pomaga.<\/p>\n
Unikaj filtr\u00f3w kt\u00f3re cz\u0119sto zwracaj\u0105 pusty wynik. Warto pokazywa\u0107 liczby obok opcji, ale tylko je\u015bli s\u0105 aktualne. Dobrym wzorcem s\u0105 widoczne chipsy zastosowanych filtr\u00f3w nad list\u0105, wtedy \u0142atwo je usun\u0105\u0107 pojedynczo.<\/p>\n
Technicznie trzymaj atrybuty produkt\u00f3w w jednym systemie, najlepiej jako taksonomie WooCommerce, zamiast miesza\u0107 je z polami niestandardowymi. Dzi\u0119ki temu filtry dzia\u0142aj\u0105 szybciej i przewidywalnie, a lista nie d\u0142awi si\u0119 przy wi\u0119kszych zbiorach.<\/p>\n