Jak dostosować stronę mojego konta w WooCommerce (wtyczki i programowo)

Szukasz łatwych sposobów na edycję i personalizację strony Moje konto? W tym przewodniku dowiesz się, jak dostosować stronę Moje konto WooCommerce zarówno programowo, jak i za pomocą wtyczek , aby przenieść swój sklep na wyższy poziom.

Utworzenie strony Moje konto może mieć kluczowe znaczenie dla każdego sklepu internetowego. Ta strona jest zwykle pomijana przez większość właścicieli sklepów, ale może pomóc Ci wyróżnić się na tle konkurencji i zapewnić kupującym znacznie lepszą obsługę klienta. Zanim przejdziemy do tego, jak go edytować, przyjrzyjmy się bliżej, dlaczego tak ważne jest dostosowanie strony Moje konto WooCommerce.

Jaka jest moja strona konta i dlaczego warto ją dostosować?

Strona Moje konto w WooCommerce to miejsce, w którym właściciele sklepów przechowują informacje o danych osobowych klientów, rozliczeniach i adresach wysyłkowych. Dodatkowo to tam użytkownicy mogą sprawdzić swoje zamówienia. Domyślna strona Moje konto to prosta strona WordPress, która zawiera krótki kod WooCommerce.

 [ woocommerce_my_account ]

Ta strona domyślna zawiera wszystkie podstawowe informacje potrzebne użytkownikom, ale możesz je w pełni wykorzystać, chyba że dostosujesz stronę Moje konto. Możesz używać tej strony do różnych celów. Oprócz przekazywania swoim klientom informacji o ich zamówieniach, możesz skonfigurować kupony i kody rabatowe i wyświetlać je tam, a nawet dostarczać im ekskluzywne alerty, oferty rabatowe i alerty sprzedażowe.

Strona Moje konto otwiera mnóstwo możliwości dodatkowej interakcji z klientami, jednocześnie znacznie poprawiając ich wrażenia z zakupów. Na przykład możesz pozwolić kupującym zapisać szczegóły płatności, adresy wysyłki i dodatkowe szczegóły konta oraz zintegrować je z procesem realizacji transakcji.

Podobnie możesz udostępnić im listę pobrań i wirtualnych produktów, które przynieśli bezpośrednio na stronie Moje konto, a nawet umożliwić im otwieranie zgłoszeń do pomocy technicznej premium i kontaktowanie się z nimi bezpośrednio ze strony Moje konto.

Jeśli prowadzisz stronę WooCommerce i chcesz, aby była jak najbardziej wygodna dla swoich klientów, zdecydowanie powinieneś dostosować stronę Moje konto w WooCommerce.

Jak dostosować stronę Moje konto w WooCommerce?

Istnieją dwa sposoby edytowania strony Moje konto:

1. Z wtyczkami
2. Programowo

W tym przewodniku opiszemy obie metody, abyś mógł wybrać tę, która najbardziej Ci odpowiada.

1) Edytuj stronę Moje konto za pomocą wtyczek

Istnieje kilka wtyczek do edycji strony Moje konto. Aby ułatwić Ci życie, przyjrzymy się naszej selekcji najlepszych narzędzi. Wtyczki te zawierają wszystkie niezbędne dostosowania, aby Twoja strona Moje konto WooCommerce była wyjątkowa, wygodna i przyjazna dla użytkownika. Jeśli nie masz umiejętności kodowania, najlepszym rozwiązaniem jest używanie wtyczek.

Możesz edytować zakładki strony Moje konto, tworzyć nowe, a nawet dostosowywać jej wygląd za pomocą dedykowanych dostosowań i mnóstwa opcji dostosowywania. Bez zbędnych ceregieli, jest to nasza osobista rekomendacja wtyczek, których możesz użyć do dostosowania strony Moje konto w WooCommerce.

1) Dostosowywanie sklepu

StoreCustomizer to darmowa wtyczka WordPress, która pomoże Ci dostosować wszystkie strony WooCommerce. Obejmuje to wszystko, od dodawania pozycji do menu po zarządzanie sklepem, produktami, stronami kasy, a nawet moim kontem. Możesz dowolnie zmieniać jego nazwę, usuwać zakładki i różne opcje, aby zmienić styl strony Moje konto na 2 różne sposoby.

