Podczas pracy nad sklepem w WooCommerce zdałam sobie sprawę, że produkty z wariantami daleko odbiegają od tych w innych sklepach.
W moim sklepie były to zwykłe pola wyboru z tekstem podczas gdy w innych pole koloru “rzeczywiście” odzwierciedlało tę barwę. W samym WooCommerce niestety nie ma takich ciekawych opcji. Dlatego jesteśmy zmuszeni zainstalować dodatkową wtyczkę, która da nam taką możliwość.
WooCommerce Variation Swatches – dodatkowe warianty dla atrybutów
Jedną z wtyczek, która oferuje dodatkowe opcje jest WooCommerce Variation Swatches. To praktycznie był mój pierwszy wybór jeśli chodzi o wtyczki zmieniające sposób wyświetlania atrybutów w wariantach w sklepie. Dodaje ona do atrybutów dodatkowe pole wyboru z jego pomocą możemy wybrać jedną z 3 opcji:
- kolor
- obrazek
- przycisk
Instalacja WooCommerce Variation Swatches
Wtyczkę instalujemy jak każdą inną. Myślę, że bez większych problemów znajdziecie ją w repozytorium.
Po aktywacji w panelu pojawi się nowa zakładka Swatches Settings. Po wejściu w nią pokażą nam się opcje konfiguracyjne wtyczki.
Opcje wtyczki wyglądają następująco:
W moim przypadku wykorzystałam jedynie domyślne ustawienia wtyczki. Czyli nic w niej nie zmieniałam.
Na ostatniej stronie w ustawieniach znajduje się coś w rodzaju tutoriala jak skonfigurować wtyczkę. Widać tam też kilka przykładowych wykorzystań pul.
Tworzenie atrybutu z nowymi opcjami na przykładzie koloru
Teraz pokażę wam jak w praktyce wykorzystać tę wtyczkę. W tej chwili dobrze by było gdybyśmy na chwilę cofnęli się do innego mojego wpisu.
Link do wpisu
Po instalacji pluginu dodawanie i modyfikowanie atrybutów przebiega bowiem tak samo, z tym że tak jak wspomniałam powyżej mamy 1 nowe pole “TYP”.
Tak jak zdążyłam wam już napisać pole dodaje 3 nowe opcje. Każda z nich spowoduje dodanie nowego pola dla wartości atrybutu. W przypadku Image (czyli obrazek) będzie to pole wyboru obrazka. W efekcie każda cecha atrybutu może mieć inny obrazek. Tak jak na obrazku z zegarkami.
Ja jednak zdecydowałam się na kolor! I tak po wybraniu typu dla atrybutu i jego zapisaniu moje cechy/ wartości otrzymały pole Color.
Po kliknięciu w opcję wybierz kolor otwiera się paleta dzięki, której można wybrać kolor lub wpisać jego nazwę w RGB.
W podobny sposób można tworzyć lub edytować inne elementy.
Ostatecznie tak wygląda gotowa paletka kolorów w sklepie!
Aktybuty oczywiście dodajemy normalnie do produktów! Zmianie ulegnie bowiem jedynie sposób ich wyświetlania.
A tak się to prezentują się atrybuty po ich skonfigurowaniu z pomocą wtyczki. Rożnica zdecydowanie jest widoczna.
