Jak dostosować logowanie i formularze rejestracyjne WooCommerce?

Po wyjęciu z pudełka WooCommerce oferuje ograniczone opcje dostosowywania formularzy logowania i rejestracji. Utrudnia to właścicielom sklepów zapewnienie klientom dobrego doświadczenia użytkownika.

Oprócz tego jesteś ograniczony do domyślnych pól kasy, co oznacza, że ​​nie możesz zebrać dodatkowych informacji od klienta podczas kasy. Nie jest to idealne rozwiązanie dla sklepów, które chcą dać klientom możliwość wyboru dat rezerwacji, wprowadzania wielu adresów e-mail lub oferowania opcji pakowania prezentów.

Jednym ze sposobów na pokonanie tego jest użycie solidnej wtyczki, takiej jak ProfilePress, która pozwala zarządzać wszystkim w jednym miejscu. W tym artykule omówimy, w jaki sposób możesz dostosować formularze logowania i rejestracji WooCommerce za pomocą ProfilePress.

Po co dostosowywać formularze logowania i rejestracji WooCommerce?

Dostosowanie formularzy logowania i rejestracji WooCommerce może pomóc w uczynieniu Twojej witryny bardziej przyjazną dla użytkownika i zwiększeniu konwersji.

Właściciele sklepów mogą potrzebować dostosować domyślne formularze logowania i rejestracji WooCommerce, aby oferować klientom spersonalizowane wrażenia. Tworząc ekskluzywny formularz logowania i rejestracji, możesz poprawić wrażenia klientów w swojej witrynie i zmaksymalizować liczbę rejestracji.

Możesz także dodać niestandardowe pola do strony kasy swojej witryny WooCommerce jako sposób na zebranie dodatkowych informacji od klienta przed dokonaniem transakcji. Na przykład możesz pozwolić klientom dodawać swoje konta w mediach społecznościowych, nazwy użytkowników lub wyświetlać dodatkowe informacje o produktach w koszyku. Pomaga to oferować klientom bardziej spersonalizowane zakupy.

Zastąpienie domyślnej strony „Moje konto” w WooCommerce niestandardową stroną to świetny sposób na wyróżnienie Twojego sklepu. Możesz pozwolić klientom łatwo logować się do swoich kont i zarządzać swoimi danymi ze scentralizowanego miejsca. Na przykład mogą się logować, rejestrować i personalizować swoje konta użytkowników, przesyłając zdjęcia profilowe, edytując pseudonimy lub dodając biografię.

Dostosowanie formularzy logowania i rejestracji WooCommerce może pomóc w zapewnieniu ulepszonego doświadczenia użytkownika w Twoim sklepie internetowym.

Dostosowywanie formularzy logowania i rejestracji WooCommerce

Korzystając z ProfilePress, łatwo jest dostosować formularz logowania i rejestracji WooCommerce i sprawić, by wyglądały dokładnie tak, jak chcesz.

ProfilePress oferuje kompleksowe rozwiązanie do tworzenia atrakcyjnych witryn WordPress i oferuje rozbudowane narzędzia, które pomagają kontrolować, kto ma dostęp do Twoich treści. Możesz tworzyć intuicyjne profile użytkowników wraz z atrakcyjnymi formularzami rejestracji i logowania za pomocą kreatora typu „przeciągnij i upuść”.

W tym celu potrzebujemy działającej witryny WordPress z zainstalowaną wtyczką WooCommerce. Będziemy również potrzebować wtyczki ProfilePress do tworzenia niestandardowych formularzy logowania i rejestracji.

Krok #1: Zainstaluj i aktywuj ProfilePress

Zacznij od pobrania wtyczki ProfilePress i zainstalowania jej na swojej witrynie WordPress. Przejdź do Wtyczki → Dodaj nowy za pomocą panelu administracyjnego WordPress i kliknij przycisk Dodaj nowy . Prześlij plik zip i zainstaluj wtyczkę na swojej witrynie WordPress.

Krok #2: Dostosuj formularze logowania i rejestracji

