Umożliwienie konfiguracji produktu znacznie skraca drogę od potencjalnego do sfinalizowanego zakupu. Najpopularniejsze rozwiązanie dla WooCommerce to produkt z wariantami i jego pola z opcjami (lista rozwijana). Flexible Product Fields rozszerza stronę produktu o nowe pola a każde z nich ma inną funkcję np. pole Radio z obrazkami umożliwia dodanie pola z kolorami produktu WooCommerce.
Klient "kupuje" oczami i zwizualizowanie wskazanej przez niego opcji da więcej niż jakikolwiek tekst. Ta zasada ma zastosowanie zwłaszcza jeżeli chodzi o kolor produktu. Wstawiając pola z kolorami produktu WooCommerce zminimalizujesz niezadowolenie z powodu błędnie dobranego koloru i dodatkowo urozmaicisz stronę.
Flexible Product Fields od wersji 1.6.0 posiada opcję dodania pola "Radio z obrazkami". Takie pole pozwoli np. na łatwe wstawienie wzornika z kolorami jeżeli jako obrazki zostaną załadowane grafiki z kolorami.
Opcje koloru produktu WooCommerce krok po kroku
Dodanie takiego pola jest bardzo proste a dzięki CSS możliwe będzie jego dopasowanie np. zmiana kształtu lub rozmiaru.
- Pierwszym krokiem będzie stworzenie grafik z kolorami. Uruchom program do tworzenia grafiki i dodaj obrazki np. w kształcie kwadratu 150 x 150 px. Zapisz je w formacie PNG.
- Zaloguj się do panelu WordPress i uruchom Flexible Product Fields.
- Dodaj nową Grupę albo wskaż już istniejąca Grupę. Jeżeli Grupa jest nowa to nadaj jej nazwę (np. "Opcje koloru") i dodaj ją do produktu/kategorii lub tagu.
- Dodaj nowe pole "Radio z obrazkami".
- Wpisz nazwę pola np. "Kolor produktu".
- W wierszu "Opcje" dodaj co najmniej dwie opcje koloru produktu WooCommerce.
- Kliknij przycisk "Dodaj grafikę" i załaduj grafiki stworzone w pkt. 1. Następnie dla każdej z opcji wskaż z osobna grafikę reprezentującą kolor.
- Ustaw cenę (stałą lub procentową) lub inne opcje (np. logikę warunkową) jeżeli zachodzi taka potrzeba. Dodaj klasę CSS np. "custom-color-swatches" jeżeli potrzebujesz dostosowania pola do własnych preferencji. Zapisz.
Dostosowanie pola za pomocą CSS
Opcjonalnie wklej na stronie kod CSS w celu dostosowania pola z kolorami. Zastosuj klasę CSS z pkt. 4. np. custom-color-swatches.
Ukrycie podpisu pod grafiką
div.fpf-radio-images p.custom-color-swatches input+label span {
display: none;
}
Zmiana rozmiaru grafiki na 50 px i rozmiaru ramki na 10 px
div.fpf-radio-images p.custom-color-swatches input+label {
width: calc(50px + 2*10px);
}
div.fpf-radio-images p.custom-color-swatches input+label img {
width: calc(50px + 2*10px);
height: calc(50px + 2*10px);
border: 10px solid transparent;
}
Zmiana koloru obramowania (po zaznaczeniu) na #d3d3d3
div.fpf-radio-images p.custom-color-swatches input:checked+label img {
border-color: #d3d3d3;
}
Zmiana kształtu grafiki na koło
div.fpf-radio-images p.custom-color-swatches input+label img {
border-radius: 50%;
}
Podsumowanie
Pola z kolorami produktu WooCommerce to element jaki od razu zwraca uwagę klienta. Takie rozwiązanie sprawdzi się dla bardzo szerokiego wachlarza sklepowych kategorii a dodatkowo jest łatwe w dopasowaniu pod konkretną stronę. Zamiast koloru możliwe jest wstawienie wzoru lub innej grafiki przedstawiającej np. fakturę produktu.
Flexible Product Fields PRO WooCommerce 149 zł (183,27 zł z VAT)
Pozwól klientom personalizować produkty przed dodaniem do koszyka. Stwórz kreator personalizacji produktów, aby sprzedawać nadruki, grawerunki, opakowania na prezent, wizytówki, pieczątki i inne.
Dodaj do koszyka lub Zobacz szczegóły