Cum să editez pagina Contul meu WooCommerce în mod programatic

Publicat: 2020-12-22

Doriți să personalizați pagina Contul meu din magazinul dvs.? Ai venit la locul potrivit. În acest ghid, vă vom arăta cum să editați pagina Contul meu WooCommerce în mod programatic pentru a vă ajuta să vă îmbunătățiți experiența clientului.

Ce este pagina Contul meu?

În mod implicit, magazinele WooCommerce includ o pagină Contul meu unde utilizatorii pot arunca o privire asupra comenzilor lor și unde stocați informații despre informațiile personale ale clienților, adresa de facturare și de livrare. Pagina implicită Contul meu este o pagină WordPress care conține un cod scurt WooCommerce.

[ woocommerce_my_account ]

Chiar dacă această pagină disponibilă conține toate informațiile de bază de care utilizatorii dvs. au nevoie pentru a-și gestiona comenzile și setările, editarea paginii Contul meu vă poate ajuta să vă evidențiați față de concurenți și să oferiți o experiență mai bună pentru utilizator.

De ce să personalizați pagina Contul meu în WooCommerce?

Nu este un secret că oferirea unui UX excelent este cheia succesului oricărui magazin de comerț electronic. Utilizatorii cumpără online pentru că este rapid și confortabil, așa că ar trebui să vă asigurați că magazinul dvs. le oferă instrumentele de care au nevoie pentru a avea o experiență uimitoare.

Majoritatea proprietarilor de magazine își concentrează atenția asupra personalizării paginii produsului și a achiziției, dar uită de pagina Contul meu. Deoarece aceasta este o pagină concepută pentru utilizatorii dvs. înregistrați, personalizarea acesteia vă poate ajuta să le îmbunătățiți experiența pe site-ul dvs. În plus, vă poate ajuta să-i faceți să revină în magazin și să vă creșteți vânzările . De exemplu, puteți crea o secțiune specială în care le arătați oferte și promoții personalizate.

Am analizat deja cele mai bune plugin-uri pentru a personaliza pagina Contul meu. Cu toate acestea, dacă nu doriți să instalați instrumente terțe și aveți abilități de codificare, avem ceva pentru dvs. În acest ghid, vă vom arăta cum să editați pagina Contul meu WooCommerce în mod programatic .

Cum se editează pagina Contul meu WooCommerce în mod programatic

Există două tehnici diferite pentru a edita pagina Contul meu în WooCommerce:

Puteți suprascrie fișierele șablon WooCommerce implicite
Folosiți niște cârlige WooCommerce

Care metoda este mai buna? Fiecare dintre aceste opțiuni este mai potrivită pentru cazuri diferite. Ca regulă generală, ar trebui să încercați să utilizați cârlige în loc să suprascrieți fișierele șablon acolo unde este posibil. Aceasta este una dintre cele mai bune practici pe care WordPress le recomandă atunci când vă personalizați site-ul.

Cu toate acestea, dacă doriți să efectuați sarcini mai complexe care includ funcții sau obiecte, poate fi necesar să editați fișierele șablon. În acest ghid, veți învăța cum să editați pagina Contul meu WooCommerce în mod programatic utilizând ambele metode. După cum vă puteți imagina, editarea fișierelor șablon are mai multe riscuri decât utilizarea cârligelor, așa că țineți cont de acest lucru înainte de a alege opțiunea dorită.

1) Personalizați pagina contului meu care înlocuiește fișierele șablon

NOTĂ : Deoarece această metodă implică suprascrierea fișierelor șablon, vă recomandăm să creați o copie de rezervă completă a site-ului dvs. înainte de a începe. Dacă nu știi cum să o faci, consultă acest ghid. Pentru informații mai aprofundate despre cum să personalizați șabloanele WooCommerce, consultați această postare.

Procesul de înlocuire a fișierelor șablon WooCommerce este similar cu anularea oricărui alt fișier din tema copilului. După cum știți, temele pentru copii vă permit să vă editați tema fără a pierde personalizările atunci când actualizați tema. Același lucru este valabil și pentru pluginurile WooCommerce, așa că dacă nu aveți o temă copil, puteți crea una sau utiliza oricare dintre aceste pluginuri.

Mai întâi, în tabloul de bord WordPress , accesați Plugins > Editor . Apoi, accesați folderul de pluginuri, deschideți WooCommerce și găsiți fișierele șablon. Pentru aceasta, puteți utiliza editorul de fișiere plugin WordPress sau orice editor de cod la alegere. Sub directorul WooCommerce , deschideți fișierul șabloane și căutați folderul myaccount .

plugins/woocommerce/templates/myaccount

Cum se editează pagina Contul meu WooCommerce în mod programatic - fișiere șablon