Pierwszą rzeczą, którą musimy zrobić, to zacząć tworzyć nasz niestandardowy formularz logowania za pomocą ProfilePress. Aby to zrobić, przejdź do ProfilePress → Formularze i profile i kliknij przycisk Dodaj nowy w sekcji Logowanie . Kliknij narzędzie Przeciągnij i upuść i wybierz szablon. Na potrzeby tej demonstracji wybraliśmy szablon Bash .

Po wybraniu szablonu zostaniesz automatycznie przekierowany na stronę Edytuj formularz . Możesz dodawać i upuszczać pola w preferowanej kolejności oraz edytować etykiety pól .

Możesz także edytować Ustawienia formularza i dostosować wygląd i etykiety przycisków w formularzu logowania. Po zakończeniu kliknij przycisk Zapisz zmiany , aby kontynuować. Teraz musimy utworzyć nową stronę WordPress i dodać niestandardowy formularz logowania do tej strony za pomocą niestandardowego shortcode.

Przejdź do Strony → Dodaj nowy , aby utworzyć nową stronę i dodać krótki kod formularza logowania do strony. Kliknij przycisk Opublikuj , aby kontynuować.

Teraz utworzymy formularz rejestracyjny i dodamy go do nowej strony WordPress. Aby to zrobić, przejdź do ProfilePress → Formularze i profile i kliknij przycisk Dodaj nowy w sekcji Rejestracja .

Nadaj swojemu formularzowi rejestracyjnemu tytuł i wybierz szablon, aby rozpocząć jego dostosowywanie. Wybraliśmy szablon Tulip . Zostaniesz automatycznie przekierowany na stronę Edytuj formularz .

Tutaj możesz dodać lub usunąć pola z formularza rejestracyjnego i zmienić ich wygląd w interfejsie użytkownika. Po zakończeniu dostosowywania formularza rejestracyjnego kliknij przycisk Zapisz zmiany , aby kontynuować.

Aby utworzyć nową stronę rejestracyjną WordPress, przejdź do Strony → Dodaj nową i wklej krótki kod formularza rejestracyjnego. Kliknij przycisk Opublikuj , aby kontynuować.

Krok #3: Wyświetl formularze logowania i rejestracji na interfejsie użytkownika

Przejdź do ProfilePress → Ustawienia i kliknij kartę Ogólne . Dodaj nowo utworzone niestandardowe strony logowania i rejestracji do swojego sklepu za pomocą menu rozwijanych i kliknij przycisk Zapisz zmiany , aby kontynuować.

Zastąpi to domyślną stronę logowania do WordPressa oraz wszystkie linki do logowania i rejestracji z WooCommerce z linkami ProfilePress . Oto, jak to wygląda na froncie Twojej witryny.

Krok #3.5: Zastąpienie formularzy logowania i rejestracji WooCommerce

Aby zastąpić formularze rejestracji i logowania wyświetlane na stronie Moje konto WooCommerce, przejdź do Ustawienia >> WooCommerce i wybierz formularze logowania i rejestracji ProfilePress, którymi chcesz je zastąpić.

Użytkownicy będą mogli zarejestrować konto w Twojej witrynie WooCommerce za pomocą atrakcyjnego niestandardowego formularza rejestracyjnego. Już zarejestrowani użytkownicy mogą logować się do swojego konta za pomocą stworzonego wcześniej przez nas niestandardowego formularza logowania:

Krok 4: Dodaj niestandardowe pola do strony kasy

Możesz także dodać niestandardowe pola do strony kasy swojego sklepu WooCommerce. Aby to zrobić, po prostu przejdź do ProfilePress → Ustawienia i kliknij kartę Pola niestandardowe .

Kliknij przycisk Dodaj nowe i ustaw etykietę pola dla własnego pola. Po ustawieniu klucza pola i opisu pola możesz ustawić typ pola w zależności od potrzeb.

Możesz tworzyć tekst, hasła, e-mail, telefon, ukryte pola, numer, datę, kraj, przesyłanie plików, przyciski radiowe, pole wyboru, pola tekstowe i wyświetlać je na stronie kasy swojego sklepu WooCommerce.

