Jak dostosować stronę Moje konto WooCommerce za pomocą Elementora?

WooCommerce to jedna z najczęściej używanych platform eCommerce w Internecie. Niedawne badanie sugeruje, że co najmniej 5 milionów sklepów korzysta z WooCommerce do sprzedaży produktów (cyfrowych lub fizycznych) w Internecie. Niezwykłe, prawda?

W większości interfejs użytkownika i doświadczenie są takie same we wszystkich sklepach WooCommerce. Wszystkie sklepy mają podobny do koszyka dodatek do procesu kasy na stronie Moje konto. Strona Moje konto WooCommerce zawiera informacje dotyczące zamówienia użytkownika, faktur, metod płatności, adresów i innych szczegółów profilu. Tak więc, jeśli witryna ma dostosowaną stronę Moje konto, daje to oszałamiające wrażenie użytkownikowi.

Ale, jak wiemy, dostosowywanie stron WooCommerce nie jest łatwym zadaniem. Chociaż Elementor Pro ma widżety, których można użyć do dostosowania strony produktu w WooCommerce, nie ma żadnego widżetu do dostosowywania strony Moje konto.

Oto widżet WooCommerce Moje konto PowerPack, którego możesz użyć do dostosowania strony Moje konto w WooCommerce. Najlepsze jest to , że nie wymaga Elementor Pro! Tak, działa z bezpłatną wersją Elementora .

W tym samouczku zacznę od podstaw i zagłębimy się w dostosowywanie każdego aspektu strony Moje konto WooCommerce.

Więc bez zbędnych ceregieli, wskoczmy do tego!

Dostosowywanie strony Moje konto WooCommerce

Stworzyliśmy również krótki, konkretny film, który szczegółowo wyjaśnia, w jaki sposób możesz dostosować stronę Moje konto WooCommerce. Tak więc, jeśli podoba Ci się wyjaśnienie wideo, sugeruję, abyś na nie spojrzał.

Teraz kontynuujmy. Aby dostosować stronę Moje konto, użyjemy tych trzech wtyczek:

• Darmowa wersja Elementora: Pobierz Elementor.
• Wtyczka WooCommerce: Zdobądź WooCommerce.
• PowerPack dla Elementora: Zdobądź PowerPack.

Po zainstalowaniu i aktywowaniu tych wtyczek musisz utworzyć nową stronę, przechodząc do pulpitu WordPress> Strony > Dodaj nową. Nazwij stronę jako „Niestandardowa strona mojego konta WooCommerce” .

Następnie kliknij „Edytuj za pomocą Elementora” , aby otworzyć stronę w Kreatorze stron Elementor.

Uruchom Edytor Elementora

Gdy tylko klikniesz „Edytuj za pomocą Elementora” , otworzy się edytor Elementor. Następnie przeciągnij i upuść widżet Moje konto w edytorze Elementor. Gdy tylko dodasz widżet Moje konto , zobaczysz karty Moje konto z ustawieniami domyślnymi.

Poniższy zrzut ekranu przedstawia wygląd Twojej strony po dodaniu widżetu Moje konto .

Teraz, gdy dodaliśmy do strony widżet Moje konto WooCommerce PowerPack, dostosujemy i stylizujemy stronę Moje konto w naszym sklepie WooCommerce w zakładce treści i stylu edytora Elementor.

Dostosowanie widżetu Moje konto PowerPack WooCommerce w zakładce Treść

Na karcie Treść widżetu Moje konto znajdują się 2 sekcje: Podgląd i Karty .

• Podgląd: w tej sekcji możesz wybrać punkt końcowy, który zostanie dla Ciebie otwarty, aby dostosować stronę Moje konto w swojej witrynie. Dostępne punkty końcowe, z których możesz wybierać, to pulpit nawigacyjny, zamówienia, pliki do pobrania, adresy i szczegóły konta.

• Karty: W sekcji kart masz możliwość wyboru kart, które chcesz pokazać lub ukryć. Dostępne karty, które możesz pokazać/ukryć, to Pulpit nawigacyjny, Zamówienia, Pobrane pliki, Adresy, Szczegóły konta i Łącze do wylogowania .

Domyślnie nie masz możliwości pokazywania ani ukrywania zakładek na stronie Moje konto WooCommerce. Musiałbyś to zrobić programowo, gdybyś nie używał widżetu Moje konto PowerPack!

Teraz, gdy mamy już skonfigurowaną strukturę strony Moje konto, zmodyfikujmy ją tak, aby była oszałamiająca.