Deschideți folderul /myaccount și veți găsi toate fișierele șablon pe care le folosește pagina Contul meu. woocommerce fișierele șablon contului meu

Acestea sunt fișierele implicite care funcționează în prezent pe site-ul dvs. web. Pentru a suprascrie aceste fișiere, trebuie să creați un fișier nou cu același nume în tema copilului. Cu toate acestea, dacă creați un fișier gol, dezactivați toate funcționalitățile fișierului original. Așadar, pentru a evita crearea de probleme pe site-ul dvs., trebuie să copiați fișierul implicit și să-l inserați în folderul cu tema.

De exemplu, să presupunem că doriți să copiați fișierul dashboard.php din instalarea WooCommerce. Înainte de a-l lipi în tema copilului, trebuie să creați două subdirectoare imbricate și să le numiți /woocommerce și /myaccount . După aceea, inserați fișierul dashboard.php în el: child_theme/woocommerce/myaccount/dashboard.php Editați pagina Contul meu WooCommerce în mod programatic - Suprascrierea fișierului șablon

Acum deschideți fișierul dashboard.php și faceți câteva mici modificări pentru a vă asigura că funcționează corect. Asta e! Tocmai ați învățat cum să suprascrieți un fișier șablon WooCommerce. Acesta este primul pas. Acum, să facem un pas mai departe și să vedem cum să personalizăm pagina Contul meu.

Personalizați tabloul de bord al paginii Contul meu

Acum că știți cum să înlocuiți fișierele șablon, să vedem cum să editați pagina Contul meu WooCommerce în mod programatic. În această secțiune, vă vom arăta cum să personalizați tabloul de bord principal al paginii Contul meu. La sfârșitul acestui proces, pagina dvs. Contul meu va arăta astfel:

personalizați șablonul de tablou de bord woocommerce contului meu Am adăugat o imagine de titlu și ceva text sub ea. În plus, am creat o listă cu linkuri către secțiunile pe care utilizatorii le accesează mai des, un subsol și câteva link-uri cu imagini, astfel încât clienții să vă poată contacta cu ușurință.

Scenariul complet

Acesta este fișierul final dashboard.php care creează captura de ecran de mai sus.

 dacă ( ! definit( 'ABSPATH' ) ) {
Ieșire; // Ieșire dacă este accesat direct.
}
$allowed_html = matrice(
'a' => array('href' => array(),)
);
?>
<h2>
<?php
printf(
/* traducători: 1: numele afișat utilizator 2: url de deconectare */
wp_kses( __( 'Hei %1$s, te-ai întors! ', 'woocommerce' ), $allowed_html ),
„<strong>” . esc_html( $current_user->display_name ) . „</strong>”,
esc_url( wc_logout_url() )
);
?>
</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:AND9GcSBg81lLt4o-uEuBTgrMCwhDhX1HJKLCPTSxA&usqp=CAU"/>
<h3>
<?php
/* traducători: 1: Adresa URL a comenzilor 2: Adresa URL 3: Adresa URL a contului. */
$dashboard_desc = __( 'Acesta este tabloul de bord principal al contului tău: ', 'woocommerce');
if ( wc_shipping_enabled() ) {
/* traducători: 1: URL-ul comenzilor 2: URL-ul adreselor 3: URL-ul contului. */
$dashboard_desc = __( 'Acesta este tabloul de bord principal al contului dvs.:', 'woocommerce');
}
printf(
wp_kses( $dashboard_desc,$allowed_html),
esc_url( wc_get_endpoint_url( 'comenzi' ) ),
esc_url( wc_get_endpoint_url('edit-address') ),
esc_url( wc_get_endpoint_url( 'edit-account' ) )
);
$ul_list = __('<ul>
<li>Vizualizați <a href="%1$s">comenzile dvs. recente</a></li>
<li>Gestionați-vă <a href="%2$s">adresele de expediere și de facturare</a></li>
<li><a href="%3$s">Editați parola și detaliile contului</a></li>
</ul>');
$div_contact = __('
<div class="acc_contact">
<span class="acc_images" >
<a href="#link pentru a trimite mesaj WhatsApp"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/whatsapp-icon.png"/></a>
<a href="#link la profilul Facebook"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/fcbk-icon.png"/></a>
<a href="#link la profilul Twitter"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/twitter-icon.png"/></a>
<a href="#link pentru a trimite e-mail"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/email-icon2.png"/></a>
</span>
</div>');
$div_footer=__('
<div>
<h4><i>Construit cu dragoste!</i></h4>
<img src="http://localhost/Sampler/wp-content/uploads/2020/08/ql-logo-300x65.png"/>
</div>');
?>
</h3>
<p>Gestionați profilul și informațiile personale aici. Completați toate câmpurile ca să putem ști despre dvs. Toate edițiile făcute în contul dvs. vor fi reflectate imediat pe site, astfel încât alți utilizatori să poată afla despre dvs. și nevoile dvs. actuale fără nicio întârziere</p>
<?php
echo $ul_list.$div_footer.$div_contact;

Dacă aruncați o privire la cod, veți vedea că tot codul original pe care l-am copiat din șablonul implicit este încă acolo. Tocmai am modificat câteva șiruri și am reordonat link-urile ca o listă. În plus, am folosit scripturi suplimentare pentru a adăuga mai mult conținut în filă. Pentru a înțelege mai bine modificările pe care le-am făcut, puteți verifica dashboard.php implicit.

Adăugarea de imagini

Pentru a afișa imagini în pagina Contul meu, trebuie să înlocuiți adresele URL ale imaginilor. Același lucru este valabil și pentru linkurile de imagini cu pictograme sociale.

Personalizări CSS

O altă modalitate de a personaliza pagina Contul meu – și orice altă pagină – este să folosești scripturi CSS. Acesta este scriptul CSS pe care l-am folosit pentru a stila fișierul nostru personalizat dashboard.php :

 .woocommerce-MyAccount-content > h2:nth-child(2),
.woocommerce-MyAccount-content > h3:nth-child(4){
text-align:center;
}
.acc_contact{
padding-top: 20px;
text-align:center;
}
.acc_contact > h3{
plutește la stânga;
}
.acc_images{
margin:auto;
latime: 50%;
afisare: bloc;
}
#Bine ati venit{
margin:auto;
}
.acc_images img {
margine-stânga:4px;
margine-dreapta:4px;
display:inline-block;
lățime: 55px;
}
#acc_footer{
margine-sus: 15px;
culoare de fundal: #202020;
text-align: centru;
chenar-rază: 15px;
}
#acc_footer > h4{
padding-top: 20px;
culoare:rgb(235, 228, 228);
greutate font: bold;
}
#acc_footer > img{
margin:auto;
padding-bottom:20px;
}

