Przejdź do głównej zawartości

Korzystanie z przewodników rozmiarów

Ten przewodnik prowadzi od pustej instalacji do działającego przewodnika rozmiarów, a następnie wyjaśnia zachowanie na sklepie.

Otwórz WooCommerce → Przewodniki rozmiarów i utwórz pierwszą tabelę. Ułóż ją jako opisaną tabelę — rozmiary po boku, wymiary u góry. Ponieważ tabele są wielokrotnego użytku, zbuduj jedną tabelę na każdy sprzedawany system miar (na przykład „Góra dla dorosłych” i „Dół dla dorosłych”), a nie jedną na produkt.

Wybierz styl wyświetlania:

  • Modal utrzymuje kartę produktu czystą i otwiera tabelę na żądanie — najczęstszy wybór dla sklepów odzieżowych.
  • Zakładka produktu pasuje do sklepów, które wolą wszystko w treści, obok opisu i zakładki z informacjami dodatkowymi.

Dla modala wybierz też wyzwalacz (przycisk lub link tekstowy) i umiejscowienie (blisko przycisku dodania do koszyka jest najłatwiej zauważalne).

Dwa sposoby, możesz je łączyć:

  • Per kategoria — ustaw domyślną tabelę np. na kategorii T-shirty. Każdy produkt w niej dziedziczy tabelę bez pracy per produkt.
  • Per produkt — na produkcie otwórz Dane produktu → Przewodnik rozmiarów i wybierz tabelę. To nadpisuje domyślną tabelę kategorii, więc nietypowo wymiarowany produkt może użyć własnej.

Otwórz produkt z przypisaną tabelą (bezpośrednio lub przez kategorię):

  • Wyzwalacz (przycisk lub link) pojawia się w wybranym umiejscowieniu, lub pojawia się zakładka, jeśli wybrano styl zakładki.
  • Kliknięcie wyzwalacza otwiera tabelę w dostępnym modalu.
  • Modal jest z zarządzaniem fokusem: fokus przechodzi do okna, pozostaje uwięziony, gdy jest otwarte, wraca do wyzwalacza po zamknięciu, a Escape zamyka okno.

Otwórz produkt bez tabeli i potwierdź, że nic się nie renderuje.

Czytelny przewodnik rozmiarów odpowiada na pytanie, które klient inaczej wysłałby mailem — i które napędza wiele zwrotów. Umieszczenie tabeli o jedno kliknięcie od przycisku dodania do koszyka, w języku i jednostkach pasujących do produktu, zmniejsza zarówno wiadomości przed sprzedażą, jak i zwroty po sprzedaży.

Wyjście jest responsywne i rezerwuje miejsce, więc nie ma przeskoku układu. Respektuje prefers-reduced-motion i dostosowuje się do trybu ciemnego. Modal to natywny <dialog>, więc obsługa klawiatury i czytnika ekranu jest solidna, a nie doczepiona. Sizer jest w pełni samodzielny — bez usług zewnętrznych i bez śledzenia.