Jak dostosować stronę logowania WooCommerce (3 metody)

Opublikowany: 2022-08-17

Czy chcesz dostosować swoją stronę logowania klienta WooCommerce?

Domyślna strona logowania do WordPressa jest prosta i nie pasuje do marki Twojego sklepu. Dostosowanie strony logowania klienta WooCommerce pomaga zapewnić lepsze wrażenia użytkownika.

W tym artykule pokażemy, jak utworzyć całkowicie niestandardową stronę logowania WooCommerce, a także podzielimy się wskazówkami, jak dostosować również stronę logowania do kasy.

How to create a custom WooCommerce customer login page

Po co tworzyć niestandardową stronę logowania klienta WooCommerce?

Gdy klienci zalogują się do Twojego sklepu WooCommerce, zobaczą domyślną stronę logowania WordPress tylko z logo i marką WordPress.

Standard WordPress login screen example

Ta strona jest w porządku, jeśli chcesz tylko uzyskać dostęp do pulpitu nawigacyjnego swojej witryny. Klienci mogą jednak zniechęcić się prostym wyglądem i uznać za podejrzane, że strona logowania nie pasuje do wyglądu Twojej witryny.

Dostosowanie stron logowania WooCommerce pozwala dodać logo i zmienić projekt, aby pasował do Twojej witryny. Dzięki temu Twoja witryna wygląda bardziej profesjonalnie i zapewnia lepsze wrażenia użytkownika.

Pozwala także dodawać więcej pól formularzy, a nawet umożliwia promocję określonych produktów lub pokazywanie klientom specjalnych ofert.

Biorąc to pod uwagę, zobaczmy, jak utworzyć niestandardową stronę logowania klienta w WooCommerce.

  • Utwórz całkowicie niestandardową stronę logowania WooCommerce za pomocą SeedProd
  • Dostosuj stronę logowania WooCommerce za pomocą WPForms
  • Bonus: Dostosuj logowanie do kasy WooCommerce

Utwórz całkowicie niestandardową stronę logowania WooCommerce za pomocą SeedProd

Najlepszym sposobem na stworzenie niestandardowej strony logowania klienta WooCommerce jest użycie SeedProd. To najlepsza strona docelowa WordPress i kreator motywów dla WordPressa i jest niesamowicie łatwa w użyciu.

Możesz użyć kreatora przeciągania i upuszczania SeedProd, aby dostosować projekt i układ strony lub motywu WordPress bez dotykania jednego wiersza kodu.

W tym samouczku użyjemy licencji SeedProd Pro, ponieważ zawiera ona szablon strony logowania i inne zaawansowane opcje dostosowywania. Istnieje również wersja SeedProd Lite, z której możesz korzystać bezpłatnie.

Najpierw musisz zainstalować i aktywować wtyczkę SeedProd. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem, jak zainstalować wtyczkę WordPress.

Po aktywacji zobaczysz ekran powitalny SeedProd . Śmiało wprowadź klucz licencyjny i kliknij przycisk „Zweryfikuj klucz”. Klucz licencyjny można znaleźć w obszarze konta SeedProd.

SeedProd license key

Następnie możesz utworzyć niestandardową stronę logowania do swojego sklepu WooCommerce.

Po prostu przejdź do SeedProd »Strony docelowe z pulpitu WordPress i kliknij przycisk „Utwórz stronę logowania”.

Select Login Page

Następnie SeedProd pokaże Ci wiele szablonów. Możesz szybko wybrać jeden i dostosować go do swoich potrzeb. Pomaga to zaoszczędzić czas i możesz użyć istniejącego projektu do stworzenia własnej strony logowania WooCommerce.

Wtyczka umożliwia również tworzenie od podstaw strony logowania przy użyciu pustego szablonu.

Choose a Template for Your SeedProd Login Page

Po wybraniu szablonu otworzy się wyskakujące okienko.

Śmiało wprowadź nazwę swojej strony i kliknij przycisk „Zapisz i rozpocznij edycję strony”.

Enter a Page Name and Page URL

Następnie zobaczysz narzędzie do tworzenia stron typu „przeciągnij i upuść”.

Możesz teraz dostosować stronę logowania, dodając nowe bloki do szablonu z menu po lewej stronie.

SeedProd oferuje standardowe bloki, takie jak nagłówek, tekst, obraz, przycisk i inne.

Customize your WooCommerce login page

Oprócz tego możesz dodawać zaawansowane bloki, takie jak prezenty, formularze kontaktowe, przyciski udostępniania społecznościowego, formularz zgody i inne. Istnieją również bloki WooCommerce, takie jak najnowsze produkty, polecane produkty i najlepiej sprzedające się produkty, które możesz dodać do szablonu strony logowania.

