WooCommerce to nie tylko małe sklepy, sprzedające proste produkty. Coraz większe możliwości platformy powodują, że sprzedawcy mogą oferować bardziej złożone produkty, również z możliwością personalizacji przez klientów. W tym artykule pokażę jak stworzyć konfigurator produktu w WooCommerce na przykładzie laptopa.
Pierwsze czego potrzebujemy to odpowiednia wtyczka. Owszem, sam WooCommerce ma możliwość dodawania wariantów do produktów, ale w wielu przypadkach nie są one wystarczające. Poza tym każdy dodatkowy wariant produktów to dodatkowy produkt w bazie danych. To niestety zwiększa jej rozmiar i może negatywnie wpływać na szybkość działania sklepu. Przy dodawaniu konfiguratora produktu w WooCommerce idealnie sprawdzi się więc Flexible Product Fields PRO.
Dlaczego wersja PRO? Przy przykładzie konfiguratora laptopa, wybór podzespołów będzie odpowiednio wpływał na cenę, a ta funkcja dostępna jest jedynie w wersji płatnej. Jednak nawet darmowa wersja ma duże możliwości. Dzięki niej możemy dodać pola, które nie wpływają na cenę produktu, jak np. tekst graweru czy dodanie opakowania na prezent.
Przejdźmy do konkretnego przykładu
Konfigurator produktu w WooCommerce – laptop
W moim przykładzie stworzyłem konfigurator laptopa. Udostępniłem klientowi wybranie wielkości pamięci RAM i procesora, oraz dodanie systemu operacyjnego. Jest to często spotykane rozwiązanie w przypadku tego typu produktów. Zobaczmy jak to wygląda w praktyce.
Oczywiście, wygląd poszczególnych pól można łatwo zmieniać. Każdemu z nich można dodać klasę CSS za pomocą wtyczki i z wykorzystaniem CSS dowolnie dostosować wizualnie. W moim przykładzie użyłem domyślnego wyglądu.
Wybranie poszczególnych elementów z konfiguratora wpływa na końcową cenę produktu.
Cena zmienia się dynamicznie i klient od razu wie ile będzie musiał zapłacić za daną konfigurację laptopa.
Warto zrozumieć, dlaczego konfigurator oparty na dedykowanych polach sprawdza się lepiej niż standardowe warianty WooCommerce przy produktach z wieloma niezależnymi opcjami konfiguracji, takich jak laptop. Przy trzech parametrach do wyboru — na przykład trzech opcjach RAM, trzech procesorach i dwóch systemach operacyjnych — liczba możliwych kombinacji rośnie wykładniczo, a każda z nich w modelu wariantowym oznaczałaby osobny wpis w bazie danych. Konfigurator budowany na polach produktowych rozwiązuje ten problem u źródła: niezależnie od liczby możliwych kombinacji, w bazie danych istnieje wciąż tylko jeden produkt, a cena wyliczana jest dynamicznie na podstawie wybranych opcji.
Jak stworzyć konfigurator laptopa? (krok po kroku)
Załóżmy, że posiadasz już zainstalowaną wtyczkę w wersji PRO (jeśli posiadasz wersję darmową, postępowanie jest takie same, nie będziesz miał jednak możliwości wpływania na cenę produktu). Przejdź do Produkty → Pola produktów w pulpicie sklepu WooCommerce.
Tworzymy Grupę pól
Następnie kliknij Dodaj nową w zakładce Grupy pól.
W tym miejscu możesz podać nazwę grupy pól i określić jej ustawiania. W polu Sekcja możesz wybrać czy grupa pól ma pojawić się przed czy po przycisku dodaj do koszyka. Pole Przypisz grupę do określa przy jakich produktach pojawią się dodatkowe pola. Można je przypisać do konkretnych produktów, kategorii lub wszystkich produktów w sklepie. Kolejność grupy jest przydatna przy większej ilości grup pól na jednym produkcie.
Spójrz jak to wygląda w przypadku mojego konfiguratora produktu WooCommerce.
Moją grupę pól przypisałem do jednego produktu o nazwie Laptop i nazwałem ją Konfigurator laptopa. Teraz wystarczy dodać pola klikając przycisk Dodaj pole.
Wybór pamięci RAM
Do tego elementu wybrałem listę rozwijaną, aby klient mógł w łatwy sposób wybrać interesującą go ilość pamięci RAM. W polu Opcje dodałem trzy warianty i do każdego przypisałem przykładową cenę. Jako typ ceny wybrałem Kwotę, ponieważ inna opcja czyli Procent, nie sprawdzi się w tym przypadku. Dodatkowo zaznaczyłem pole Wymagane, aby klient musiał wybrać jedną z możliwych opcji.
Dodanie systemu operacyjnego
W moim konfiguratorze umożliwiłem klientom dodanie systemu operacyjnego do ich laptopa. Jako Typ pola wybrałem Wybór (checkbox), a także podałem kwotę, która zostanie doliczona w przypadku wyboru. Nie zaznaczyłem pola Wymagane, gdyż dodanie systemu operacyjnego ma być dodatkową opcją.
Wybór procesora
Tu konfiguracja jest podobna do tej z wyborem pamięci RAM. Jedyną różnicą jest określenie Typu pola jako Wybór (radio), ale to tak naprawdę indywidualne podejście, które równie dobrze mogłoby być zamienione na listę rozwijaną.
Wybór między listą rozwijaną a polami typu radio, jak pokazano powyżej przy pamięci RAM i procesorze, to w dużej mierze kwestia liczby dostępnych opcji i preferencji dotyczących szybkości podejmowania decyzji przez klienta. Lista rozwijana sprawdza się lepiej, gdy opcji jest więcej i chcesz oszczędzić miejsce na stronie produktu, natomiast pola radio pokazują od razu wszystkie dostępne warianty bez dodatkowego kliknięcia, co może przyspieszyć proces wyboru przy mniejszej liczbie opcji — zwłaszcza tam, gdzie różnice cenowe między wariantami są dla klienta istotnym czynnikiem decyzyjnym.
Personalizowanie produktów w WooCommerce
Stworzenie konfiguratora laptopa to tylko jedno z wielu zastosowań wtyczki Flexible Product Fields. Wtyczka umożliwia dodanie większej ilości pól do strony produktowej. Są to:
- Tekst (input)
- Obszar tekstowy (textarea)
- Wybór (radio)
- Wybór (checkbox)
- Nagłówek
- Data
Dzięki temu łatwo można umożliwić klientom personalizowanie produktów w WooCommerce.
Choć w tym artykule konfigurator zbudowano na przykładzie laptopa, ta sama logika sprawdza się równie dobrze w wielu innych branżach sprzedających produkty konfigurowalne — meblach na wymiar, rowerach z wyborem komponentów, czy nawet zestawach subskrypcyjnych, gdzie klient samodzielnie dobiera zawartość paczki. Kluczem jest identyfikacja, które elementy produktu rzeczywiście wpływają na cenę końcową i wymagają dedykowanego pola z przypisaną kwotą, a które są jedynie dodatkową informacją niewymagającą wyceny, jak tekst do grawerunku czy notatka dla realizującego zamówienie.
Podsumowanie
W tym artykule pokazałem jak stworzyć konfigurator produktu w WooCommerce na przykładzie laptopa z wykorzystaniem wtyczki Flexible Product Fields. Mam nadzieję, że dzięki niemu będziesz w stanie dodać swój własny konfigurator, nie tylko omawianego przeze mnie przykładu. Powodzenia!
FAQ
Czy konfigurator produktu w WooCommerce można stworzyć bez wersji PRO wtyczki?
Tak, ale w wersji darmowej pola nie mogą wpływać na cenę produktu — sprawdzą się więc do dodatkowych informacji, jak tekst grawerunku, natomiast dynamiczne przeliczanie ceny w zależności od wybranej konfiguracji wymaga wersji PRO Flexible Product Fields.
Czy konfigurator budowany na polach produktowych zwiększa rozmiar bazy danych sklepu?
Nie w takim stopniu jak warianty produktowe — każda dodatkowa opcja w konfiguratorze nie tworzy nowego wpisu produktu w bazie danych, w przeciwieństwie do standardowych wariantów WooCommerce, gdzie każda kombinacja to osobny rekord.
Czy pola konfiguratora mogą być oznaczone jako opcjonalne?
Tak, każde pole można ustawić jako wymagane lub opcjonalne niezależnie — w opisanym przykładzie wybór RAM i procesora był obowiązkowy, natomiast dodanie systemu operacyjnego pozostawiono jako opcję do wyboru.
Czy wygląd pól konfiguratora można dostosować wizualnie do sklepu?
Tak, każdemu polu można przypisać własną klasę CSS za pomocą wtyczki, co pozwala dowolnie dostosować wygląd konfiguratora do stylistyki sklepu za pomocą własnego kodu CSS.
