Kompletny przewodnik po krótkim kodzie logowania WooCommerce

Strona logowania jest ważnym elementem sklepu WooCommerce. To jak brama, dzięki której Twoi klienci mogą uzyskać dostęp do swoich kont, śledzić zamówienia i realizować zakupy. Co jednak, jeśli cały proces będzie zbyt skomplikowany i nie osiągnie swojego celu?

Cóż, dlatego musisz spróbować dostosować krótkie kody logowania WooCommerce. Pomagają w tworzeniu i dostosowywaniu stron logowania w ciągu kilku minut oraz zapewniają klientom przyjazną obsługę.

Niezależnie od tego, czy potrzebujesz prostego formularza logowania, połączonej strony logowania i rejestracji, czy też samodzielnej strony rejestracji dla ukierunkowanych kampanii, krótkie kody logowania WooCommerce ułatwiają to osiągnięcie.

W tym artykule omówimy wszystko, co jest związane z krótkim kodem logowania WooCommerce, zaczynając od tego, jak utworzyć stronę logowania za pomocą krótkiego kodu, aby dostosować ją w celu zapewnienia lepszego doświadczenia użytkownika.

Zacznijmy więc.

Rodzaje stron logowania WooCommerce

Strona logowania może wyglądać jak prosta brama, ale to coś więcej niż tylko brama — to pole nazwy użytkownika i hasła!

Istnieją różne typy stron logowania w zależności od potrzeb biznesowych i preferencji użytkownika. Przeanalizujmy opcje:

1. Klasyczna strona logowania : Jest to prosta strona logowania. Wymaga tylko od użytkowników wprowadzenia swoich danych uwierzytelniających i bum — gotowe.
2. Strona logowania społecznościowego : ten typ strony logowania umożliwia użytkownikom logowanie się przy użyciu ulubionych kont w mediach społecznościowych.
3. Strona logowania z niestandardową marką : ten typ strony logowania jest dostosowywany tak, aby pasował do tożsamości Twojej marki. Aby to zrobić, musisz dodać logo i kolory swojej marki oraz dodać wiadomości powitalne, aby zachęcić użytkowników do zalogowania się.
4. Strona logowania wieloetapowego : ten typ strony logowania jest idealny dla tych, którzy chcą dodać dodatkową warstwę zabezpieczeń do swojej strony logowania. Dzieli cały proces na łatwe do wykonania kroki, takie jak wprowadzenie nazwy użytkownika, hasła i kodu weryfikacyjnego.
5. Strona pojedynczego logowania (SSO) : Wreszcie, ten typ strony logowania umożliwia użytkownikom używanie tych samych poświadczeń w wielu aplikacjach.

Były to także niektóre rodzaje stron logowania. Jak myślisz, które z nich pasują do Twojego sklepu WooCommerce? Czy jest to klasyczna strona logowania, czy społecznościowa? Cóż, wybór należy do Ciebie. Pamiętaj tylko, aby był on spersonalizowany i przyjazny dla użytkownika.

Znaczenie dostosowywania strony logowania WooCommerce

Nudna i ogólna strona logowania może całkowicie zniechęcić Twoich klientów. Dostosowanie poprawia wygląd strony i zwiększa wartość Twojego sklepu .

Wymaga to jednak wysiłku i jeśli zastanawiasz się, dlaczego warto w to inwestować czas, oto kilka najważniejszych powodów, dla których warto.

• Ekskluzywne obszary: Twórz sekcje zastrzeżone, dostępne tylko dla zalogowanych użytkowników.
• Lepsze doświadczenie użytkownika: poprawia podróż użytkownika, eliminując potrzebę ciągłego podawania szczegółów w celu dokonania zakupu.
• Usprawniony dostęp: umożliwia użytkownikom logowanie się i zarządzanie swoimi informacjami w jednym miejscu.
• Zwiększona liczba konwersji: przyjazna dla użytkownika i atrakcyjna wizualnie strona logowania pomaga zmniejszyć współczynnik odrzuceń i zachęca klientów do finalizacji zakupów.
• Zwiększone bezpieczeństwo: dodaj funkcje takie jak CAPTCHA lub uwierzytelnianie dwuskładnikowe, aby chronić dane użytkownika.

