Jak zrobić niestandardową stronę mojego konta WooCommerce?

Jeśli prowadzisz sklep internetowy za pomocą wtyczki WooCommerce, prawdopodobnie znasz stronę Moje konto. To jest strona, którą Twoi klienci widzą po zalogowaniu się na swoje konto.

Domyślnie ta strona jest bardzo prosta, jak ta.

Jest o wiele większy potencjał i o wiele więcej możesz zrobić z tą bardzo ważną częścią swojego sklepu eCommerce.

Możesz go dostosować, aby zawierał znacznie więcej informacji i interesujących funkcji, aby poprawić wrażenia użytkownika.

Pokażemy Ci, jak dostosować stronę Moje konto WooCommerce i zapewnić swoim klientom znacznie lepsze wrażenia!

Wykonując te czynności, będziesz mógł stworzyć profesjonalnie wyglądającą stronę Moje konto, taką jak ta poniżej.

Gotowy? Zacznijmy!

Po co dostosowywać stronę Moje konto w WooCommerce?

Strona Moje konto to pulpit nawigacyjny użytkownika do zarządzania zamówieniami, sprawdzania pobranych plików, edytowania adresu i edytowania szczegółów konta.

Dobrze zaprojektowana strona Moje konto może zapewnić lepsze wrażenia użytkownika dla Twoich klientów.

Oprócz tego, że nie męczy oczu (kto nie lubi ładnych rzeczy?), ten układ sprawia, że ​​zarządzanie kontami jest znacznie wygodniejsze.

Oto kilka powodów, dla których stworzenie świetnej strony Moje konto jest niezbędne:

Większa satysfakcja klienta

Jeśli możesz podać swoim klientom wszystkie potrzebne informacje na stronie Moje konto, będą mniej skłonni do skontaktowania się z Tobą w celu uzyskania pomocy.

Dobrze dostosowana strona Moje Konto sprawi, że Twoi klienci poczują się bardziej komfortowo i pewnie podczas zakupów w Twoim sklepie.

Lepsze utrzymanie klientów

Dostosowanie strony Moje konto może również pomóc w utrzymaniu klientów.

Jeśli ułatwisz dostęp do informacji o ich koncie i historii zamówień, jest bardziej prawdopodobne, że będą kontynuować zakupy u Ciebie.

Zadowolony klient chętniej wróci.

Zmniejszone zwroty produktów

Gdy ulepszysz stronę Moje konto, pomożesz klientom uzyskać wszystkie potrzebne im informacje o produkcie, w tym szczegóły wysyłki, informacje o śledzeniu i inne.

Mając wszystkie te informacje w jednym miejscu, w łatwym w obsłudze interfejsie, klienci nie będą musieli martwić się o wykonanie produktu.

Kiedy uspokoisz umysły swoich klientów, będą mieli o wiele bardziej pozytywne doświadczenia, co może skutkować powtórzeniem zwyczaju.

Jak dostosować stronę Moje konto

Teraz znamy korzyści i sposoby ich zastosowania w Twojej firmie. Dodajmy te zmiany do strony Moje konto.

Ręczne dostosowywanie strony Moje konto

W przypadku tej metody najpierw zainstalujemy wszystkie wymagane wtyczki i motywy; następnie zaprojektujemy Pulpit nawigacyjny Mojego konta i na koniec ukryjemy domyślną nawigację WooCommerce.

Krok 1: Zainstaluj wymagane wtyczki

Możesz użyć dowolnego narzędzia do tworzenia stron WordPress.

Do tego projektu użyliśmy Ultimate Addons dla Gutenberga (UAG).

UAG to lekka wtyczka, która dodaje fantastyczne układy i bloki projektowe do biblioteki Gutenberg.

Jest kompatybilny ze wszystkimi motywami i można go całkowicie bezpłatnie pobrać.

Będziesz także potrzebować jeszcze jednej wtyczki o nazwie Gutenberg Blocks Library & Toolkit – Editor Plus.

Ta wtyczka pozwala dodawać niestandardowe CSS do poszczególnych bloków Gutenberga. Będziemy potrzebować tej wtyczki w kroku 3.

Obie te wtyczki są dostępne w bibliotece wtyczek WordPress i możesz je pobrać za darmo.

Krok 2: Zaprojektuj swój pulpit nawigacyjny

Po pobraniu żądanych wtyczek nadszedł czas, aby dostosować stronę Moje konto WooCommerce.

1. Przejdź do Strony > Moje konto z pulpitu WordPress.

2. Kliknij Edytuj , aby rozpocząć edycję strony.

Zobaczysz tam dodany domyślny krótki kod mojego konta. Ten krótki kod informuje WordPressa, że ​​strona jest stroną Moje konto.

3. Na razie skopiuj krótki kod w innym dokumencie i usuń blok. Będziemy tego potrzebować, ale nie teraz.

4. W kolumnie dodaj blok Info Box .

5. Z prawego paska bocznego użyj ustawień bloku, aby dostosować blok.

Tutaj ustaw pozycję ikony jako Left Of Text And Title i ustaw wyrównanie w pionie na Middle .

6. Możesz także włączyć lub wyłączyć tytuł i separator z paska bocznego.

Tutaj wyłączamy tytuł i separator.

Możesz to zrobić, wyłączając przycisk przełączania obok opcji Włącz tytuł .

Aby wyłączyć separator, wybierz opcję Brak w opcji Styl w obszarze Separator .

7. Na koniec przejdź do sekcji CTA i ustaw CTA Type jako kompletne pole.

