Jak programowo edytować stronę Moje konto WooCommerce?

Opublikowany: 2020-12-22

Czy chcesz dostosować stronę Moje konto w swoim sklepie? Trafiłeś we właściwe miejsce. W tym przewodniku pokażemy, jak programowo edytować stronę Moje konto WooCommerce, aby pomóc Ci poprawić jakość obsługi klienta.

Co to jest strona Moje konto?

Domyślnie sklepy WooCommerce zawierają stronę Moje konto, na której użytkownicy mogą przeglądać swoje zamówienia i gdzie przechowujesz informacje o danych osobowych, rozliczeniach i adresach wysyłkowych klientów. Domyślna strona Moje konto to strona WordPress, która zawiera krótki kod WooCommerce.

[ woocommerce_my_account ]

Mimo że ta gotowa do użycia strona zawiera wszystkie podstawowe informacje potrzebne użytkownikom do zarządzania zamówieniami i ustawieniami, edycja strony Moje konto może pomóc Ci wyróżnić się na tle konkurencji i zapewnić lepsze wrażenia użytkownika.

Po co dostosowywać stronę Moje konto w WooCommerce?

Nie jest tajemnicą, że zapewnienie doskonałego UX jest kluczem do sukcesu każdego sklepu eCommerce. Użytkownicy kupują online, ponieważ jest to szybkie i wygodne, więc upewnij się, że Twój sklep zapewnia im narzędzia, których potrzebują, aby mieć niesamowite wrażenia.

Większość właścicieli sklepów skupia swoją uwagę na dostosowywaniu strony produktu i kasy, ale zapomina o stronie Moje konto. Ponieważ jest to strona przeznaczona dla zarejestrowanych użytkowników, dostosowanie jej może pomóc w poprawie ich obsługi w Twojej witrynie . Dodatkowo może pomóc Ci skłonić ich do powrotu do Twojego sklepu i zwiększyć sprzedaż . Na przykład możesz utworzyć specjalną sekcję, w której pokażesz im spersonalizowane oferty i promocje.

Przeanalizowaliśmy już najlepsze wtyczki, aby dostosować stronę Moje konto. Jeśli jednak nie chcesz instalować żadnych narzędzi innych firm i masz pewne umiejętności kodowania, mamy coś dla Ciebie. W tym przewodniku pokażemy, jak programowo edytować stronę Moje konto WooCommerce .

Jak programowo edytować stronę Moje konto WooCommerce?

Istnieją dwie różne techniki edycji strony Moje konto w WooCommerce:

Możesz zastąpić domyślne pliki szablonów WooCommerce
Użyj niektórych haków WooCommerce

Która metoda jest lepsza? Każda z tych opcji jest bardziej odpowiednia w różnych przypadkach. Generalnie powinieneś starać się używać hooków zamiast nadpisywania plików szablonów tam, gdzie to możliwe. Jest to jedna z najlepszych praktyk zalecanych przez WordPress podczas dostosowywania witryny.

Jeśli jednak chcesz wykonać bardziej złożone zadania, które obejmują funkcje lub obiekty, może być konieczna edycja plików szablonów. W tym przewodniku dowiesz się, jak programowo edytować stronę Moje konto WooCommerce przy użyciu obu metod. Jak możesz sobie wyobrazić, edytowanie plików szablonów wiąże się z większym ryzykiem niż używanie haków, więc miej to na uwadze przed wybraniem żądanej opcji.

1) Dostosuj stronę Moje konto nadpisując pliki szablonów

UWAGA : Ponieważ ta metoda polega na zastąpieniu plików szablonów, przed rozpoczęciem zalecamy utworzenie pełnej kopii zapasowej witryny. Jeśli nie wiesz, jak to zrobić, zapoznaj się z tym przewodnikiem. Więcej szczegółowych informacji na temat dostosowywania szablonów WooCommerce znajdziesz w tym poście.

Proces zastępowania plików szablonów WooCommerce jest podobny do zastępowania dowolnego innego pliku w motywie podrzędnym. Jak wiesz, motywy potomne umożliwiają edycję motywu bez utraty dostosowań po aktualizacji motywu. To samo dotyczy wtyczek WooCommerce, więc jeśli nie masz motywu podrzędnego, możesz go utworzyć lub użyć dowolnej z tych wtyczek.

Najpierw w panelu administratora WordPress przejdź do Wtyczki > Edytor . Następnie przejdź do folderu wtyczek, otwórz WooCommerce i znajdź pliki szablonów. W tym celu możesz użyć edytora plików wtyczki WordPress lub dowolnego edytora kodu. W katalogu WooCommerce otwórz plik szablonów i poszukaj folderu myaccount .

plugins/woocommerce/templates/myaccount