Puteți lua acest cod ca bază, îl puteți lipi în fișierul style.css al temei copilului și îl puteți personaliza conform aspectului site-ului dvs.

2. Editați pagina contului meu WooCommerce cu cârlige

A doua metodă de a edita pagina Contul meu în mod programatic este folosirea unor cârlige WooCommerce. Pentru aceasta, va trebui să aveți o înțelegere de bază a modului în care funcționează cârligele în WooCommerce. Dacă nu sunteți familiarizat cu cârlige, vă recomandăm să consultați acest ghid.

A) Redenumiți filele

Acest script va redenumi fila Adresă în Adresele tale .

 add_filter( 'woocommerce_account_menu_items', 'QuadLayers_rename_acc_adress_tab', 9999);
funcția QuadLayers_rename_acc_adress_tab( $articole ) {
$items['edit-address'] = 'Adresele tale';
returnează $articole;
}

B) Eliminați filele

Pentru a elimina complet orice filă, utilizați funcția unset() astfel:

 add_filter( 'woocommerce_account_menu_items', 'QuadLayers_remove_acc_address', 9999);
funcția QuadLayers_remove_acc_address( $articole ) {
unset( $items['descărcări'] );
returnează $articole;
}

În scriptul de mai sus, am eliminat fila Descărcări . Puteți găsi lista completă de file slug în matricea $items , astfel încât să o puteți alege pe cea dorită.

 $items = matrice(
'dashboard' => __( 'Tabloul de bord', 'woocommerce' ),
'comenzi' => __( 'Comenzi', 'woocommerce' ),
'descărcări' => __( 'Descărcări', 'woocommerce' ),
'edit-address' => _n( 'Adrese', 'Adresă', (int) wc_shipping_enabled(), 'woocommerce' ),
'payment-methods' => __( 'Metode de plată', 'woocommerce' ),
'edit-account' => __( 'Detaliile contului', 'woocommerce' ),
'customer-logout' => __( 'Deconectare', 'woocommerce' ),
);

C) Îmbinați filele și conținutul

O altă opțiune de personalizare a paginii Contul meu este îmbinarea filelor . De exemplu, să vedem cum să eliminați fila Adrese și să mutați conținutul acesteia în fila Cont .

 // ------------------------------
// 1. Eliminați fila Adrese
add_filter( 'woocommerce_account_menu_items', 'QuadLayers_remove_acc_tab', 999);
funcția QuadLayers_remove_acc_tab( $items ) {
unset($items['edit-address']);
returnează $articole;
}
// --------------------------------
// 2. Inserați conținutul filei Adrese într-o filă existentă (editare cont în acest caz)
add_action( 'woocommerce_account_edit-account_endpoint', 'woocommerce_account_edit_address');

Acum, fila Cont va arăta astfel: îmbinați contul meu conținutul filei woocommerce