Jedną wielką zaletą StoreCustomizer jest to, że nie wymaga żadnych zmian w szablonach motywów ani nawet konfigurowania haków WooCommerce. Wtyczka jest niezwykle lekka i przyjazna dla użytkownika. Ponadto w wersji premium masz dostęp do większej liczby opcji dostosowywania strony Moje konto, takich jak dodawanie niestandardowych kart i edytowanie zawartości kart za pomocą edytorów Gutenberg jako wtyczki do tworzenia stron.

Kluczowe cechy

• Przyjazna dla użytkownika wtyczka, która dostosowuje strony WooCommerce bez zmiany plików motywów.
• W pełni zintegrowany z WordPress Live Customizer.
• Umożliwia zmianę nazwy i usuwanie zakładek Moje konto oraz zmianę stylu zakładek.
• Wersja premium umożliwia pełną personalizację zakładki Moje konto, a także dodawanie niestandardowych zakładek.

Cena £

To jest wtyczka freemium. Ma darmową wersję z podstawowymi funkcjami i czterema planami premium, które zaczynają się od 29 USD rocznie.

2) Wzmacniacz

Booster to kompletna odpowiedź na dostosowywanie stron WooCommerce bez konieczności kodowania. Ta wtyczka zawiera szeroką gamę modułów, które pomogą Ci edytować różne funkcje i strony WooCommerce. Obejmuje to również stronę Moje konto. Możesz łatwo zmienić punkty końcowe kart, tak aby kliknięcie karty przeniosło Cię do dowolnej określonej strony.

Dodatkowo możesz dodawać niestandardowe strony, a nawet dostosowywać określone strony i karty. Na przykład możesz dostosować komunikaty na pulpicie, a nawet zezwolić swoim klientom na ręczną zmianę statusu zamówienia z poziomu ich zakładki zamówień. Jeśli szukasz kompletnego rozwiązania, aby dostosować stronę Moje konto, Booster jest zdecydowanie świetną odpowiedzią.

Kluczowe cechy

• Wszystko w jednej wtyczce do dostosowywania stron, funkcji i szablonów WooCommerce.
• Dostosowywanie punktów końcowych kart dla stron Moje konto.
• Udostępnia opcje dostosowywania zakładki pulpitu nawigacyjnego.
• Dodawaj zakładki niestandardowe, a także zmieniaj nazwy, styl i kolejność zakładek Moje konto.

Cena £

Booster ma darmową wersję z ograniczonymi funkcjami i czterema planami premium, które zaczynają się od 99,99 USD rocznie.

3) Dostosuj moje konto do WooCommerce

Dostosuj moje konto do WooCommerce to opcja premium, która pozwala dostosować i spersonalizować stronę Moje konto tak, jak chcesz. Za pomocą tego narzędzia możesz edytować i dodawać dowolną liczbę punktów końcowych. Możesz zmieniać nazwy, kolejność i dostosowywać wszystkie swoje karty za pomocą dostosowywania na żywo. Co więcej, możesz dowolnie zmieniać etykiety kart, dodawać ikony, a nawet dołączać do nich niestandardową treść bez konieczności kodowania.

Ponadto ta wtyczka zawiera zaawansowane opcje edycji wraz z dostosowywaniem na żywo, aby spersonalizować stronę Moje konto. Możesz zmienić rozmiar i kolory czcionki, obrazy tła, kolory, dopełnienie i margines. Możesz także dodać własny niestandardowy kod CSS, aby przenieść dostosowywanie na zupełnie nowy poziom.

Kluczowe cechy

• Łatwy w użyciu i w pełni zintegrowany z konfiguratorem Live.
• Pełna personalizacja wszystkich zakładek i punktów końcowych na stronie Moje konto.
• Opcje zmiany etykiet kart, dodawania niestandardowej zawartości, obrazów i ikon kart.
• Obsługuje niestandardowy kod CSS w celu dodatkowego dostosowania.