Dostosowywanie strony logowania WooCommerce to nie tylko ulepszenie estetyczne, ale ważne ulepszenie .

Teraz, gdy znasz już przyczyny, przejdźmy do działania i zobaczmy, jak utworzyć i dostosować stronę logowania za pomocą krótkiego kodu logowania WooCommerce.

Jak utworzyć stronę logowania za pomocą krótkiego kodu logowania WooCommerce?

Wszystko zaczyna się więc od krótkiego kodu My Account w WooCommerce. Ten prosty krótki kod logowania do WooCommerce – [woocommerce_my_account] umożliwia dodanie całego obszaru Moje konto do dowolnej strony.

Tutaj Twoi klienci mogą się zalogować, przeglądać poprzednie zamówienia, aktualizować swoje dane i zarządzać swoim kontem.

Jeśli więc chcesz, aby klienci mogli rejestrować się również na tej stronie, upewnij się, że rejestracja jest włączona w ustawieniach WooCommerce.

• Najpierw przejdź do WordPress admin dashboard . Teraz przejdź do Pages , aby utworzyć nową stronę. Jeśli nie chcesz tworzyć nowej strony, kliknij dowolną istniejącą stronę, aby ją edytować.
• Teraz kliknij ikonę + , aby dodać nowy blok na stronie.
• W opcjach poszukaj Shortcode.
• Pojawi się pole. Tutaj możesz skopiować i wkleić krótki kod logowania WooCommerce: [woocommerce_my_account]

Uwaga: ten krótki kod wyświetli formularz logowania wraz z rejestracją użytkownika i danymi konta.

• Na koniec kliknij przycisk Publish lub Update , aby strona pojawiła się w Twojej witrynie.

W ten sposób utworzyłeś stronę logowania; teraz wykonaj następujące kroki, aby ustawić tę stronę jako domyślną stronę logowania:

• Przejdź do WooCommerce > Settings > Advanced .
• Na My account page wybierz powyższą stronę dla opcji Moje konto.

Na koniec odwiedź stronę logowania i upewnij się, że wszystko działa sprawnie.

Wykonując te kroki, utworzyłeś w pełni funkcjonalną stronę logowania .

Jeśli więc chcesz oddzielnej strony rejestracji, logowania i konta, musisz dostosować stronę za pomocą krótkich kodów logowania WooCommerce.

Dostosowywanie strony logowania WooCommerce

1. Strona rejestracji: dodaj krótki kod [sa_woocommerce_registration_form] do swojej strony rejestracji po aktywowaniu pierwszego fragmentu poniżej. Jeśli użytkownicy są zalogowani, pojawi się komunikat „Jesteś już zarejestrowany”.

/**
 * Krótki kod do rejestracji użytkownika WooCommerce.
 *
 * @author StoreApps
 */
add_shortcode( 'sa_woocommerce_registration_form', 'storeapps_custom_registration_form' );
funkcja storeapps_custom_registration_form() {
	if ( is_user_logged_in() ) {
		powrót '
 Jesteś już zarejestrowany.
 ';
	}
	ob_start();
	do_action( 'woocommerce_before_customer_login_form' );
	$html = wc_get_template_html( 'mojekonto/formularz-login.php' );
	$dom = nowy DOMDocument();
	$dom->kodowanie = 'utf-8';
	$dom->loadHTML( utf8_decode( $html ) );
	$xpath = nowa DOMXPath( $dom);
	$form = $xpath->query( '//formularz[zawiera(@klasa,"rejestr")]' );
	$formularz = $formularz->element( 0 );
	echo $dom->saveHTML( $form );
	zwróć ob_get_clean();
}