Stylizacja widżetu Moje konto PowerPack WooCommerce w zakładce Styl

Jak widać na powyższym zrzucie ekranu, widżet Moje konto składa się z 5 sekcji w zakładce stylu:

• Karty
• Stoły
• guziki
• Formularze
• Uwagi

Przejdźmy przez każdą z sekcji jeden po drugim.

• Karty : Jak sama nazwa wskazuje, tutaj możesz dostosować położenie kart, typografię zawartości karty, tło, tekst, link i kolory obramowania karty w domyślnej i aktywnej karcie. Możesz dodatkowo ustawić odstępy między kartami oraz odstępy między kartami a treścią .

• Tabele: W sekcji tabel możesz nadać styl tabeli „Zamówienia” na stronie Moje konto. Możesz ustawić typografię i styl obramowania całej tabeli naraz lub możesz ustawić każdy z nich jeden po drugim dla nagłówka, wierszy i komórek . Ponadto możesz również wybrać kolor tekstu , kolor tła i dopełnienie tekstu nagłówka, tekstu wiersza i tekstu w każdej z komórek.

• Przyciski: Ta sekcja służy do stylizowania przycisków znajdujących się w różnych zakładkach strony Moje konto. W tej sekcji możesz ustawić typografię, kolor tła, kolor tekstu i typ obramowania dla przycisków w stanie normalnym i aktywnym . Ponadto w tej sekcji możesz również ustawić dopełnienie i odstępy między przyciskami .

• Formularze: Strona Moje konto w Twoim sklepie WooCommerce składa się z formularzy, takich jak Adres wysyłkowy, Adres rozliczeniowy i Szczegóły konta. Tak więc w sekcji formularzy możesz stylizować pola tych formularzy. W formularzach możesz stylizować nagłówki, przycisk przesyłania, etykiety i pola wejściowe . Każdemu z tych pól można nadać styl, zmieniając kolor tekstu, tła, obramowania, cienia pola, linku i najechania linkiem .

Ponadto możesz wyrównać tekst w polu wprowadzania i zmienić szerokość przycisku przesyłania . Następnie możesz ustawić dopełnienie między każdym z pól i margines między nagłówkami i polami oraz poza przyciskiem przesyłania.

• Powiadomienia : w sekcji Powiadomienia możesz stylizować kolor tła, kolor tekstu, kolor ikony, właściwości obramowania, dopełnienie i typografię dla dowolnego powiadomienia wyświetlanego na dowolnej z zakładek na stronie Moje konto w sklepie WooCommerce.

Ustaw nowo utworzoną „Niestandardową stronę Moje konto WooCommerce” jako domyślną stronę Moje konto

Po skonfigurowaniu i dostosowaniu niestandardowej strony Moje konto WooCommerce, którą właśnie utworzyłeś, przejdź do WooCommerce >> Ustawienia >> Zaawansowane i wybierz stronę, którą właśnie utworzyłeś jako „stronę Moje konto”. Na poniższym zrzucie ekranu ustawiliśmy „Niestandardową stronę mojego konta WooCommerce”, którą utworzyliśmy w powyższym kroku jako domyślną „stronę mojego konta”.

Spowoduje to otwarcie niestandardowej strony Moje konto WooCommerce , którą utworzyłeś za pomocą widżetu WooCommerce Moje konto PowerPack za każdym razem, gdy użytkownik podejdzie, aby zalogować się do Twojej witryny.

Zawijanie!

W powyższych krokach dostosowaliśmy i wystylizowaliśmy naszą stronę Moje konto WooCommerce, aby miała szczególnie oszałamiający stylowy wygląd i styl. Aby uzyskać ten efekt, zastosowaliśmy kombinację kolorów, stylów obramowania i box-shadow. Możesz sprawdzić opcje, których użyliśmy na powyższych zrzutach ekranu.

Sprawdź naszą stronę Moje konto WooCommerce dostosowaną poniżej za pomocą widżetu WooCommerce Moje konto PowerPack !

Jestem pewien, że z pomocą tego samouczka byłbyś w stanie łatwo skonfigurować niestandardową stronę Moje konto WooCommerce.

Możesz zrobić o wiele więcej dzięki dodatkowi PowerPack dla Elementora. Istnieje ponad 70 kreatywnych widżetów, których możesz użyć do dostosowania swoich stron Elementora. Jeśli chcesz dowiedzieć się więcej o dodatku PowerPack dla Elementora, sprawdź tutaj.

Jakie są Twoje przemyślenia na temat tego samouczka? Udostępnij, jeśli ten przewodnik okazał się przydatny!