Cena £

Dostosuj moje konto do WooCommerce to wtyczka premium, która przywróci Ci 49 USD rocznie.

Dostosowywanie strony Moje konto za pomocą WooCommerce StoreCustomizer

Przyjrzyjmy się teraz, jak używać StoreCustomizer do dostosowywania strony Moje konto WooCommerce. Darmowa wersja umożliwia edycję nazw zakładek lub zmianę stylu zakładek, podczas gdy do dodawania nowych zakładek potrzebny jest plan Pro. Nawet jeśli wybierzesz inną wtyczkę, ta sekcja pomoże Ci lepiej zrozumieć, jak używać wtyczki do dostosowywania strony Moje konto.

Najpierw zainstalujmy wtyczkę StoreCustomizer . Otwórz pulpit nawigacyjny administratora WordPress i przejdź do Wtyczki > Dodaj nowy. Następnie użyj paska wyszukiwania w prawym górnym rogu, aby wyszukać StoreCustomize r. Kliknij Zainstaluj , a następnie Aktywuj . Teraz wtyczka powinna zostać aktywowana i zainstalowana.

Aby rozpocząć dostosowywanie strony Moje konto, przejdź do WooCommerce > StoreCustomizer .

Spowoduje to otwarcie interfejsu wtyczki i udostępnienie wszystkich opcji dostosowywania oferowanych przez wtyczkę. Ponieważ zamierzamy dostosować stronę Moje konto, kliknij przycisk Dostosuj ustawienia u dołu strony.

Korzystanie ze StoreCustomizer

Powinno to otworzyć okno Live Customizer i powinieneś być w stanie zobaczyć kartę Store Customizer w menu. Kliknij go, a następnie przejdź do zakładki Strona konta pod nim.

Teraz zacznijmy edytować stronę Moje konto. Najpierw zmieńmy opcje stylizacji kart. Kliknij opcję Projekt karty konta i zmień ją na Styl poziomy lub Styl karty bocznej.

Możemy również wybrać opcję usunięcia kart lub zmiany ich nazwy, więc zmieńmy nazwę karty Adresy na Adres wysyłkowy i usuń kartę Pobrane.

Zmiana nazwy kart strony Moje konto za pomocą narzędzia Store Customize

Aby zmienić nazwę, przejdź do karty, której nazwę chcesz zmienić, i kliknij Edytuj tekst karty . Następnie po prostu wpisz nowy tekst karty w polu tytułu karty i powinien pojawić się w prawym oknie dostosowywania na żywo. Możesz także zmienić tytuł strony, który pojawia się po kliknięciu Tab. Po prostu zmień tekst w tytule strony i to powinno wystarczyć.

Usuwanie zakładek strony Moje konto za pomocą narzędzia Store Customize

Aby usunąć kartę, po prostu kliknij przycisk Usuń kartę pod kartą, którą chcesz ukryć. Na przykład, jeśli chcesz usunąć kartę Pobrane, po prostu wybierz opcję Usuń kartę pod nią.

Pamiętaj, że w każdej chwili możesz zresetować dowolne zmiany na karcie. Klikając ikonę resetowania pod zakładkami, możesz przywrócić domyślne ustawienia zakładek Moje konto .

Teraz zalecamy, abyś kontynuował i dostosowywał zakładki strony Moje konto WooCommerce tak bardzo, jak chcesz i edytował swoje zakładki. Jeśli jednak chcesz dodać nowe karty i punkty końcowe, musisz kupić wersję premium StoreCustomizer . Proces dodawania nowych kart jest identyczny i możesz po prostu otworzyć ekran dostosowywania, aby to zrobić.

Możesz również zapoznać się z dokumentacją wtyczki, aby jak najlepiej wykorzystać wtyczkę i cały zakres dostosowań WooCommerce. Po zakończeniu dostosowywania strony Moje konto pamiętaj, aby kliknąć Opublikuj u góry ekranu dostosowania, aby zapisać zmiany.