Jak programowo edytować stronę Moje konto WooCommerce - Pliki szablonów

Otwórz folder /myaccount , a znajdziesz wszystkie pliki szablonów używane na stronie Moje konto. woocommerce moje pliki szablonów konta

Są to domyślne pliki, które aktualnie działają w Twojej witrynie. Aby zastąpić te pliki, musisz utworzyć nowy plik o tej samej nazwie w motywie potomnym. Jeśli jednak utworzysz pusty plik, wyłączysz wszystkie funkcje oryginalnego pliku. Aby uniknąć tworzenia problemów w witrynie, musisz skopiować domyślny plik i wkleić go do folderu motywu.

Załóżmy na przykład, że chcesz skopiować plik dashboard.php z instalacji WooCommerce. Przed wklejeniem go do motywu potomnego musisz utworzyć dwa zagnieżdżone podkatalogi i nazwać je /woocommerce i /myaccount . Następnie wklej do niego plik dashboard.php : child_theme/woocommerce/myaccount/dashboard.php Programowo edytuj stronę Moje konto WooCommerce - Zastępowanie pliku szablonu

Teraz otwórz plik dashboard.php i wprowadź kilka drobnych zmian, aby upewnić się, że działa poprawnie. Otóż to! Właśnie nauczyłeś się, jak zastąpić plik szablonu WooCommerce. To pierwszy krok. Przejdźmy teraz o krok dalej i zobaczmy, jak dostosować stronę Moje konto.

Dostosuj pulpit nawigacyjny strony Moje konto

Teraz, gdy wiesz, jak zastąpić pliki szablonów, zobaczmy, jak programowo edytować stronę Moje konto WooCommerce. W tej sekcji pokażemy, jak dostosować główny pulpit nawigacyjny strony Moje konto. Pod koniec tego procesu strona Moje konto będzie wyglądać tak:

dostosuj szablon pulpitu nawigacyjnego mojego konta woocommerce Dodaliśmy obraz nagłówka i tekst pod nim. Dodatkowo utworzyliśmy listę z linkami do sekcji, które użytkownicy odwiedzają częściej, stopkę i linki do obrazów, aby klienci mogli łatwo się z Tobą skontaktować.

Pełny skrypt