D) Adăugați o filă nouă cu conținut personalizat

Acum, să vedem cum să adăugați conținut la pagina Contul meu . În acest exemplu, vom adăuga o nouă filă numită Asistență, unde utilizatorii pot arunca cu ușurință o privire la biletele lor de asistență. Vom folosi două coduri scurte furnizate de un plugin terță parte pentru a afișa conținut interesant, dar ar trebui să puteți utiliza orice cod scurt dorit în noua filă.

Cu toate acestea, rețineți că unele coduri scurte pot să nu funcționeze din cauza incompatibilităților cu WooCommerce. Pentru a adăuga o filă Asistență cu conținut personalizat la pagina Contul meu WooCommerce, inserați următorul cod în fișierul functions.php al temei copilului dumneavoastră.

 // 1. Înregistrați noul punct final
// Notă: Resave Permalinks sau va da eroare 404  
funcția QuadLayers_add_support_endpoint() {
    add_rewrite_endpoint( 'suport', EP_ROOT | EP_PAGES );
}  
add_action('init', 'QuadLayers_add_support_endpoint');  
// ------------------
// 2. Adăugați o interogare nouă
funcția QuadLayers_support_query_vars( $vars ) {
    $vars[] = 'suport';
    returnează $vars;
}  
add_filter( 'query_vars', 'QuadLayers_support_query_vars', 0);  
// ------------------
// 3. Introduceți noul punct final 
funcția QuadLayers_add_support_link_my_account( $articole ) {
    $items['support'] = 'Suport ';
    returnează $articole;
}  
add_filter( 'woocommerce_account_menu_items', 'QuadLayers_add_support_link_my_account');
// ------------------
// 4. Adăugați conținut la noul punct final  
funcția QuadLayers_support_content() {
echo „<h3>Asistență</h3><p>Bine ați venit în zona de asistență. În calitate de client premium, gestionați-vă biletele de asistență de aici, puteți trimite un bilet dacă aveți probleme cu site-ul dvs. Vom pune tot posibilul pentru a vă oferi o soluție rapidă și eficientă</p>';
echo do_shortcode('[bilete-shortcode]');
echo do_shortcode('[wpforms]');
}  
add_action( 'woocommerce_account_support_endpoint', 'QuadLayers_support_content');

Dacă primiți o eroare de 404 pagini negăsită când faceți clic pe noua filă, deschideți pagina de permalink accesând tabloul de bord WordPress > Setări > Permalink -uri și faceți clic pe butonul Salvare din partea de jos.

Rețineți că scenariul este împărțit în patru secțiuni. Fiecare dintre ele îndeplinește o sarcină diferită, așa că utilizați secțiunile pe care doriți să le adăugați în magazin. De asemenea, rețineți că în ultima secțiune a scriptului (4), puteți înlocui shortcode-ul în funcția do_shortcode() . Acesta va fi rezultatul final pentru noua filă Asistență. filă personalizată contul meu woocommerce

Concluzie

Una peste alta, pagina implicită Contul meu conține informațiile de bază de care utilizatorii au nevoie, dar este destul de simplă. Deci, dacă doriți să îmbunătățiți experiența utilizatorului în magazinul dvs., ar trebui să personalizați pagina Contul meu. Acest lucru nu numai că vă va ajuta să îmbunătățiți o secțiune foarte importantă a magazinului dvs., ci și să vă creșteți vânzările.

Există mai multe plugin-uri pentru a personaliza pagina Contul meu. Cu toate acestea, dacă nu doriți să instalați mai multe pluginuri și aveți abilități de codare, puteți edita pagina WooCommerce Contul meu în mod programatic. Pentru asta există două variante:

Ignorați fișierele șablon
Utilizați cârlige WooCommerce

Ambele metode vor duce treaba la bun sfârșit, dar, ca regulă generală, vă recomandăm să folosiți cârlige atunci când este posibil. Este mai puțin riscant și este una dintre cele mai bune practici pe care WordPress le recomandă. În acest ghid, am văzut câteva exemple de lucruri pe care le puteți face folosind ambele metode. Vă recomandăm să luați aceste scripturi drept ghid, să le folosiți pentru a obține câteva idei și să vă jucați pentru a profita la maximum de pagina Contul meu din magazinul dvs.

În cele din urmă, pentru mai multe ghiduri pentru a profita la maximum de pagina Contul meu, aruncați o privire la aceste ghiduri:

Cum să personalizezi contul meu WooCommerce cu și fără pluginuri
Cele mai bune plugin-uri pentru a personaliza pagina contului meu WooCommerce

Ce modificări ați făcut la pagina dvs. Contul meu? Ați avut probleme în urma tutorialului nostru? Anunțați-ne în secțiunea de comentarii de mai jos!