Korzystając z bloków WooCommerce, możesz łatwo polecać swoje najlepsze produkty i promować oferty rabatowe, aby uzyskać więcej konwersji.

Poza tym SeedProd pozwala również na dalsze dostosowywanie dowolnej sekcji na stronie logowania. Po prostu kliknij sekcję, a zobaczysz więcej opcji, takich jak edycja etykiety, koloru, czcionki i odstępów.

More customization options

Po zakończeniu dostosowywania strony logowania WooCommerce nie zapomnij kliknąć przycisku „Zapisz” u góry.

Następnie możesz przejść do zakładki „Ustawienia strony” i kliknąć przełącznik „Stan strony”, aby zmienić go z wersji roboczej na publikację. Następnie możesz iść dalej i kliknąć przycisk „Zapisz” i zamknąć kreatora stron.

SeedProd Page Settings

Od tego momentu wszystko, co pozostało, to wyświetlenie nowej niestandardowej strony logowania WooCommerce dla użytkowników. Aby to zrobić, przejdź do SeedProd » Landing Pages w panelu WordPress.

Wystarczy kliknąć przełącznik pod „Stroną logowania”, aby był zielony i mówił „Aktywny”.

Make Your SeedProd Login Page Active

Po włączeniu w Twojej witrynie pojawi się nowa strona logowania!

Możesz odwiedzić swój sklep eCommerce, aby zobaczyć go w akcji.

WooCommerce login page preview

Dostosuj formularz logowania klienta WooCommerce za pomocą WPForms

Czy chcesz stworzyć formularz logowania, który będzie pasował również do motywu Twojej witryny i oferuje więcej pól formularza?

Domyślny formularz logowania do WordPressa pozwala użytkownikom tylko na wpisanie adresu e-mail lub nazwy użytkownika wraz z hasłem. Dzięki niestandardowemu formularzowi logowania możesz dodać więcej pól i pozwolić klientom logować się przy użyciu ich nazwisk lub numeru telefonu.

Najlepszym sposobem na to jest użycie WPForms. To najlepszy kreator formularzy WordPress, który jest przyjazny dla początkujących. Ponad 5 milionów stron internetowych używa WPForms do tworzenia inteligentniejszych formularzy.

Możesz łatwo utworzyć niestandardowy formularz logowania WooCommerce i wyświetlić go w dowolnym miejscu w swoim sklepie internetowym, takim jak pasek boczny lub strona produktu.

W tym samouczku użyjemy planu WPForms Pro, ponieważ zawiera on dodatek do rejestracji użytkownika. Możesz także wypróbować bezpłatną wersję WPForms, aby rozpocząć.

Najpierw musisz zainstalować i aktywować wtyczkę WPForms. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem, jak zainstalować wtyczkę WordPress.

Po aktywacji możesz przejść do WPForms »Ustawienia z pulpitu WordPress i wprowadzić klucz licencyjny. Klucz licencyjny można znaleźć w obszarze konta WPForms.

Enter Your WPForms License Key

Następnie musisz przejść do WPForms »Dodatki w panelu administracyjnym WordPress.

Następnie przewiń w dół do „Dodatku do rejestracji użytkownika”, a następnie kliknij przycisk „Zainstaluj dodatek”.

Install WPForms User Registration Addon

Teraz jesteś gotowy do stworzenia niestandardowego formularza logowania dla WooCommerce. Po prostu przejdź do WPForms »Dodaj nowy , aby uruchomić kreator formularzy.

Na następnym ekranie możesz wpisać u góry nazwę formularza. Następnie wyszukaj szablon „Formularz logowania użytkownika” i kliknij przycisk „Użyj szablonu”.

Select the WPForms User Login Form Template

Następnie możesz dostosować szablon formularza logowania użytkownika za pomocą narzędzia do przeciągania i upuszczania. WPForms bardzo ułatwia dodawanie różnych pól do formularza lub zmianę kolejności istniejących pól w szablonie.

Na przykład możesz dodać zaawansowane pola, takie jak numery telefonów, przeciągając je z menu po lewej stronie i upuszczając na szablon.

WPForms Form Builder

Możesz dodatkowo dostosować każde pole formularza w szablonie. Po prostu kliknij dowolne pole i edytuj jego etykietę, dodaj opis i ustaw jako wymagane pole w formularzu.