2. Strona logowania: na stronie logowania użyj krótkiego kodu [sa_woocommerce_registration_form] po aktywowaniu drugiego fragmentu. Jeśli użytkownik jest zalogowany, wyświetli się komunikat „Jesteś już zalogowany”.

/**
 * Krótki kod do logowania użytkownika WooCommerce
 *
 * @author StoreApps
 */
add_shortcode( 'sa_woocommerce_login_form', 'storeapps_custom_login_form' );
funkcja storeapps_custom_login_form() {
	if ( is_user_logged_in() ) {
		powrót '
 Jesteś już zalogowany.
		

 ';
	}
	ob_start();
	do_action( 'woocommerce_before_customer_login_form' );
	woocommerce_login_form( array( 'redirect' => wc_get_page_permalink( 'mojekonto' ) ) );
	zwróć ob_get_clean();
}

3. Strona Moje konto: Zachowaj krótki kod [woocommerce_my_account] na stronie Moje konto, aby wyświetlić wszystkie szczegóły konta użytkownika.
4. Przekierowanie po rejestracji: Możesz także dodać przekierowanie po rejestracji, tak aby klienci po rejestracji byli kierowani na stronę Moje Konto (domyślnie obsługuje to już formularz logowania).
5. Przekieruj zalogowanych użytkowników: Aby zapobiec błędom, gdy zalogowani użytkownicy uzyskują dostęp do stron logowania lub rejestracji, użyj poniższego fragmentu. Spowoduje to automatyczne przekierowanie ich na stronę Moje konto.

/**
 * Przekieruj logowanie/rejestrację na moje konto
 *
 * @author StoreApps
 */
add_action( 'template_redirect', 'storeapps_redirect_to_myaccount_after_logged_in' );
funkcja storeapps_redirect_to_myaccount_after_logged_in() {
	if ( is_page() && is_user_logged_in() && ( has_shortcode( get_the_content(), 'sa_woocommerce_login_form' ) || has_shortcode( get_the_content(), 'sa_woocommerce_registration_form' ) ) ) {
		wp_safe_redirect( wc_get_page_permalink( 'mojekonto') );
		Wyjście;
	}
}

Uwaga: aby to zadziałało, musisz dodać fragmenty do niestandardowej sekcji PHP w plikufunctions.php i niestandardowego CSS w pliku style.css głównego motywu.

Najlepsze wtyczki usprawniające logowanie WooCommerce

Oto kilka najlepszych wtyczek WooCommerce, które pomogą Ci dostosować stronę logowania bez angażowania się w krótkie kody logowania WooCommerce :

Ekspresowe logowanie do WordPressa

Strony logowania świetnie nadają się do Twojej witryny, ale co powiesz na to, aby uczynić je jeszcze mądrzejszymi?

Chociaż tradycyjne strony logowania są pomocne, co powiesz na zapewnienie jeszcze szybszego dostępu klientom, klientom lub tymczasowym współpracownikom ? W tym miejscu pojawia się ekspresowe logowanie do WordPress przez StoreApps.

Ekspresowe logowanie do WordPress umożliwia użytkownikom natychmiastowe logowanie za pomocą bezpiecznych linków do automatycznego logowania. Nie jest wymagana żadna nazwa użytkownika ani hasło – wystarczy płynna obsługa!

• Przekieruj w dowolne miejsce: bez wysiłku kieruj użytkowników bezpośrednio do kasy, koszyka lub dowolnych ukrytych stron.
• Linki wygasające samoistnie: Ustaw linki do logowania z datami wygaśnięcia, aby zwiększyć bezpieczeństwo.
• Zbiorczy eksport linków: łatwo twórz i udostępniaj linki logowania do kampanii e-mailowych.
• Łatwa w użyciu wtyczka: Ta wtyczka jest łatwa w użyciu. Wszystko, czego potrzebujesz, to zainstalować, aktywować i gotowe!