To jest ostatni plik dashboard.php , który tworzy powyższy zrzut ekranu.

 if ( ! zdefiniowano( 'ABSPATH' ) ) {
Wyjście; // Zakończ w przypadku bezpośredniego dostępu.
}
$allowed_html = tablica (
'a' => array('href' => array(),)
);
?>
<h2>
<?php
drukujf(
/* tłumacze: 1: nazwa wyświetlana użytkownika 2: adres URL wylogowania */
wp_kses( __( 'Hej %1$s, wróciłeś! ', 'woocommerce' ), $allowed_html ),
'<strong>' . esc_html( $bieżący_użytkownik->wyświetlana_nazwa) . „</strong>”,
esc_url( wc_logout_url() )
);
?>
</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSBg81lLt4o-uEuBTgrMCwhDhX1HJKLCPTSxA&usqp=CAU"/>
<h3>
<?php
/* tłumacze: 1: Adres URL zamówień 2: Adres URL 3: Adres URL konta. */
$dashboard_desc = __( 'To jest główny pulpit nawigacyjny Twojego konta: ', 'woocommerce' );
jeśli ( wc_shipping_enabled() ) {
/* tłumacze: 1: Adres URL zamówień 2: Adresy URL 3: Adres URL konta. */
$dashboard_desc = __( 'To jest główny pulpit nawigacyjny Twojego konta:', 'woocommerce' );
}
drukujf(
wp_kses ($dashboard_desc,$allowed_html),
esc_url( wc_get_endpoint_url( 'zamówienia' ) ),
esc_url( wc_get_endpoint_url( 'edytuj-adres' ) ),
esc_url( wc_get_endpoint_url( 'edytuj-konto' ) )
);
$ul_list = __('<ul>
<li>Wyświetl swoje <a href="%1$s">ostatnie zamówienia</a></li>
<li>Zarządzaj <a href="%2$s">adresami dostawy i rozliczeniowymi</a></li>
<li><a href="%3$s">Edytuj swoje hasło i dane konta</a></li>
</ul>');
$div_contact = __('
<div class="acc_contact">
<span class="acc_images" >
<a href="#link do wysłania wiadomości WhatsApp"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/whatsapp-icon.png"/></a>
<a href="#link do profilu na Facebooku"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/fcbk-icon.png"/></a>
<a href="#link do profilu Twittera"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/twitter-icon.png"/></a>
<a href="#link do wysłania wiadomości e-mail"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/email-icon2.png"/></a>
</span>
</div>');
$div_footer=__('
<div>
<h4><i>Zbudowany z miłością!</i></h4>
<img src="http://localhost/Sampler/wp-content/uploads/2020/08/ql-logo-300x65.png"/>
</div>');
?>
</h3>
<p>Zarządzaj profilem i danymi osobowymi tutaj. Wypełnij wszystkie pola, abyśmy mogli się o Tobie dowiedzieć. Wszystkie edycje wprowadzone na Twoim koncie zostaną natychmiast odzwierciedlone w witrynie, dzięki czemu inni użytkownicy będą mogli bezzwłocznie dowiedzieć się o Tobie i Twoich bieżących potrzebach</p>
<?php
echo $ul_list.$div_footer.$div_contact;

Jeśli spojrzysz na kod, zobaczysz, że cały oryginalny kod, który skopiowaliśmy z domyślnego szablonu, nadal tam jest. Właśnie zmodyfikowaliśmy niektóre ciągi i zmieniliśmy kolejność linków jako listy. Ponadto użyliśmy dodatkowych skryptów, aby dodać więcej treści do karty. Aby lepiej zrozumieć wprowadzone przez nas zmiany, możesz sprawdzić domyślny dashboard.php .

Dodawanie obrazów

Aby wyświetlić obrazy na stronie Moje konto, musisz zastąpić adresy URL obrazów. To samo dotyczy linków do obrazów ikon społecznościowych.

Dostosowania CSS

Innym sposobem dostosowania strony Moje konto – i każdej innej strony – jest użycie skryptów CSS. Oto skrypt CSS, którego użyliśmy do stylizacji naszego niestandardowego pliku dashboard.php :

 .woocommerce-MyAccount-treść > h2:nth-child(2),
.woocommerce-MyAccount-treść > h3:nth-child(4){
wyrównanie tekstu:środek;
}
.acc_contact{
dopełnienie górnej:20px;
wyrównanie tekstu:środek;
}
.acc_contact > h3{
pływak:w lewo;
}
.acc_images{
margines:auto;
szerokość: 50%;
Blok wyświetlacza;
}
#Witamy{
margines:auto;
}
.acc_images obraz {
margines lewy: 4px;
margines prawy: 4px;
display:inline-block;
szerokość:55px;
}
#acc_footer{
margines górny:15px;
kolor tła: #202020;
wyrównanie tekstu: środek;
promień obramowania: 15px;
}
#acc_footer > h4{
dopełnienie górnej:20px;
kolor:rgb(235, 228, 228);
grubość czcionki:pogrubienie;
}
#acc_footer > obraz{
margines:auto;
dopełnienie-dolne:20px;
}

Możesz wziąć ten kod jako podstawę, wkleić go do pliku style.css motywu podrzędnego i dostosować go do wyglądu i stylu swojej witryny.

2. Edytuj stronę Moje konto WooCommerce za pomocą zaczepów

Drugą metodą programowej edycji strony Moje konto jest użycie niektórych haków WooCommerce. W tym celu musisz mieć podstawową wiedzę na temat działania hooków w WooCommerce. Jeśli nie znasz się na haczykach, zalecamy zapoznanie się z tym przewodnikiem.

A) Zmień nazwy kart

Ten skrypt zmieni nazwę karty Adres na Twoje adresy .

 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;
}

B) Usuń zakładki

Aby całkowicie usunąć dowolną kartę, użyj funkcji unset() w następujący sposób:

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

W powyższym skrypcie usunęliśmy zakładkę Downloads . Możesz znaleźć pełną listę tabulatorów w tablicy $items , więc możesz wybrać ten, który chcesz.

 $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' ),
);

C) Scal zakładki i zawartość

Inną opcją dostosowania strony Moje konto jest scalenie kart . Na przykład zobaczmy, jak usunąć zakładkę Adresy i przenieść jej zawartość do zakładki Konto .

 // ------------------------------
// 1. Usuń kartę Adresy
add_filter( 'woocommerce_account_menu_items', 'QuadLayers_remove_acc_tab', 999 );
function QuadLayers_remove_acc_tab( $items ) {
unset($items['edit-address']);
zwróć $pozycje;
}
// -------------------------------
// 2. Wstaw zawartość zakładki Adresy do istniejącej zakładki (w tym przypadku edytuj konto)
add_action( 'woocommerce_account_edit-account_endpoint', 'woocommerce_account_edit_address' );

Teraz zakładka Konto będzie wyglądać tak: scal zawartość karty woocommerce na moim koncie

D) Dodaj nową kartę z niestandardową zawartością

