Możesz teraz dostosować swoją stronę logowania WooCommerce bez kodu. Niestandardowe logowanie dla WooCommerce, nowe od Visser Labs, zapewnia powracającym klientom markową stronę pod adresem /login z pięcioma szablonami, Twoim logo i panelem promocyjnym obok formularza.
Większość sklepów nigdy nie dotyka swojego ekranu logowania. WooCommerce wyświetla podstawowy formularz nazwy użytkownika i hasła na stronie Moje konto, stylizowany przez motyw, którego używasz. Działa, ale wygląda jak dodatek i jest to jedyna strona, którą Twoi stali klienci widzą za każdym razem, gdy wracają.
Niestandardowe logowanie dla WooCommerce rozwiązuje ten problem. Poniżej omawiamy, dlaczego domyślne logowanie jest niewystarczające, co robi wtyczka, pięć szablonów, jak używać panelu promocyjnego i jak to wszystko skonfigurować w kilka minut.
Spis treści
- Dlaczego domyślna strona logowania WooCommerce jest niewystarczająca
- Co robi Niestandardowe logowanie dla WooCommerce
- Pięć szablonów dla Twojej strony logowania WooCommerce
- Zamień swoją stronę logowania w miejsce promocyjne
- Jak dostosować swoją stronę logowania WooCommerce
- Jak działają logowania i przekierowania
- Dla programistów: Haki i filtry
- Ceny i wymagania
- Zapewnij powracającym klientom lepsze powitanie
- Często zadawane pytania
Dlaczego domyślna strona logowania WooCommerce jest niewystarczająca
Domyślne logowanie WooCommerce to funkcjonalny formularz bez własnego brandingu ani komunikatów. Znajduje się on w szablonie Moje konto Twojego motywu, więc zmiana jego wyglądu zazwyczaj wymaga edycji plików motywu lub napisania kodu CSS.
Osoby, które się logują, to Twoi obecni klienci, grupa najbardziej skłonna do ponownych zakupów. Nasz przewodnik po korzyściach z utrzymania klienta wyjaśnia, dlaczego ta grupa odbiorców zasługuje na szczególną troskę.
Logowanie to również moment, w którym kupujący rezygnują z zakupu. Według Baymard Institute problemy z resetowaniem hasła spowodowały, że niektórzy użytkownicy istniejących kont porzucili proces realizacji zakupu na stronach detalicznych podczas testów. Dedykowana strona logowania z widocznym linkiem „Zapomniałeś hasła?” daje tym klientom jasną drogę powrotną.
Innym problemem jest zmarnowana przestrzeń. Strona logowania cieszy się stałym ruchem osób, które Ci ufają, a domyślny formularz nie wykorzystuje jej do informowania o wyprzedaży, nowym produkcie lub ofercie lojalnościowej. Jeśli czytałeś nasze strategie redukcji porzucania koszyka, wiesz, jak ważny jest każdy mały krok w ścieżce zakupowej.
Co robi Niestandardowe logowanie dla WooCommerce
Custom Login for WooCommerce tworzy samodzielną stronę logowania pod adresem /login i przekierowuje tam niezalogowanych kupujących z Moje konto. Układ, logo, kolory, teksty i panel promocyjny kontrolujesz z jednego ekranu ustawień w sekcji WooCommerce.
Oto co zawiera wersja 1.0.3:
- Automatyczna strona /login: Aktywacja wtyczki tworzy stronę logowania pod adresem /login, jeśli Twoja witryna jej jeszcze nie posiada.
- Przekierowanie Moje konto: Niezalogowani goście, którzy otwierają Moje konto, są przekierowywani na /login, a następnie wracają do Moje konto po zalogowaniu.
- Pięć szablonów: Klasyczny Podział, Wyśrodkowana Karta, Gradientowy Nowoczesny, Ciemny Motyw i Ciepły Organiczny.
- Kontrolki brandingu: Dodaj swoje logo, zmień nagłówek i ustaw kolory dla paneli, przycisków, linków i pól wprowadzania.
- Edytowalne etykiety formularza: Zmień nazwy etykiet e-mail i hasło, tekst „Zapamiętaj mnie”, przycisk logowania i link „Zapomniałeś hasła?”.
- Panel promocyjny: Wyświetl nagłówek, krótką wiadomość i przycisk wezwania do działania obok formularza logowania.
- Rotująca zawartość: Dodaj kilka wiadomości promocyjnych i wyświetlaj losową przy każdej wizycie.
- Kontrola mobilna: Ukryj panel promocyjny na telefonach lub umieść go poniżej formularza logowania.
Deklaruje również kompatybilność z High-Performance Order Storage. WooCommerce opisuje HPOS jako strukturę bazy danych zbudowaną specjalnie dla danych zamówień e-commerce, zgodnie z dokumentacją WooCommerce HPOS. Sklepy, które przeszły na HPOS, nie zobaczą ostrzeżenia o kompatybilności dla Custom Login for WooCommerce.
Pięć szablonów dla Twojej strony logowania WooCommerce
Każdy szablon to kompletny projekt strony logowania, a przełączasz się między nimi jednym kliknięciem na karcie Szablon. Twoje logo, nagłówek i etykiety pozostają, więc wypróbowanie innego wyglądu zajmuje sekundy. Wyśrodkowana Karta wyświetla formularz logowania samodzielnie, bez panelu promocyjnego, więc wybierz jeden z pozostałych czterech, jeśli chcesz pokazać ofertę.
| Szablon | Jak to wygląda |
|---|---|
| Klasyczny Podział | Czysty biały formularz logowania z jednej strony, kolorowa sekcja promocyjna z drugiej |
| Wyśrodkowana Karta | Pojedyncza karta logowania na ciemnym tle, bez panelu promocyjnego |
| Gradientowy Nowoczesny | Jasne gradientowe tło z unoszącą się białą kartą |
| Ciemny Motyw | Ciemny motyw z akcentującymi kolorami |
| Ciepły Organiczny | Ciepłe tony i zaokrąglone kształty nadają przyjazny charakter |
Classic Split to układ, którego używamy w sklepie Visser Labs. Niektóre szablony zachowują więcej własnej kolorystyki niż inne, dlatego podglądaj kolory w zakładce Projektowanie na wybranym szablonie. Jeśli chcesz, aby strona logowania dokładnie pasowała do kolorów marki, Classic Split to dobre miejsce na początek.
Oto jak wygląda każdy szablon z przykładową identyfikacją wizualną sklepu. Zbudowaliśmy te pięć przykładowych sklepów na naszej stronie testowej, po jednym na szablon, abyś mógł zobaczyć zakres przed wyborem.
Zamień swoją stronę logowania w miejsce promocyjne
Panel promocyjny umieszcza ofertę przed każdym klientem, który się loguje. Wyświetla nagłówek, krótką wiadomość i przycisk, który linkuje gdziekolwiek chcesz, tuż obok formularza logowania, na który klienci już patrzą.
Konfigurujesz go w zakładce Treść. Włącz Włącz sekcję promocyjną, a następnie wypełnij cztery pola:
- Nagłówek promocji: Nagłówek w panelu.
- Treść promocji: Jedno lub dwa zdania tekstu pomocniczego.
- Tekst przycisku: Etykieta na przycisku wezwania do działania.
- URL przycisku: Dokąd prowadzi przycisk. Otwiera się w nowej karcie, więc strona logowania klienta pozostaje otwarta.
Wyświetlanie innego komunikatu przy każdej wizycie
Rotująca treść pozwala na jednoczesne prowadzenie kilku promocji. Włącz Włącz rotację, kliknij Dodaj element i nadaj każdemu elementowi własny Nagłówek, Treść, Tekst przycisku, URL przycisku i URL obrazu. Custom Login for WooCommerce następnie losowo wybiera jeden element za każdym razem, gdy strona się ładuje.
Działa to dobrze w przypadku sklepów, które mają więcej niż jedną rzecz do powiedzenia. Jeden element może promować sezonową wyprzedaż, inny nową gamę produktów, a trzeci zapis do newslettera.
Co zaobserwowaliśmy: Na naszej własnej stronie logowania Visser Labs panel promocyjny w ogóle nie reklamuje wtyczki Visser. Rotuje oferty naszych siostrzanych wtyczek, takich jak SaveTo Wishlist i Advanced Coupons, a oferta SaveTo Wishlist zawiera śledzony link, dzięki czemu możemy zobaczyć jej kliknięcia. Strona logowania to dobre miejsce do sprzedaży krzyżowej czegoś powiązanego, ponieważ ludzie, którzy ją czytają, już mają u Ciebie konto. Nasz artykuł o zwiększaniu sprzedaży za pomocą SaveTo Wishlist Pro omawia, dlaczego oferta listy życzeń jest odpowiednia dla powracających klientów.
Wybór wyglądu promocji na urządzeniach mobilnych
Telefony nie mają miejsca na dwa panele obok siebie, więc zakładka Projektowanie ma ustawienie Wyświetlanie promocji mobilnej z dwoma opcjami. Ukryj na urządzeniach mobilnych wyświetla tylko formularz logowania na małych ekranach i jest to domyślne ustawienie. Umieść poniżej formularza logowania utrzymuje promocję widoczną poniżej.
Wybierz Umieść poniżej formularza logowania, jeśli Twoja promocja zawiera prawdziwą ofertę. Zachowaj domyślne ustawienie, jeśli panel jest głównie dekoracją.
Jak dostosować swoją stronę logowania WooCommerce
Aby dostosować stronę logowania WooCommerce, pracujesz z czterema zakładkami i jednym przyciskiem Zapisz. Wszystko znajduje się w sekcji WooCommerce > Niestandardowe logowanie.
- Zainstaluj i aktywuj wtyczkę. Prześlij Niestandardowe logowanie dla WooCommerce z menu Wtyczki > Dodaj nową, a następnie ją aktywuj. Twoja strona /login zostanie utworzona automatycznie.
- Aktywuj licencję. Otwórz zakładkę Licencja, wprowadź swój Klucz licencyjny i Adres e-mail aktywacyjny użyty podczas zakupu, a następnie aktywuj. Aktywna licencja zapewnia aktualizacje wtyczki i wsparcie.
- Wybierz szablon. Na zakładce Szablon kliknij projekt, który chcesz.
- Zastosuj branding. Na zakładce Projektowanie wklej adres swojego logo do pola Adres URL logo (obsługiwane są formaty SVG, PNG i JPG, zalecany rozmiar to 200x60px), a następnie ustaw swój Nagłówek logowania.
- Ustaw kolory i etykiety. Nadal na zakładce Projektowanie, dostosuj Kolory paneli, Kolory przycisków, Kolory przycisków promocyjnych, Kolory linków i Kolory pól, a następnie zmień nazwy etykiet formularza, które chcesz zmienić.
- Dodaj swoją promocję. Na zakładce Treść wypełnij panel promocyjny lub włącz rotację treści.
- Zapisz. Kliknij Zapisz ustawienia na górze ekranu ustawień, a następnie otwórz yoursite.com/login w oknie prywatnej przeglądarki, aby sprawdzić wynik.
Użyj okna prywatnego do ostatniego sprawdzenia. Zalogowani użytkownicy odwiedzający /login są przekierowywani bezpośrednio do Moje konto, więc nie zobaczysz strony logowania, gdy jesteś zalogowany jako administrator.
Jak działają logowania i przekierowania
Niestandardowe logowanie dla WooCommerce wykorzystuje własny przepływ logowania WooCommerce, więc konta klientów, hasła i historia zamówień pozostają takie same. Tylko strona, na której się logują, jest nowa.
Kilka szczegółów, o których warto wiedzieć:
- Zaloguj się za pomocą nazwy użytkownika lub adresu e-mail: Pole logowania akceptuje oba, tak jak standardowy WordPress.
- Powrót do miejsca, z którego przyszli: Kiedy klient jest wysyłany z Moje konto do /login, wraca do Moje konto po zalogowaniu.
- Resetowanie hasła nadal działa: Link „Zapomniałeś hasła?” prowadzi do normalnej strony resetowania hasła WooCommerce, a ta strona nigdy nie jest przekierowywana.
- Wylogowanie prowadzi do /login: Po wylogowaniu klienci wracają na Twoją stronę logowania z komunikatem potwierdzającym.
- Jeden komunikat o błędzie: Nieprawidłowe hasło i nieznana nazwa użytkownika wyświetlają ten sam komunikat: „Nieznana nazwa użytkownika lub nieprawidłowe hasło”. Zapobiega to używaniu formularza do sprawdzania, które konta istnieją.
Formularz logowania wykorzystuje również standardowe haki formularza logowania WooCommerce. Rozszerzenia, które dodają pola do formularza logowania WooCommerce, takie jak wtyczki CAPTCHA, mogą dodać je również do Twojej nowej strony. Jeśli boty stanowią problem dla Twojego sklepu, nasz poradnik na temat jak zapobiegać fałszywym zamówieniom w WooCommerce omawia szerszy obraz.
Dla programistów: Haki i filtry
Deweloperzy mogą zmieniać sposób działania Custom Login for WooCommerce za pomocą dwóch filtrów i trzech akcji. Jest to obsługiwany sposób dostosowywania go bez edycji plików wtyczki.
clwc_login_redirect: Zmień, dokąd klient przechodzi po pomyślnym zalogowaniu. Otrzymuje adres URL przekierowania i użytkownika.clwc_logout_redirect: Zmień, dokąd klient przechodzi po wylogowaniu.clwc_after_login_form: Wykonywane po formularzu logowania, dla dodatkowych linków lub powiadomień.clwc_login_footer: Wykonywane w stopce strony logowania.clwc_login_enqueue_scripts: Dodaj skrypty lub style dla strony logowania. Strona nie wywołujewp_enqueue_scripts, więc użyj tej akcji zamiast tego.
Przekierowanie po zalogowaniu przechodzi również przez własny filtr WooCommerce woocommerce_login_redirect, więc istniejący kod przekierowania nadal działa.
Ceny i wymagania
Custom Login for WooCommerce jest sprzedawany jako licencja roczna; sprawdź stronę wtyczki, aby uzyskać aktualne ceny. Obejmuje to automatyczne aktualizacje i wsparcie, a także 14-dniową gwarancję zwrotu pieniędzy od Visser Labs.
Twój sklep potrzebuje:
- WordPress 5.8 lub nowszy
- PHP 7.4 lub nowszy
- WooCommerce 6.0 lub nowszy
Zapewnij powracającym klientom lepsze powitanie
Twoja strona logowania jest jedną z niewielu stron, które ludzie odwiedzają celowo, raz za razem. Kiedy dostosowujesz swoją stronę logowania WooCommerce, ta wizyta staje się markowym momentem, a panel promocyjny daje Ci miejsce do pokazania powracającym klientom, co nowego.
- Sprawdź, dlaczego domyślne logowanie nie spełnia oczekiwań Twojego sklepu
- Wybierz jeden z pięciu szablonów, który pasuje do Twojej marki
- Skonfiguruj panel promocyjny z ofertą dla powracających klientów
- Postępuj zgodnie z krokami konfiguracji i przetestuj w prywatnym oknie
Gotowy do dostosowania swojej strony logowania WooCommerce? Pobierz Custom Login for WooCommerce i daj swoim powracającym klientom stronę logowania, która wygląda jak Twój sklep.
Często zadawane pytania
Czym jest niestandardowa strona logowania WooCommerce?
Niestandardowa strona logowania WooCommerce to dedykowana strona logowania z własnym projektem, zamiast domyślnego formularza na stronie Moje konto. Niestandardowe logowanie dla WooCommerce tworzy ją pod adresem /login z wybranym przez Ciebie jednym z pięciu szablonów, Twoim logo, niestandardowymi kolorami i opcjonalnym panelem promocyjnym.
Czy moi klienci będą potrzebować nowych haseł?
Nie. Niestandardowe logowanie dla WooCommerce wykorzystuje standardowe logowanie WordPress i WooCommerce, więc wszystkie istniejące konta, hasła i historia zamówień pozostają bez zmian. Klienci logują się przy użyciu tych samych danych na nowej stronie.
Czy Niestandardowe Logowanie dla WooCommerce zmienia logowanie do panelu administracyjnego WordPress?
Nie. Obsługuje logowanie klienta pod adresem /login i przekierowanie z Moje konto. Ekran logowania do wp-admin nie jest zmieniany.
Czy mogę wyświetlać różne promocje na mojej stronie logowania?
Tak. Włącz rotację treści w zakładce Treść i dodaj tyle elementów, ile chcesz. Każdy element ma własny nagłówek, tekst, przycisk i obraz, a Niestandardowe logowanie dla WooCommerce wyświetla jeden losowo przy każdej wizycie.
Czy działa z HPOS?
Tak. Wersja 1.0.3 deklaruje kompatybilność z WooCommerce High-Performance Order Storage, więc sklepy korzystające z HPOS nie zobaczą ostrzeżenia o niezgodności.
Co się stanie, jeśli zalogowany klient odwiedzi stronę /login?
Są oni wysyłani bezpośrednio na stronę Moje konto. Formularz logowania pojawia się tylko dla niezalogowanych gości.