8. Następnie przejdź do widoku listy od góry i zaznacz i duplikuj kolumnę, aż będziesz mieć ich 6.

Dodaj niezbędną treść w edytowalnej przestrzeni, a Twoja strona powinna wyglądać tak.

9. Nadszedł czas, aby dodać prawidłowe linki do każdego pudełka.

W ten sposób każde pole z ikoną staje się aktywne i odsyła klienta do odpowiedniej strony.

10. Zmień ikony w każdym z pól ikon na coś związanego z tytułem.

Aby to zrobić, wybierz pole ikony , przejdź do Ustawień ikon i wyszukaj ikonę najbliższą tytułowi.

Na koniec kliknij ikonę w polu ikon.

11. Możemy dodać kilka obramowań, aby oddzielić pola ikon.

1. Przejdź do widoku listy i wybierz kolumnę.
2. Z prawego paska bocznego przejdź do ustawień obramowania i dodaj trochę grubości do ustawienia. W tym przypadku dodaliśmy 2 px.
3. Przejdź do Border Radius i zmień promień, jeśli chcesz. Dodaliśmy promień 5%, aby w tym przypadku dodać niewielką krzywiznę.

12. Na koniec dodaj skrót WooCommerce My Account Shortcode .

1. Kliknij przycisk „+”.
2. Wybierz opcję Shortcode .
3. Wklej krótki kod WooCommerce Moje konto w wyświetlonym pasku.

Po dodaniu skrótu zauważysz, że stary pulpit nawigacyjny Moje konto WooCommerce pojawi się ponownie poniżej obecnego projektu.

Możemy to po prostu ukryć za pomocą kodu CSS, który omówimy w następnym kroku.

Krok 3: Ukryj nawigację na stronie Moje konto WooCommerce

W tym kroku musisz dodać mały fragment kodu CSS do swojej witryny.

1. Przejdź do podglądu na żywo.
2. Wybierz kolumnę, którą chcesz ukryć. W tym przypadku kolumna shortcode.
3. Z prawego paska bocznego przejdź do niestandardowego ustawienia CSS .
4. Wklej następujący niestandardowy kod CSS:

 .woocommerce-MyAccount-navigation { display:none; } .woocommerce-account .woocommerce-MyAccount-content { width: 100%; }

Dzięki tym ustawieniom Twoja strona Moje konto będzie teraz wyglądać znacznie lepiej!

Krok 4: Zmień ustawienia widoczności swojej strony

Teraz strona Moje konto wygląda lepiej niż wersja domyślna. Jedynym problemem jest to, że nawet wylogowani użytkownicy zobaczą ten sam format.

Oto jak to wygląda, gdy wylogowany użytkownik odwiedza stronę Moje konto WooCommerce.

Nie tak chcemy, aby strona działała. Chcemy, aby tylko te elementy były widoczne dla zalogowanych użytkowników.

1. Wybierz kolumnę, którą chcesz ukryć przed wylogowanymi użytkownikami, w widoku listy. W takim przypadku wybierz kolumny zawierające pola ikon.
2. Z prawych ustawień, paska bocznego, przejdź do Ustawienia blokowania> Zaawansowane.
3. Ustaw warunki wyświetlania na Stan użytkownika.
4. Włącz opcję Ukryj przed wylogowanymi użytkownikami .
5. Zrób to dla obu kolumn.

Wtyczki WordPress do dostosowania strony Moje konto WooCommerce

Teraz, jeśli nie chcesz wykonywać całej pracy samodzielnie, oto 3 wtyczki, które mogą pomóc.

Strony kont WooCommerce autorstwa Iconic WP

Strona konta WooCommerce według wtyczki IconicWP jest jedną z najbardziej płynnych wtyczek dla WooCommerce i działa dobrze na wszystkich popularnych motywach WordPress.

Dzięki tej wtyczce możesz dodać własną zawartość do strony Moje konto. Możesz także dodać dowolną liczbę niestandardowych stron w obszarze Moje konto.

YITH WooCommerce Dostosuj stronę mojego konta

Strona YITH WooCommerce Dostosuj moje konto zawiera mnóstwo opcji dostosowywania.

Dzięki temu klienci mogą zobaczyć, czego potrzebują w sekcji Moje konto w Twojej witrynie. Dzięki nieograniczonym opcjom menu, masz dużo miejsca na instrukcje i powiadomienia, możesz zapewnić klientom solidne wrażenia.

Możesz także dodawać niestandardowe treści, takie jak ankiety, instrukcje, kupony, powiadomienia i filmy.

Dostosuj stronę Moje konto według ThemeGrill

Dostosuj stronę Moje konto od ThemeGrill jest dostępne w oficjalnym katalogu wtyczek WooCommerce.

Dzięki tej wtyczce możesz tworzyć wspaniałe strony „Moje konto”, dostosowując rozmiar czcionki, kolor i tło. Ponadto istnieje wiele opcji dodawania informacji, takich jak adresy lub metody płatności.

Możesz zaprojektować stronę tak, jak uznasz za odpowiednią i pasującą do ogólnej marki witryny.

Dostosuj swoją stronę Moje konto WooCommerce już dziś

To wszystko, co musisz zrobić, aby dostosować stronę Moje konto WooCommerce!

Ta metoda działa ze wszystkimi motywami i we wszystkich programach do tworzenia stron. Oto film, w którym dostosowujemy stronę Moje konto WooCommerce za pomocą Elementora.

Jeśli masz jakieś pytania lub komentarze, zostaw je w sekcji komentarzy poniżej, a my skontaktujemy się z Tobą tak szybko, jak to możliwe.