Gdy będziesz gotowy, kliknij przycisk Zapisz zmiany , aby kontynuować.

Następnie przejdź do ProfilePress → Ustawienia i kliknij zakładkę WooCommerce . Dodaj pola niestandardowe w meta polu Wymagane pola rejestracji i kliknij przycisk Zapisz zmiany , aby kontynuować.

Użytkownicy będą mogli zobaczyć niestandardowe pola na stronie rejestracji kasy podczas kasowania w sklepie internetowym

.

Dodatkowo chcemy również wyświetlić niestandardowy formularz logowania na stronie kasy i zastąpić domyślny. Aby to zrobić, po prostu przejdź do ProfilePress → Ustawienia i kliknij zakładkę WooCommerce .

Wybierz niestandardowy formularz logowania za pomocą menu rozwijanego obok Formularza logowania do kasy i kliknij przycisk Zapisz zmiany , aby kontynuować. Zastąpi to domyślny formularz logowania na stronie kasy Twojej witryny WooCommerce.

Bonus: Utwórz niestandardową stronę „Moje konto” WooCommerce

Strona „Moje konto” w WooCommerce umożliwia odwiedzającym witrynę dostęp do swojego konta użytkownika bezpośrednio z interfejsu.

ProfilePress pozwala stworzyć w pełni niestandardową stronę „Moje konto” WooCommerce, na której użytkownicy mogą łatwo przeglądać swoje konta użytkowników, a także je edytować, wszystko z jednej strony. Aby to zrobić, przejdź do Profile Press → Forms & Profiles i kliknij przycisk Add New .

Nadaj formularzowi Edytuj profil nową nazwę i wybierz szablon, aby rozpocząć dostosowywanie. Wybraliśmy szablon Pinnacle . Po kliknięciu przycisku Wybierz szablon automatycznie przekieruje Cię on do strony Edycja formularza .

Możesz dodawać pola i dostosowywać wygląd formularza na interfejsie witryny WooCommerce. Po zakończeniu dostosowywania formularza „Moje konto”, kliknij przycisk Zapisz zmiany , aby kontynuować.

Teraz, gdy stworzyliśmy formularz „Moje konto”, musimy utworzyć stronę WordPress, aby móc wyświetlać ją w Twojej witrynie. Przejdź do Strony → Dodaj nowy i wklej krótki kod Edytuj profil . Po zakończeniu kliknij przycisk Opublikuj .

A poniżej znajduje się podgląd niestandardowego formularza edycji profilu.

Możesz też po prostu pominąć cały proces i zamiast tego użyć skrótu ProfilePress My Account na stronie utworzonej powyżej.

Użytkownicy będą mogli edytować informacje o swoim koncie i kliknąć przycisk Aktualizuj profil , aby wprowadzić zmiany na swoich kontach użytkowników bezpośrednio z interfejsu. Strona będzie służyć jako nowa strona Moje konto.

Możesz także umożliwić użytkownikom przeglądanie ich zamówień, pobrań, subskrypcji i członkostwa, przechodząc do ProfilePress → Ustawienia. Kliknij zakładkę WooCommerce i wybierz zakładki, które mają być wyświetlane w ustawieniu Zakładki Mojego Konta.

Wniosek

Dostosowanie logowania i formularzy rejestracyjnych WooCommerce w Twojej witrynie to świetny sposób na poprawę obsługi klienta i zachęcenie większej liczby użytkowników do zarejestrowania się u Ciebie.

Chociaż WordPress domyślnie oferuje ograniczoną funkcjonalność dostosowywania stron logowania i rejestracji, możesz użyć solidnej wtyczki, takiej jak ProfilePress, do tworzenia niestandardowych stron i zwiększania komfortu użytkownika, jaki zapewnia Twój sklep internetowy.

Gotowy, aby dostosować formularz logowania i rejestracji WooCommerce na swojej stronie internetowej? Zdobądź ProfilePress już dziś!