Zobaczmy teraz, jak dodać zawartość do strony Moje konto . W tym przykładzie dodamy nową zakładkę o nazwie Wsparcie, w której użytkownicy będą mogli łatwo przejrzeć swoje zgłoszenia do pomocy technicznej. Użyjemy dwóch krótkich kodów dostarczonych przez wtyczkę innej firmy, aby wyświetlić interesujące treści, ale powinieneś być w stanie użyć dowolnego skrótu na nowej karcie.

Należy jednak pamiętać, że niektóre skróty mogą nie działać z powodu niezgodności z WooCommerce. Aby dodać kartę Pomoc z niestandardową zawartością do strony Moje konto WooCommerce, wklej następujący kod w pliku functions.php motywu potomnego.

 // 1. Zarejestruj nowy punkt końcowy
// Uwaga: ponownie zapisz permalinki lub da błąd 404  
function QuadLayers_add_support_endpoint() {
    add_rewrite_endpoint( 'wsparcie', EP_ROOT | EP_PAGES );
}  
add_action( 'init', 'QuadLayers_add_support_endpoint' );  
// ------------------
// 2. Dodaj nowe zapytanie
function QuadLayers_support_query_vars( $vars ) {
    $vars[] = 'wsparcie';
    zwróć $vars;
}  
add_filter( 'query_vars', 'QuadLayers_support_query_vars', 0 );  
// ------------------
// 3. Wstaw nowy punkt końcowy 
function QuadLayers_add_support_link_my_account( $items ) {
    $items['support'] = 'Wsparcie';
    zwróć $pozycje;
}  
add_filter( 'woocommerce_account_menu_items', 'QuadLayers_add_support_link_my_account' );
// ------------------
// 4. Dodaj zawartość do nowego punktu końcowego  
funkcja QuadLayers_support_content() {
echo '<h3>Wsparcie</h3><p>Witamy w obszarze wsparcia. Jako klient premium zarządzaj tutaj swoimi zgłoszeniami pomocy technicznej, możesz przesłać zgłoszenie, jeśli masz jakiekolwiek problemy z witryną. Dołożymy wszelkich starań, aby zapewnić Ci szybkie i wydajne rozwiązanie</p>';
echo do_shortcode( '[skrócony kod-biletów]' );
echo do_shortcode( '[wpforms]' );
}  
add_action( 'woocommerce_account_support_endpoint', 'QuadLayers_support_content' );

Jeśli po kliknięciu nowej karty pojawi się błąd nie znaleziono strony 404, otwórz stronę permalink, przechodząc do pulpitu nawigacyjnego WordPress> Ustawienia> Permalinki i kliknij przycisk Zapisz na dole.

Zauważ, że skrypt jest podzielony na cztery sekcje. Każdy z nich realizuje inne zadanie, więc korzystasz z sekcji, które chcesz dodać do swojego sklepu. Pamiętaj też, że w ostatniej sekcji skryptu (4) możesz zastąpić shortcode w funkcji do_shortcode() . To będzie ostateczny wynik nowej zakładki Wsparcie. zakładka niestandardowa moje konto woocommerce

Wniosek

Podsumowując, domyślna strona Moje konto zawiera podstawowe informacje potrzebne użytkownikom, ale jest to dość podstawowe. Jeśli więc chcesz poprawić wrażenia użytkownika w swoim sklepie, powinieneś dostosować stronę Moje konto. Pomoże to nie tylko ulepszyć bardzo ważny dział sklepu, ale także zwiększy sprzedaż.

Istnieje kilka wtyczek umożliwiających dostosowanie strony Moje konto. Jeśli jednak nie chcesz instalować więcej wtyczek i masz umiejętności kodowania, możesz programowo edytować stronę Moje konto WooCommerce. Do tego są dwie opcje:

Zastąp pliki szablonów
Użyj haków WooCommerce

Obie metody zapewnią wykonanie zadania, ale z reguły zalecamy używanie haków, gdy to możliwe. Jest to mniej ryzykowne i jest to jedna z najlepszych praktyk zalecanych przez WordPressa. W tym przewodniku zobaczyliśmy kilka przykładów rzeczy, które możesz zrobić za pomocą obu metod. Zalecamy potraktowanie tych skryptów jako przewodnika, wykorzystanie ich do zdobycia pomysłów i zabawę, aby jak najlepiej wykorzystać stronę Moje konto w swoim sklepie.

Na koniec, aby uzyskać więcej przewodników, jak najlepiej wykorzystać stronę Moje konto, zapoznaj się z następującymi przewodnikami:

Jak dostosować Moje konto WooCommerce z wtyczkami i bez?
Najlepsze wtyczki do dostosowania strony Moje konto WooCommerce

Jakie zmiany wprowadziłeś na swojej stronie Moje konto? Czy miałeś jakieś problemy z naszym samouczkiem? Daj nam znać w sekcji komentarzy poniżej!