Chociaż opcja dostosowania strony Moje konto za pomocą wtyczki jest łatwiejsza i bardziej usprawniona, większość wtyczek kosztuje znaczną ilość pieniędzy, aby zapewnić szeroki zakres funkcji. Jeśli więc chcesz jak najlepiej wykorzystać swoją stronę Moje konto, ale masz ograniczony budżet, zakodowanie własnego rozwiązania jest świetną alternatywą.

Zobaczmy, jak możesz programowo dostosować stronę Moje konto WooCommerce .

2) Programowo dostosuj stronę Moje konto w WooCommerce

Jeśli masz umiejętności kodowania, możesz również dostosować stronę Moje konto programowo , edytując pliki szablonów WooCommerce lub używając haków WooCommerce . Przed rozpoczęciem zdecydowanie zalecamy utworzenie motywu potomnego lub użycie dowolnej z tych wtyczek i wygenerowanie pełnej kopii zapasowej instalacji WordPress.

W ramach naszej demonstracji pokażemy, jak programowo dostosować stronę Moje konto za pomocą haków WooCommerce. Nie wymaga to edytowania plików szablonów, więc istnieje mniejsze prawdopodobieństwo, że coś zepsujesz.

Jeśli jednak potrzebujesz więcej opcji dostosowywania strony Moje konto za pomocą odrobiny kodowania, zapoznaj się z naszym pełnym przewodnikiem dotyczącym programowej edycji strony Moje konto. Więcej informacji na temat dostosowywania szablonów znajdziesz w tym samouczku.

Dostosowywanie strony Moje konto w WooCommerce za pomocą haków WooCommerce

Jeśli nie znasz haków WooCommerce, zalecamy zapoznanie się z naszym przewodnikiem po hakach WooCommerce , aby lepiej zrozumieć, jak działają. Następnie wykonaj następujące kroki, aby dostosować i wprowadzić zmiany na stronach Moje konto.

Aby rozpocząć proces, w panelu administratora WordPress przejdź do Wygląd > Edytor motywów , aby otwórz edytor motywów .

Następnie przejdź do pliku functions.php na liście Pliki motywów na prawym pasku bocznym. Teraz, korzystając z edytora, możesz dodać swoje funkcje niestandardowe do pliku funkcji motywu podrzędnego .

Zmiana nazwy kart za pomocą haków WooCommerce

Aby zmienić nazwę karty za pomocą zaczepów WooCommerce, dodaj następujący skrypt do pliku functions.php . Ten skrypt zmieni nazwę Twojej karty Adresy na Twoje adresy , ale możesz edytować skrypt i używać żądanej nazwy.

 add_filter( 'woocommerce_account_menu_items', 'QuadLayers_rename_acc_adress_tab', 9999 );
function QuadLayers_rename_acc_adress_tab( $items ) {
$items['edit-address'] = 'Twoje adresy';
zwróć $pozycje;
} 

Następnie zapisz zmiany i sprawdź frontend, aby zobaczyć zmiany.

Możesz także edytować ten skrypt i zmieniać dowolne nazwy swoich kart. Aby to zrobić, po prostu zmień nazwę tablicy $items . Możesz sprawdzić pełną listę dostępnych slugów dla tablicy $items tutaj.

 $elementy = tablica(
'dashboard' => __( 'Dashboard', 'woocommerce' ),
'zamówienia' => __( 'Zamówienia', 'woocommerce' ),
'downloads' => __( 'Downloads', 'woocommerce' ),
'edit-address' => _n( 'Adresy', 'Adres', (int) wc_shipping_enabled(), 'woocommerce' ),
'payment-methods' => __( 'Metody płatności', 'woocommerce' ),
'edit-account' => __( 'Szczegóły konta', 'woocommerce' ),
'customer-logout' => __( 'Wyloguj', 'woocommerce' ),
);

Na przykład, jeśli chcesz zmienić nazwę karty Zamówienia na Twoje zamówienia , możesz zmienić trzeci wiersz skryptu na $items['orders'] = 'Twoje zamówienia'. Musisz także zmienić nazwę filtra na QuadLayers_rename_orders_tab , aby nowa funkcja nie była taka sama jak powyższa. Po wprowadzeniu tych zmian nowy skrypt będzie wyglądał następująco:

 add_filter( 'woocommerce_account_menu_items', 'QuadLayers_rename_orders_tab', 9999 );