Dzięki Express Login dla WordPress nie pozwól swoim użytkownikom drapać się po głowach w poszukiwaniu nazw użytkowników i haseł.

Pożegnaj problemy z logowaniem i przywitaj się z wygodą i bezpieczeństwem.

Wypróbuj teraz ekspresowe logowanie do WordPress

Ostateczny członek

Ultimate Member to potężna wtyczka upraszczająca zarządzanie użytkownikami. Umożliwia tworzenie niestandardowych formularzy rejestracji i logowania, profili użytkowników i dostępu opartego na rolach .

Oferuje także kreator typu „przeciągnij i upuść”, który pozwala bez wysiłku projektować wspaniałe formularze.

• Formularze niestandardowe: Twórz konfigurowalne formularze logowania, rejestracji i profili użytkowników.
• Dostęp oparty na rolach: przypisuj różne role użytkowników z dostosowanymi uprawnieniami.
• Kreator metodą „przeciągnij i upuść”: Projektuj formy bez wysiłku.
• Logika warunkowa: Pokaż pola formularza na podstawie danych wprowadzonych przez użytkownika.

Ogólnie rzecz biorąc, jest to świetny wybór do tworzenia angażujących społeczności lub witryn członkostwa w WooCommerce.

Rejestracja użytkownika

Rejestracja użytkownika to kolejna przyjazna dla początkujących wtyczka umożliwiająca tworzenie konfigurowalnych formularzy logowania i rejestracji. Oferuje wstępnie zaprojektowane szablony, logikę warunkową i integracje innych firm, zapewniające bezproblemową obsługę użytkownika.

• Wstępnie zaprojektowane szablony: przyspiesz działanie dzięki gotowym projektom formularzy.
• Logika warunkowa: Pokaż pola na podstawie danych wprowadzonych przez użytkownika.
• Integracje z firmami zewnętrznymi: bezproblemowo łącz się z narzędziami do marketingu e-mailowego i systemami CRM.
• Formularze wieloetapowe: podziel długie formularze na wiele kroków, aby zapewnić lepszą wygodę użytkowania.

Ogólnie rzecz biorąc, ta wtyczka jest idealna dla właścicieli sklepów WooCommerce, którzy chcą dostosowywalnych i skalowalnych formularzy .

RejestracjaMagia

RejestracjaMagic to kolejna wtyczka, która może pomóc w tworzeniu zaawansowanych formularzy logowania i rejestracji. Obsługuje także integrację płatności, przypisywanie ról użytkowników i szczegółową analizę formularzy .

• Integracja płatności: Akceptuj płatności bezpośrednio poprzez formularze rejestracyjne.
• Przypisywanie ról użytkowników: automatycznie przypisuj role użytkownikom na podstawie przesłanych formularzy.
• Szczegółowa analityka: śledź wydajność dzięki szczegółowym analizom danych.
• Krótkie kody: osadzaj formularze w dowolnym miejscu witryny.

Ogólnie rzecz biorąc, jest to idealne rozwiązanie do zarządzania rejestracjami użytkowników, zapewniając jednocześnie elastyczność i kontrolę nad projektem i funkcjonalnością formularzy.

Wniosek

Dostosowywanie strony logowania za pomocą krótkiego kodu logowania WooCommerce ma wiele zalet, w tym ulepszone doświadczenie użytkownika, poprawę tożsamości marki, poprawę bezpieczeństwa itp.

Spersonalizowana strona logowania zapewnia płynną podróż Twoim klientom i ułatwia cały proces.

Niezależnie od tego, czy korzystasz z krótkich kodów logowania czy wtyczek WooCommerce, zdecydowanie powinieneś spróbować dostosować stronę logowania, aby uzyskać lepszą funkcjonalność i zwiększyć satysfakcję użytkownika.

Ponadto, jeśli chcesz ułatwić swoim klientom logowanie do WooCommerce, nie zapomnij już dziś zapoznać się z usługą Express Login dla WordPress.