Dodawanie niestandardowych pól na stronie zamówienia

Niestandardowe pola

Dane dotyczące płatności to część będąca elementem domyślnym formularza zamówienia w sklepie WooCommerce. Jeśli potrzebujesz dodać tam niestandardowe pola, możesz skorzystać z wtyczki Flexible Checkout Fields. W tym artykule pokażę Ci, jak to zrobić!

Finalizacja zamówienia – Dane rozliczeniowe

Jak domyślnie wygląda sekcja dotycząca danych rozliczeniowych?

Ten widok na pewno nie jest Ci obcy:

Domyślny wygląd strony zamówienia

Chcesz zmienić ten układ? Nie ma problemu! Nie osiągniesz tego jednak bez pomocy dodatkowej wtyczki. Pokażę Ci wtyczkę, dzięki której zyskasz możliwość dodania takich pól jak:

  • Pojedyncza linia (input)
  • Obszar tekstowy (textarea)
  • Wybór (checkbox)
  • Wybór (radio)
  • Lista rozwijana (select)
  • Data
  • Czas
  • Wybór koloru
  • Nagłówek
  • HTML lub zwykły tekst
  • Przesyłanie pliku

Oto jak wyglądają:

Customowe pola wtyczki Flexible Checkout Fields

Jeśli chcesz, możesz nadać tym polom unikalne stylowanie z użyciem CSS. Ja skorzystałem z domyślnego motywu Storefront. Z tego powodu pola, jak i cała strona zamówienia, wygląda dość surowo :)

Z pomocą wtyczki można także umieścić dwa niestandardowe pola w jednym wierszu.

Niestandardowe pola WooCommerce w jednej linii

Jeśli takie rozwiązanie Tobie odpowiada, przejdźmy do omówienia wtyczki.

Flexible Checkout Fields

Wtyczka ta jest autorstwa WP Desk. Korzysta z niej już prawie 10.000 sklepów na całym świecie!

Flexible Checkout Fields

Ludzie mówią, że wtyczka jest bardzo przydatna :) Zobacz na przykładową opinię:

Second exemplary review

Z pomocą tej wtyczki dodasz niestandardowe pola na stronie zamówienia w WooCommerce. Jednak dzięki tej wtyczce można zrobić o wiele więcej!

Z pomocą Flexible Checkout Fields możesz:

  • z łatwością dodawać niestandardowe pola do formularza zamówienia,
  • edytować istniejące, domyślne pola WooCommerce,
  • zmieniać układ pól na formularzu zamówienia itp.

Wtyczkę można pobrać bezpłatnie, jednak wersja darmowa nie zawiera wszystkich typów pól. W razie potrzeby jest też możliwość skorzystania z płatnej wersji.

Wersja bezpłatna posiada ograniczenie polegające na możliwości konfiguracji dwóch rodzajów pól:

  • pojedynczej linii tekstu,
  • tekstu akapitu.

Przed zakupem wersji płatnej zalecamy jednak wypróbowanie wersji darmowej.

Pobierz Flexible Checkout Fields →

Niestandardowe pola z użyciem wtyczki

Po zainstalowaniu i aktywacji wtyczki, możesz ją skonfigurować.

Przejdź do WooCommerce → Pola zamówienia. Znajdziesz tu sekcję o nazwie Płatność. Wybierz Typ pola, nadaj Etykietę oraz kliknij przycisk Dodaj pole:

Dodaj nowe pole

W zależności od wersji (darmowa lub płatna) do wyboru będziesz mieć 2 lub 11 typów pól.

Teraz możesz przejść do konfiguracji nowego pola.

Dla niektórych typów pól przewidziano ten sam zestaw opcji, takich jak:

  • Pole wymagane
  • Walidacja

Pole wymagane oraz walidacja

Możesz skorzystać z pierwszej opcji, jeśli chcesz, aby klient musiał wprowadzić wartość do pola. Bez wypełnienie pola nie będzie możliwe dokonanie zamówienia.

Druga opcja pozwala na sprawdzenie danych wprowadzonych w pole przez klienta. Więcej informacji na temat tej funkcji znajdziesz w naszym artykule w języku angielskim: WooCommerce Checkout Validation →

Pola wyboru i listy rozwijane posiadają dodatkowe ustawienia – Opcje:

Opcje pola niestandardowego

Na ekranie Flexible Checkout Fields można również zmienić domyślne rozmieszczenie niestandardowych pól.

Dodatkowe użyteczne funkcje

To dopiero początek. Niestandardowe pola, jak również te domyślne, możesz konfigurować na wiele sposobów.

W zakładce Wygląd możesz dodać placeholder lub własną klasę CSS. Ta druga opcja umożliwia zmianę wyglądu pola.

Wygląd pola

W zakładce Wyświetlanie znajdują się opcje, dzięki którym ustalisz, w jakim miejscu mają pojawiać się pola.

Ta funkcja również nie ogranicza Cię do niestandardowych pól. Możesz wyłączyć wyświetlanie pól na przykład na stronie Moje konto. To strona, którą Twoi klienci widzą po zalogowaniu.

Wyświetlanie pola

Ostatnia zakładka daje możliwość konfiguracji logiki warunkowej.

Zaawansowane ustawienia pola

O tym wszystkim przeczytasz w dokumentacji Flexible Checkout Fields →

Gorąco Cię do tego zachęcam!

Podsumowanie

Wiesz już, jak do Twojego sklepu WooCommerce dodać niestandardowe pola.

Czy niniejszy artykuł okazał się pomocny? Czy potrzebujesz dodatkowych informacji? Jak możemy Ci pomóc w konfiguracji Twojego sklepu?

Chętnie poznamy Twoje zdanie. Podziel się z nami swoją opinią w komentarzu poniżej.

PS Sprzedajesz niestandardowe produkty, rozliczane na metry kwadratowe, kilogramy itp.? Zapoznaj się z naszym artykułem Jak sprzedawać niestandardowe produkty?

Ekskluzywne porady, triki i trendy bezpośrednio na Twoją skrzynkę odbiorczą. Adres e-mail

Ekskluzywne porady, triki i trendy bezpośrednio na Twoją skrzynkę odbiorczą. Adres e-mail