Jak dostosować stronę logowania WooCommerce (3 metody)
Opublikowany: 2022-08-17Czy 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.
![Jak stworzyć niestandardową stronę logowania klienta WooCommerce? How to create a custom WooCommerce customer login page](/uploads/article/41437/gxPbrUJ9FIOwp9Mn.png)
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.
![Przykład standardowego ekranu logowania WordPress Standard WordPress login screen example](/uploads/article/41437/uB9BRhn3boUceQpL.png)
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.
![Klucz licencyjny SeedProd SeedProd license key](/uploads/article/41437/euwqgmlEqPUcZB9q.png)
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”.
![Wybierz stronę logowania Select Login Page](/uploads/article/41437/ObzI1mwaiUXddny5.png)
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.
![Wybierz szablon dla swojej strony logowania SeedProd Choose a Template for Your SeedProd Login Page](/uploads/article/41437/a5P74MZrfzX6l74e.png)
Po wybraniu szablonu otworzy się wyskakujące okienko.
Śmiało wprowadź nazwę swojej strony i kliknij przycisk „Zapisz i rozpocznij edycję strony”.
![Wprowadź nazwę strony i adres URL strony Enter a Page Name and Page URL](/uploads/article/41437/vOZEBa4T0I4EzUvw.png)
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.
![Dostosuj swoją stronę logowania WooCommerce Customize your WooCommerce login page](/uploads/article/41437/BU5iaqZaaTl1v8Zt.png)
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.
![Więcej opcji dostosowywania More customization options](/uploads/article/41437/1WPVtCC18t8ypXA8.png)
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.
![Ustawienia strony SeedProd SeedProd Page Settings](/uploads/article/41437/Y9wAOkPzs6nwHHpJ.png)
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”.
![Aktywuj swoją stronę logowania SeedProd Make Your SeedProd Login Page Active](/uploads/article/41437/GKBxpVajCWH6e2EM.png)
Po włączeniu w Twojej witrynie pojawi się nowa strona logowania!
Możesz odwiedzić swój sklep eCommerce, aby zobaczyć go w akcji.
![Podgląd strony logowania WooCommerce WooCommerce login page preview](/uploads/article/41437/Yxc8xZrBzGn5gVPV.png)
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.
![](https://s.stat888.com/img/bg.png)
Po aktywacji możesz przejść do WPForms »Ustawienia z pulpitu WordPress i wprowadzić klucz licencyjny. Klucz licencyjny można znaleźć w obszarze konta WPForms.
![Wprowadź swój klucz licencyjny WPForms Enter Your WPForms License Key](/uploads/article/41437/EjW5eFe5xjrvBCwo.png)
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”.
![Zainstaluj dodatek do rejestracji użytkownika WPForms Install WPForms User Registration Addon](/uploads/article/41437/RgT5awm0Y0vQS8Pk.png)
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”.
![Wybierz szablon formularza logowania użytkownika WPForms Select the WPForms User Login Form Template](/uploads/article/41437/M8iUAV6P3aDMqrYt.png)
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.
![Kreator formularzy WPForms WPForms Form Builder](/uploads/article/41437/17hOqyXtj2my0yMc.png)
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ę”.
![Dostosowywanie tekstu przycisku WPForms Customizing the WPForms Button Text](/uploads/article/41437/H92gmIMpySmGDLsL.png)
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.
![Edytuj ustawienia potwierdzenia w WPForms Edit confirmation settings in WPForms](/uploads/article/41437/1ISLWoncb2cXrPHA.png)
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ą.
![Osadź formularz na stronie Embed a form in page](/uploads/article/41437/jjz5EL4Eikgzh8uB.png)
Wybierzmy na razie opcję „Utwórz nową stronę”.
Następnie musisz wpisać nazwę swojej strony i kliknąć „Let's Go!” przycisk.
![Wpisz nazwę nowej strony logowania Enter a name for new login page](/uploads/article/41437/VpgytxXZjtwj189B.png)
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.
![Podgląd strony logowania WooCommerce za pomocą WPForms WooCommerce login page preview using WPForms](/uploads/article/41437/APMJD4B7QjPhdWkX.png)
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ł.
![Dodaj swój formularz logowania na pasku bocznym Add your login form in the sidebar](/uploads/article/41437/RGqZATLOD10AEtBy.png)
Kiedy skończysz, kliknij przycisk „Aktualizuj”.
Możesz teraz odwiedzić swój sklep internetowy, aby zobaczyć formularz logowania na pasku bocznym.
![Formularz logowania w podglądzie paska bocznego Login form in sidebar preview](/uploads/article/41437/9Isz7Tia9SbZAFuU.png)
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.
![Przykład zamówienia WooFunnels WooFunnels Checkout Example](/uploads/article/41437/28iPlJxk3yeHx70A.gif)
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.
![Testy A/B WooFunnels dla WooCommerce WooFunnels A/B Testing for WooCommerce](/uploads/article/41437/gPXIYZXQN0MNIXil.jpg)
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.
![Biblioteka e-mail Autonami dla WooCommerce Autonami Email Library for WooCommerce](/uploads/article/41437/nC0eQpPfc0TKM6u9.jpg)
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.