Dotarliśmy do najbardziej rozbudowanego, ale też najpotężniejszego typu produktu.
Co to jest produkt z wariantami? To produkt, który oferuje opcje do wyboru, a każda opcja może mieć inną cenę, stan magazynowy, a nawet zdjęcie. Najlepszy przykład to koszulka, która występuje w różnych:
- Rozmiarach (S, M, L, XL)
- Kolorach (Czerwony, Niebieski, Czarny)
Klient musi wybrać konkretną kombinację (np. „Czerwona, M”), aby móc ją kupić.
Proces dodawania takiego produktu jest bardziej złożony niż produktu prostego, ponieważ musimy najpierw zdefiniować opcje (nazywamy je Atrybutami), a następnie stworzyć z nich kombinacje (czyli Warianty).
Nie martw się, przejdziemy przez to krok po kroku.
Krok 1: Podstawowa Konfiguracja
Zaczynasz identycznie jak w Module 2:
- Przejdź do Produkty > Dodaj nowy.
- Wpisz Nazwę produktu (np. „Nasza Bawełniana Koszulka Premium”).
- Wpisz Długi opis i Krótki opis.
- W panelach bocznych ustaw Kategorie i Tagi.
Teraz zaczyna się kluczowa różnica.
Krok 2: Zmiana Typu Produktu
W sekcji „Dane produktu” (Meta-box), kliknij w rozwijaną listę, na której domyślnie wybrany jest „Produkt prosty”. Zmień tę opcję na „Produkt z wariantami”.
[GRAFIKA 10: Zrzut ekranu sekcji „Dane produktu”. Wyraźnie zaznaczona rozwijana lista, z której użytkownik wybiera „Produkt z wariantami”. Można pokazać, jak po tej zmianie znikają zakładki „Ogólne” (z ceną) i „Wysyłka”, a pojawiają się nowe.]
Zauważysz, że po tej zmianie:
- Zakładka „Ogólne” straciła pola ceny (ponieważ każda wariacja będzie miała własną cenę).
- Zakładka „Wysyłka” również straciła pola wagi/wymiarów (będą ustawiane dla wariantów).
- Pojawiły się dwie nowe, kluczowe zakładki: Atrybuty i Warianty.
Krok 3: Definiowanie Opcji (Zakładka „Atrybuty”)
To jest fundament. Zanim stworzysz warianty (np. „Czerwona M-ka”), musisz powiedzieć WooCommerce, jakie typy opcji w ogóle istnieją (czyli „Kolor” i „Rozmiar”).
- Przejdź do zakładki „Atrybuty”.
- Z rozwijanej listy „Własny atrybut produktu” kliknij „Dodaj”.
- Pojawią się nowe pola:
- Nazwa: Wpisz nazwę pierwszej opcji, np. Kolor.
- Wartości: Wpisz dostępne opcje, oddzielając je pionową kreską |. To ważne! (Np. Czerwony | Niebieski | Czarny).
- Kluczowy krok: Zaznacz checkbox „Użyj dla wariantów”. Jeśli tego nie zrobisz, atrybut będzie tylko informacją na stronie, ale klient nie będzie mógł go wybrać!
- Kliknij „Zapisz atrybuty”.
- Powtórz proces dla drugiej opcji:
- Kliknij ponownie „Dodaj”.
- Nazwa: Wpisz Rozmiar.
- Wartości: Wpisz S | M | L | XL.
- Zaznacz checkbox „Użyj dla wariantów”.
- Ponownie kliknij „Zapisz atrybuty”.
[GRAFIKA 11: Zrzut ekranu zakładki „Atrybuty” z już wypełnionymi dwoma atrybutami: „Kolor” (z wartościami) i „Rozmiar” (z wartościami). Kluczowe jest, aby na grafice wyraźnie zaznaczyć (np. czerwoną ramką) oba checkboxy „Użyj dla wariantów”.]
(Początek Strony 8)
Krok 4: Tworzenie Kombinacji (Zakładka „Warianty”)
Masz już zdefiniowane „składniki”. Teraz czas stworzyć z nich „dania”, czyli gotowe kombinacje produktów, które klient może kupić.
- Przejdź do zakładki „Warianty”.
- Zobaczysz teraz rozwijaną listę. Kliknij w nią i wybierz opcję: „Utwórz warianty ze wszystkich atrybutów”.
- Kliknij przycisk „Idź”.
- Pojawią się dwa okienka z potwierdzeniem – kliknij „OK” w obu. WooCommerce zapyta, czy na pewno chcesz to zrobić, a następnie poinformuje Cię, ile wariantów zostało utworzonych (w naszym przypadku 3 kolory x 4 rozmiary = 12 wariantów).
[GRAFIKA 12: Zrzut ekranu zakładki „Warianty”. Najpierw zaznaczona opcja „Utwórz warianty ze wszystkich atrybutów” i przycisk „Idź”.]
[GRAFIKA 13: Zrzut ekranu pokazujący wynik operacji: lista 12 utworzonych wariantów (np. „Czerwony, S”, „Czerwony, M”, „Niebieski, S” itd.).]
Krok 5: Zarządzanie Każdym Wariantem (Cena, SKU, Magazyn)
To jest najbardziej pracochłonna część. Każdy z 12 wariantów, które stworzyłeś, jest teraz jak „mini-produkt prosty”. Musisz ustawić dla niego cenę, a najlepiej także SKU i stan magazynowy.
- Kliknij na dowolny wariant (np. „Czerwony | S”), aby go rozwinąć.
- Pojawią się pola do wypełnienia – identyczne jak dla produktu prostego!
- Obowiązkowo wypełnij:
- SKU: Nadaj unikalny kod (np. KOSZULKA-CZERW-S). Jest to krytycznie ważne dla śledzenia magazynu wariantów!
- Cena regularna: Wpisz cenę dla tej konkretnej kombinacji. Jeśli nie wpiszesz ceny, wariant nie pojawi się w sklepie!
- Zalecane do wypełnienia:
- Obrazek: Kliknij ikonę niebieskiego zdjęcia, aby wgrać zdjęcie dokładnie tego wariantu (np. zdjęcie czerwonej koszulki). Dzięki temu, gdy klient wybierze „Czerwony”, główne zdjęcie produktu się podmieni.
- Zarządzanie stanem magazynowym: Zaznacz ten checkbox, jeśli chcesz śledzić stan magazynowy oddzielnie dla wariantu „Czerwony, S” (np. masz 10 sztuk „Czerwonych S”, ale tylko 5 sztuk „Niebieskich L”).
- Waga i Wymiary: Wpisz, jeśli różnią się między wariantami (choć zazwyczaj są takie same).
[GRAFIKA 14: Zrzut ekranu jednego, rozwiniętego wariantu (np. „Czerwony | S”). Wyraźnie zaznaczone pola: ikona obrazka, SKU, Cena regularna oraz checkbox „Zarządzanie stanem magazynowym”.]
Musisz teraz przejść przez każdy wariant z listy i ustawić co najmniej cenę i SKU.
(Początek Strony 9)
Ekspercka Porada: Masowa Edycja Wariantów
Jeśli wszystkie Twoje warianty mają tę samą cenę, wagę lub stan magazynowy, nie musisz klikać w każdy z osobna!
Na górze zakładki „Warianty” (tam, gdzie wybierałeś „Utwórz warianty…”) znajduje się ta sama rozwijana lista. Możesz jej teraz użyć do masowej edycji.
Wybierz np. „Ustaw regularne ceny” -> kliknij „Idź” -> wpisz cenę w okienku -> kliknij „OK”. WooCommerce ustawi tę cenę dla wszystkich 12 wariantów za jednym razem. To gigantyczna oszczędność czasu!
[GRAFIKA 15: Zrzut ekranu pokazujący rozwijaną listę w zakładce „Warianty” z zaznaczoną opcją np. „Ustaw regularne ceny” lub „Zarządzaj stanem magazynowym”.]
Krok 6: Ustawienie Zdjęć i Publikacja
Wracamy do paneli bocznych po prawej stronie.
- Obrazek produktu (Główny): W tym miejscu ustaw zdjęcie, które ma się wyświetlać jako domyślne, zanim klient cokolwiek wybierze. Zazwyczaj jest to najlepsze ujęcie produktu lub kolaż pokazujący kilka dostępnych kolorów.
- Galeria produktu: Dodaj tu resztę zdjęć (zbliżenia, inne ujęcia).
- Uwaga: Nie musisz tu dodawać zdjęć, które już dodałeś do poszczególnych wariantów (np. zdjęcia samej czerwonej koszulki), choć nie jest to błędem.
Gdy wszystko jest gotowe, kliknij „Opublikuj”.
Jak to wygląda w sklepie?
Teraz, gdy klient wejdzie na stronę Twojej „Bawełnianej Koszulki Premium”, zamiast przycisku „Dodaj do koszyka” zobaczy dwie rozwijane listy: „Kolor” i „Rozmiar”.
Dopiero po wybraniu obu opcji, pojawi się cena dla tej kombinacji, zaktualizuje się zdjęcie (jeśli je ustawiłeś dla wariantu) i aktywny stanie się przycisk zakupu.
[GRAFIKA 16: Zrzut ekranu finalnego produktu od strony klienta (front-end). Musi być na nim widać rozwijane listy „Kolor” i „Rozmiar” oraz nieaktywny (lub nieistniejący) przycisk „Dodaj do koszyka” przed dokonaniem wyboru.]
Gratulacje! Opanowałeś najtrudniejszy i najbardziej elastyczny typ produktu w WooCommerce. Jeśli poradziłeś sobie z tym, poradzisz sobie ze wszystkim innym.