Następnie możesz przejść do zakładki „Ustawienia” w kreatorze formularzy. W ustawieniach ogólnych możesz zmienić „Prześlij tekst przycisku” na „Zaloguj się”.

Customizing the WPForms Button Text

Następnie możesz przejść do zakładki „Potwierdzenia”, aby zmienić, co się stanie, gdy użytkownik pomyślnie się zaloguje.

Wystarczy kliknąć menu rozwijane „Typ potwierdzenia” i wybrać opcję. Możesz pokazać klientom wiadomość, wyświetlić stronę lub przekierować ich na określony adres URL.

Na przykład możesz dodać formularz logowania WooCommerce na stronie produktu i umożliwić klientom szybkie zalogowanie się w celu zakupu produktu.

Edit confirmation settings in WPForms

Kiedy skończysz, po prostu kliknij przycisk „Zapisz” u góry.

Następnie musisz dodać formularz logowania klienta WooCommerce do strony w swojej witrynie.

Po prostu kliknij przycisk „Umieść” w górnej części kreatora. Następnie możesz wybrać, czy umieścisz formularz na istniejącej stronie, czy utworzysz dla niej nową.

Embed a form in page

Wybierzmy na razie opcję „Utwórz nową stronę”.

Następnie musisz wpisać nazwę swojej strony i kliknąć „Let's Go!” przycisk.

Enter a name for new login page

Następnie zobaczysz formularz logowania WPForms w obszarze treści WordPress.

Teraz możesz wyświetlić podgląd swojego formularza, opublikować nową stronę i wyświetlić niestandardowy login WooCommerce dla swoich klientów.

WooCommerce login page preview using WPForms

Z drugiej strony możesz również dodać formularz logowania WooCommerce do paska bocznego swojego sklepu. W ten sposób Twój formularz pojawi się na każdej stronie produktu i pozwoli klientom szybko się zalogować.

Po prostu przejdź do Wygląd » Widgety z pulpitu WordPress. Następnie kliknij przycisk „+” i dodaj blok widżetu WPForms.

Następnie możesz wybrać formularz logowania z menu rozwijanego i wprowadzić tytuł.

Add your login form in the sidebar

Kiedy skończysz, kliknij przycisk „Aktualizuj”.

Możesz teraz odwiedzić swój sklep internetowy, aby zobaczyć formularz logowania na pasku bocznym.

Login form in sidebar preview

Aby uzyskać więcej sposobów na utworzenie dostosowanej strony logowania klienta WooCommerce, możesz zapoznać się z naszym przewodnikiem dotyczącym tworzenia niestandardowej strony logowania WordPress.

Ponadto możesz również zapoznać się z naszym samouczkiem dotyczącym dodawania menu nawigacyjnego w WordPress, dzięki czemu możesz dodać stronę logowania WooCommerce do nawigacji w witrynie.

Bonus: Dostosuj stronę logowania WooCommerce Checkout

WooCommerce umożliwia powrót odwiedzających do logowania na stronie kasy. Jeśli chcesz dostosować stronę logowania do kasy WooCommerce, najlepszym sposobem na to jest użycie potężnej wtyczki do tworzenia lejków, takiej jak WooFunnels.

WooFunnels pozwala dostosować stronę kasy WooCommerce, dodać wieloetapową kasę, dodać up-sells jednym kliknięciem i wiele więcej.

Możesz wybierać spośród dziesiątek gotowych szablonów kasy, które są wysoce zoptymalizowane pod kątem konwersji, a najlepsze jest to, że możesz je dostosować za pomocą dowolnego z popularnych kreatorów stron WordPress.

WooFunnels Checkout Example

Masz możliwość przetestowania A/B wielu ścieżek, stron sprzedażowych i ofert dodatkowych.

WooFunnels zapewnia szczegółowe analizy na każdym etapie lejka WooCommerce.

WooFunnels A/B Testing for WooCommerce

Jest również wyposażony w potężny dodatek do automatyzacji marketingu, Autonami, który pozwala dostosowywać wiadomości e-mail WooCommerce, wysyłać powiadomienia e-mail o kropli w WooCommerce w przypadku porzucenia koszyka, serii powitalnej i nie tylko.

Autonami Email Library for WooCommerce

Jeśli poważnie myślisz o rozwoju swojego sklepu WooCommerce, to jest to jedno z niezbędnych narzędzi, które polecamy.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak utworzyć niestandardową stronę logowania klienta WooCommerce. Możesz również zobaczyć nasz ekspercki wybór najlepszych wtyczek WooCommerce i nasz ostateczny przewodnik, jak rozwiązać problem z brakiem wysyłania wiadomości e-mail przez WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.