Tak jak zapowiedziałam wcześniej w tej części zajmę się produktem z wariantami w sklepie WooCommerce.
Poprzednie części
- Instalacja WooCommerce – budujemy nasz własny sklep z WordPress
- Budujemy sklep internetowy z WooCommerce
- Dodawanie nowego produktu w WooCommerce cz. 1
- Dodawanie nowego produktu w WooCommerce cz. 2
- Dodawanie nowego produktu w WooCommerce cz. 3
- Dodawanie nowego produktu w WooCommerce cz. 4
- Zmiana orientacji tabów w sklepie Woocommerce na pionową
- Dodawanie nowych atrybutów do sklepu WooCommerce
- Zmieniamy wygląd wariantów z WooCommerce Variation Swatches
Warianty w sklepie opartym o WooCommerce różnią się nieco od tych w innych sklepach. Podstawowa różnica widoczna jest od razu po wejściu do sklepu. Produkty z wariantami w miejscu pojedynczej ceny posiadają zakres cenowy. Jest to bardzo widoczne na załączonym poniżej obrazku.
Warianty w sklepie
Jak widać mamy 2 produkty. Pierwszy „koszulka” jest zwykłym pojedynczym produktem. Drugi „Przykładowy produkt” – to produkt z wariantami. Istotne przy tym jest, że warianty posiadają rożne ceny.
Zmianie uległ również wygląd karty produktu. Ponownie posiadamy tutaj w miejscu pojedynczej ceny, charakterystyczny przedział cenowy. Przedziału całkowicie usunąć się nie da. Można jedynie zmodyfikować sposób jego wyświetlania. Ewentualnie go ukryć.
Produkty z wariantami
Funkcja ta będzie jak najbardziej będzie potrzebna w budowanym przez zemnie sklepie. Wśród oferowanych w nim towarów znajdują się bowiem ubrania. Będą one dostępne nie tylko w kilku rozmiarach (a każdy rozmiar powinien być innym wariantem) jak i wersjach kolorystycznych. Produkt dodaje tak jak pozostałe z tym, że ustawiam:
Dane produktu -> Produkt z wariantami.
Po wybraniu tej opcji pojaw się w lewej kolumnie nowa opcja/ zakładka „Warianty„. Na początku zawartość będzie praktycznie pusta. Jedyne co tam znajdziemy to informacja o tym, że musimy dodać atrybuty. To właśnie na ich podstawie będziemy tworzyć późniejsze warianty.
W przykładowym produkcie jaki dodawałam wcześniej mam już wybrany atrybut kolor. Jeżeli chcemy by atrybut ten brał udział w tworzeniu wariantu musimy wejść w edycję wariantu i zaznaczyć opcję „Dla wariantów„. Na poniższym obrazku opcja ta jest jeszcze nie zaznaczona.
Dodawanie nowego atrybutu z poziomu tworzenia nowego produktu
We wcześniejszym wpisie pokazałam w jaki sposób można dodać atrybuty do sklepu. Wspomniałam tam, też że można je dodać podczas dodawania nowego produktu. I tak dokładnie w tym samym miejscu gdzie wybieramy atrybuty mamy opcję „Nowy atrybut„.
Ogólnie proces dodawania nowego atrybutu jest bardzo prosty. Po wybraniu opcji nowy atrybut klikamy dodaj.
Teraz pokażą nam się pola umożliwiające dodanie nowego atrybutu. Na początek musimy go jakoś nazwać. Następnie w polu Wartości wpisujemy interesujące nas wartości oddzielone znakiem „|” pionowej kreski.
Tutaj również musimy zaznaczyć opcję DLA WARIANTÓW. Na koniec zapisujemy.
Tworzenie prostego wariantu produktu
Teraz udajemy się do zakładki Warianty. By móc w niej dodać różne wersje produktu wystarczy nam tak naprawdę tylko jeden atrybut. W poniższym przykładzie takim atrybutem będzie kolor. Tak wiec dodajemy teraz nowy wariant.
Do wyboru mamy 2 opcje.
- Dodaj nowy wariant
- Utwórz warianty ze wszystkich atrybutów.
Pierwsza opcja daje nam możliwość dodania tylko 1 wariantu z kolei w przypadku 2 ilość zależy od posiadanych atrybutów. Jeśli mamy ich 3 – to tyle zostanie utworzonych. W prawdziwym sklepie gdzie atrybutów o różnych wartościach będzie kilka ilość wariantów może być nawet kilkunastokrotnie większa.
W sytuacji gdy zdecydujemy się na opcję Utwórz warianty ze wszystkich atrybutów WordPress zapyta się nas czy na pewno chcemy to zrobić. Poprzez poniższy komunikat:
Kiedy zakończy tworzenie wariantów pokaże z kolei komunikat o liczbie utworzonych. W tym przypadku 4 wariantach.
Na poniższym braku możecie zobaczyć listę moich wariantów. Jak widać zdecydowałam się na utworzenie wariantów z jednym atrybutem – kolorem.
W tej chwili nasze produkty praktycznie nie mają cen. Tym samym są nie aktywne. W celu ich włączenia trzeba wejść w edycję wariantu. W tym celu wystarczy kliknąć w konkretny wariant. W tedy nastąpi rozwinięcie opcji produktu. Będzie to wyglądać podobnie jak na obrazku poniżej.
Teraz możemy edytować wersję każdego produktu z osobna.
Dodawanie zdjęcia / obrazu do produktu
Główny obrazek dla produktu dodajemy tak samo jak w przypadku innych produktów.
Analogicznie jest z galerią zdjęć.
Nieco inaczej wygląda jednak sprawa z dodawaniem zdjęć do wariantów. W celu dodania zdjęcia musimy wejść w konkretny wariant i bezpośrednio w nim zmienić grafikę.
W ten sposób kiedy przejdziemy w konkretny wariant podmieniony zostanie tylko główny obrazek.
Jak podmienić zdjęcia w galerii?
W czystej wersji sklepu jest to nie możliwe. Dlatego musimy zainstalować nową wtyczkę np.