function QuadLayers_rename_orders_tab( $items ) {
$items['orders'] = 'Twoje zamówienia';
zwróć $pozycje;
}

W ten sposób możesz edytować plik functions.php i zmieniać nazwy wszystkich swoich kart. Gdy będziesz zadowolony ze zmian, kliknij Aktualizuj plik i gotowe.

Usuwanie zakładek za pomocą haków WooCommerce

Oprócz zmiany nazw kart, możesz również usuwać karty na stronie Moje konto za pomocą funkcji unset() z tablicą $items. Na przykład, aby usunąć kartę Szczegóły konta , musisz użyć następującego skryptu.

 add_filter( 'woocommerce_account_menu_items', 'QuadLayers_remove_acc_tab', 999 );
function QuadLayers_remove_acc_tab( $items ) {
unset($items['edit-account']);
zwróć $pozycje;
} 

Zapisz zmiany, a następnie sprawdź frontend. Zobaczysz, że nie ma karty Szczegóły konta .

Używając tego samego skryptu, możesz go dostosować i usunąć dowolną kartę. Na przykład, jeśli chcesz ukryć zakładkę pobierania, musisz zmienić nazwę funkcji i tablicę elementów z $items['edit-account'] na $items['downloads']. Więc teraz twój nowy skrypt będzie wyglądał mniej więcej tak.

 add_filter( 'woocommerce_account_menu_items', 'QuadLayers_remove_download', 9999 );
function QuadLayers_remove_downloads( $items ) {
unset( $items['downloads'] );
zwróć $pozycje;
}

Następnie kliknij Aktualizuj plik , aby zastosować zmiany. To tylko kilka rzeczy, które możesz zrobić, aby dostosować stronę Moje konto w WooCommerce, ale nie ograniczasz się tylko do usuwania i zmiany nazwy. Możesz także scalać karty, tworzyć niestandardowe karty i wiele więcej. Aby dowiedzieć się, jak w pełni programowo wykorzystać stronę Moje konto, zdecydowanie zalecamy skorzystanie z naszego przewodnika krok po kroku.

Wniosek

I na tym kończy się nasz przewodnik dotyczący dostosowywania strony Moje konto WooCommerce . Pomoże Ci to poprawić jakość obsługi klienta i wyróżnić się na tle konkurencji.

Jeśli chodzi o naszą rekomendację, jakiej metody użyć do edycji strony Moje konto, zależy to od Twoich potrzeb i umiejętności. Jeśli nie masz umiejętności kodowania lub nie chcesz edytować plików szablonów swojego motywu, wtyczki są najlepszą opcją. Ta alternatywa jest wygodniejsza i przyjazna dla początkujących. Dodatkowo upewniasz się, że nie zepsujesz niczego w swojej instalacji WordPressa, używając niestandardowych funkcji i szablonów.

W tym poście pokazaliśmy Ci jedne z najlepszych 3 wtyczek do edycji strony Moje konto. Jeśli chcesz rzucić okiem na inne opcje, sprawdź ten post. Z drugiej strony, jeśli wiesz, jak kodować i chcesz mieć pełną elastyczność, możesz programowo dostosować stronę Moje konto. W tym celu możesz zastąpić domyślne pliki szablonów WooCommerce lub użyć haków WooCommerce.

W tym przewodniku pokazaliśmy, jak korzystać z hooków, ale jeśli chcesz uzyskać więcej informacji na temat dostosowywania strony Moje konto za pomocą niestandardowych skryptów, zdecydowanie zalecamy zapoznanie się z tym samouczkiem.

• Jak dostosować stronę sklepu w WooCommerce?
• Dostosuj przycisk Dodaj do koszyka w WooCommerce
• Jak edytować kasę WooCommerce (kodowanie i wtyczki)
• Jak dostosować stronę produktu WooCommerce w Divi

Na koniec, niezależnie od wybranej metody, daj nam znać w komentarzach, jeśli masz jakiekolwiek problemy z konfiguracją strony Moje konto.