Come modificare la pagina del mio account WooCommerce in modo programmatico

Pubblicato: 2020-12-22

Vuoi personalizzare la pagina Il mio account del tuo negozio? Sei nel posto giusto. In questa guida, ti mostreremo come modificare la pagina Il mio account di WooCommerce in modo programmatico per aiutarti a migliorare la tua esperienza cliente.

Qual è la pagina Il mio account?

Per impostazione predefinita, i negozi WooCommerce includono una pagina Il mio account in cui gli utenti possono dare un'occhiata ai loro ordini e dove memorizzi le informazioni sulle informazioni personali, la fatturazione e l'indirizzo di spedizione dei tuoi clienti. La pagina Il mio account predefinita è una pagina WordPress che contiene uno shortcode WooCommerce.

[ woocommerce_my_account ]

Anche se questa pagina pronta all'uso contiene tutte le informazioni di base di cui i tuoi utenti hanno bisogno per gestire i loro ordini e impostazioni, la modifica della pagina Il mio account può aiutarti a distinguerti dalla concorrenza e fornire una migliore esperienza utente.

Perché personalizzare la pagina Il mio account in WooCommerce?

Non è un segreto che fornire un'ottima UX sia la chiave per il successo di qualsiasi negozio di eCommerce. Gli utenti acquistano online perché è veloce e comodo, quindi dovresti assicurarti che il tuo negozio fornisca loro gli strumenti di cui hanno bisogno per vivere un'esperienza straordinaria.

La maggior parte dei proprietari di negozi concentra la propria attenzione sulla personalizzazione della pagina del prodotto e del checkout, ma dimentica la pagina Il mio account. Poiché si tratta di una pagina progettata per i tuoi utenti registrati, personalizzarla può aiutarti a migliorare la loro esperienza sul tuo sito . Inoltre, può aiutarti a farli tornare nel tuo negozio e aumentare le tue vendite . Ad esempio, potresti creare una sezione speciale in cui mostrare loro offerte e promozioni personalizzate.

Abbiamo già analizzato i migliori plugin per personalizzare la pagina Il mio account. Tuttavia, se non desideri installare strumenti di terze parti e hai alcune capacità di programmazione, abbiamo qualcosa per te. In questa guida, ti mostreremo come modificare la pagina Il mio account di WooCommerce in modo programmatico .

Come modificare la pagina Il mio account di WooCommerce in modo programmatico

Esistono due diverse tecniche per modificare la pagina Il mio account in WooCommerce:

Puoi sovrascrivere i file modello WooCommerce predefiniti
Usa alcuni hook WooCommerce

Quale metodo è migliore? Ognuna di queste opzioni è più appropriata per casi diversi. Come regola generale, dovresti provare a usare gli hook invece di sovrascrivere i file modello, ove possibile. Questa è una delle migliori pratiche consigliate da WordPress durante la personalizzazione del tuo sito.

Tuttavia, se si desidera eseguire attività più complesse che includono funzioni o oggetti, potrebbe essere necessario modificare i file modello. In questa guida imparerai come modificare la pagina Il mio account di WooCommerce in modo programmatico utilizzando entrambi i metodi. Come puoi immaginare, la modifica dei file modello comporta più rischi rispetto all'utilizzo di hook, quindi tienilo a mente prima di scegliere l'opzione desiderata.

1) Personalizza la pagina del mio account sovrascrivendo i file modello

NOTA : poiché questo metodo prevede l'override dei file modello, ti consigliamo di creare un backup completo del tuo sito prima di iniziare. Se non sai come fare, dai un'occhiata a questa guida. Per informazioni più approfondite su come personalizzare i modelli WooCommerce, dai un'occhiata a questo post.

Il processo per sovrascrivere i file modello WooCommerce è simile a sostituire qualsiasi altro file nel tema figlio. Come sai, i temi figlio ti consentono di modificare il tuo tema senza perdere le personalizzazioni quando aggiorni il tema. Lo stesso vale per i plugin WooCommerce, quindi se non hai un tema figlio, puoi crearne uno o utilizzare uno di questi plugin.

Innanzitutto, nella dashboard di amministrazione di WordPress , vai su Plugin> Editor . Quindi, vai alla cartella dei plugin, apri WooCommerce e trova i file del modello. Per questo, puoi utilizzare l'editor di file del plug-in di WordPress o qualsiasi editor di codice a tua scelta. Nella directory WooCommerce , apri il file dei modelli e cerca la cartella myaccount .

plugins/woocommerce/templates/myaccount

Come modificare la pagina del mio account WooCommerce in modo programmatico - File modello

Apri la cartella /myaccount e troverai tutti i file modello utilizzati dalla pagina Il mio account. woocommerce i file del modello del mio account

Questi sono i file predefiniti che stanno attualmente lavorando sul tuo sito web. Per sovrascrivere questi file, devi creare un nuovo file con lo stesso nome nel tuo tema figlio. Tuttavia, se crei un file vuoto, disabiliti tutte le funzionalità del file originale. Quindi, per evitare di creare problemi sul tuo sito, devi copiare il file predefinito e incollarlo nella cartella del tuo tema.

Ad esempio, supponiamo che tu voglia copiare il file dashboard.php dall'installazione di WooCommerce. Prima di incollarlo nel tuo tema figlio, devi creare due sottodirectory nidificate e chiamarle /woocommerce e /myaccount . Successivamente, incolla il file dashboard.php al suo interno: child_theme/woocommerce/myaccount/dashboard.php Modifica la pagina del mio account WooCommerce in modo programmatico - Sovrascrivere il file modello

Ora apri il file dashboard.php e apporta alcune piccole modifiche per assicurarti che funzioni correttamente. Questo è tutto! Hai appena imparato a sovrascrivere un file modello WooCommerce. Questo è il primo passo. Ora, facciamo un ulteriore passo avanti e vediamo come personalizzare la pagina Il mio account.

Personalizza la dashboard della pagina Il mio account

Ora che sai come sovrascrivere i file modello, vediamo come modificare la pagina Il mio account di WooCommerce in modo programmatico. In questa sezione ti mostreremo come personalizzare la dashboard principale della pagina Il mio account. Alla fine di questo processo, la tua pagina Il mio account sarà simile a questa:

personalizza il mio modello di dashboard woocommerce del mio account Abbiamo aggiunto un'immagine di intestazione e del testo sotto di essa. Inoltre, abbiamo creato un elenco con collegamenti alle sezioni che gli utenti visitano più frequentemente, un piè di pagina e alcuni collegamenti a immagini in modo che i clienti possano contattarti facilmente.

Sceneggiatura completa

Questo è il file dashboard.php finale che crea lo screenshot sopra.

 if ( ! definito( 'ABSPATH' ) ) {
Uscita; // Esci se si accede direttamente.
}
$consentito_html = array(
'a' => array('href' => array(),)
);
?>
<h2>
<?php
printf(
/* traduttori: 1: nome utente visualizzato 2: URL di logout */
wp_kses( __( 'Ehi %1$s, sei tornato! ', 'woocommerce' ), $allowed_html ),
'<forte>' . esc_html($utente_corrente->nome_visualizzato) . '</strong>',
esc_url( wc_logout_url() )
);
?>
</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSBg81lLt4o-uEuBTgrMCwhDhX1HJKLCPTSxA&usqp=CAU"/>
<h3>
<?php
/* traduttori: 1: URL ordini 2: URL indirizzo 3: URL account. */
$dashboard_desc = __( 'Questa è la dashboard principale del tuo account: ', 'woocommerce' );
se ( wc_shipping_enabled() ) {
/* traduttori: 1: URL ordini 2: URL indirizzi 3: URL account. */
$dashboard_desc = __( 'Questa è la dashboard principale del tuo account:', 'woocommerce' );
}
printf(
wp_kses($dashboard_desc,$consentito_html),
esc_url(wc_get_endpoint_url('ordini')),
esc_url(wc_get_endpoint_url('modifica-indirizzo')),
esc_url( wc_get_endpoint_url( 'modifica-account' ) )
);
$ul_lista = __('<ul>
<li>Visualizza i tuoi <a href="%1$s">ordini recenti</a></li>
<li>Gestisci i tuoi <a href="%2$s">indirizzi di spedizione e fatturazione</a></li>
<li><a href="%3$s">Modifica la password e i dettagli dell'account</a></li>
</ul>');
$contatto_div = __('
<div class="acc_contact">
<span class="acc_images" >
<a href="#link to send whatsapp message"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/whatsapp-icon.png"/></a>
<a href="#link to facebook profile"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/fcbk-icon.png"/></a>
<a href="#link to twitter profile"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/twitter-icon.png"/></a>
<a href="#link to send email"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/email-icon2.png"/></a>
</span>
</div>');
$div_footer=__('
<div>
<h4><i>Costruito con amore!</i></h4>
<img src="http://localhost/Sampler/wp-content/uploads/2020/08/ql-logo-300x65.png"/>
</div>');
?>
</h3>
<p>Gestisci il profilo e le informazioni personali qui. Compila tutti i campi così possiamo sapere di te. Tutte le edizioni realizzate nel tuo account si rifletteranno immediatamente nel sito Web, in modo che altri utenti possano conoscere te e le tue esigenze attuali senza alcun ritardo</p>
<?php
eco $ul_list.$div_footer.$div_contact;

Se dai un'occhiata al codice, vedrai che tutto il codice originale che abbiamo copiato dal modello predefinito è ancora lì. Abbiamo appena modificato alcune stringhe e riordinato i collegamenti come elenco. Inoltre, abbiamo utilizzato script aggiuntivi per aggiungere più contenuti alla scheda. Per comprendere meglio le modifiche che abbiamo apportato, puoi controllare il dashboard.php predefinito.

Aggiunta di immagini

Per visualizzare le immagini nella pagina Il mio account, è necessario sostituire gli URL delle immagini. Lo stesso vale per i collegamenti alle immagini delle icone social.

Personalizzazioni CSS

Un altro modo per personalizzare la pagina Il mio account, e qualsiasi altra pagina, consiste nell'utilizzare gli script CSS. Questo è lo script CSS che abbiamo utilizzato per definire lo stile del nostro file dashboard.php personalizzato:

 .woocommerce-MyAccount-content > h2:nth-child(2),
.woocommerce-MyAccount-content > h3:nth-child(4){
allineamento testo:centro;
}
.acc_contatto{
imbottitura superiore:20px;
allineamento testo:centro;
}
.acc_contact > h3{
galleggiante: sinistra;
}
.acc_images{
margine:automatico;
larghezza: 50%;
blocco di visualizzazione;
}
#Benvenuto{
margine:automatico;
}
.acc_images img {
margine-sinistra:4px;
margine-destra:4px;
display: blocco in linea;
larghezza: 55px;
}
#acc_footer{
margine superiore:15px;
colore di sfondo: #202020;
allineamento testo: centro;
raggio di confine: 15px;
}
#acc_footer > h4{
imbottitura superiore:20px;
colore:rgb(235, 228, 228);
font-weight:grassetto;
}
#acc_footer > img{
margine:automatico;
imbottitura-fondo:20px;
}

Puoi prendere questo codice come base, incollarlo nel file style.css del tuo tema figlio e personalizzarlo in base all'aspetto del tuo sito.

2. Modifica la pagina del mio account WooCommerce con i ganci

Il secondo metodo per modificare la pagina Il mio account a livello di codice è utilizzare alcuni hook di WooCommerce. Per questo, dovrai avere una conoscenza di base di come funzionano gli hook in WooCommerce. Se non hai dimestichezza con gli hook, ti consigliamo di consultare questa guida.

A) Rinomina schede

Questo script rinominerà la scheda Indirizzo in I tuoi indirizzi .

 add_filter( 'woocommerce_account_menu_items', 'QuadLayers_rename_acc_adress_tab', 9999 );
funzione QuadLayers_rename_acc_adress_tab ($ elementi) {
$items['edit-address'] = 'I tuoi indirizzi';
restituire $ articoli;
}

B) Rimuovere le schede

Per rimuovere completamente qualsiasi scheda, usa la funzione unset() in questo modo:

 add_filter( 'woocommerce_account_menu_items', 'QuadLayers_remove_acc_address', 9999 );
funzione QuadLayers_remove_acc_address($elementi) {
unset($items['download']);
restituire $ articoli;
}

Nello script sopra, abbiamo rimosso la scheda Download . Puoi trovare l'elenco completo delle schede slug nell'array $items , quindi puoi scegliere quello che desideri.

 $elementi = array(
'dashboard' => __( 'Dashboard', 'woocommerce' ),
'ordini' => __( 'Ordini', 'woocommerce' ),
'download' => __( 'Download', 'woocommerce' ),
'edit-address' => _n( 'Indirizzi', 'Indirizzo', (int) wc_shipping_enabled(), 'woocommerce' ),
'metodi di pagamento' => __( 'Metodi di pagamento', 'woocommerce' ),
'edit-account' => __( 'Dettagli account', 'woocommerce' ),
'customer-logout' => __( 'Logout', 'woocommerce' ),
);

C) Unisci schede e contenuto

Un'altra opzione per personalizzare la pagina Il mio account è unire le schede . Ad esempio, vediamo come rimuovere la scheda Indirizzi e spostarne il contenuto nella scheda Account .

 // -----------------------------
// 1. Rimuovere la scheda Indirizzi
add_filter( 'woocommerce_account_menu_items', 'QuadLayers_remove_acc_tab', 999 );
funzione QuadLayers_remove_acc_tab($elementi) {
unset($items['edit-address']);
restituire $ articoli;
}
// -----------------
// 2. Inserisci il contenuto della scheda Indirizzi in una scheda esistente (in questo caso modifica account)
add_action( 'woocommerce_account_edit-account_endpoint', 'woocommerce_account_edit_address');

Ora, la scheda Account sarà simile a questa: unisci il contenuto della scheda woocommerce del mio account

D) Aggiungi una nuova scheda con contenuto personalizzato

Ora, vediamo come aggiungere contenuti alla pagina Il mio account . In questo esempio, aggiungeremo una nuova scheda chiamata Supporto in cui gli utenti possono facilmente dare un'occhiata ai loro ticket di supporto. Utilizzeremo due shortcode forniti da un plug-in di terze parti per visualizzare alcuni contenuti interessanti, ma dovresti essere in grado di utilizzare qualsiasi shortcode che desideri nella tua nuova scheda.

Tuttavia, tieni presente che alcuni codici brevi potrebbero non funzionare a causa di incompatibilità con WooCommerce. Per aggiungere una scheda Supporto con contenuto personalizzato alla pagina Il mio account di WooCommerce, incolla il seguente codice nel file functions.php del tuo tema figlio.

 // 1. Registra un nuovo endpoint
// Nota: salva nuovamente i Permalink o visualizzerà l'errore 404  
funzione QuadLayers_add_support_endpoint() {
    add_rewrite_endpoint( 'supporto', EP_ROOT | EP_PAGES );
}  
add_action('init', 'QuadLayers_add_support_endpoint');  
// ------------------
// 2. Aggiungi nuova query
funzione QuadLayers_support_query_vars($vars) {
    $vars[] = 'supporto';
    restituisce $vars;
}  
add_filter( 'query_vars', 'QuadLayers_support_query_vars', 0 );  
// ------------------
// 3. Inserisci il nuovo endpoint 
funzione QuadLayers_add_support_link_my_account ($ articoli) {
    $items['support'] = 'Supporto ';
    restituire $ articoli;
}  
add_filter( 'woocommerce_account_menu_items', 'QuadLayers_add_support_link_my_account' );
// ------------------
// 4. Aggiungi contenuto al nuovo endpoint  
funzione QuadLayers_support_content() {
echo '<h3>Supporto</h3><p>Benvenuto nell'area di supporto. Come cliente premium, gestisci i tuoi ticket di supporto da qui, puoi inviare un ticket in caso di problemi con il tuo sito web. Faremo del nostro meglio per fornirti una soluzione rapida ed efficiente</p>';
echo do_shortcode( '[tickets-shortcode]');
echo do_shortcode('[wpforms]');
}  
add_action( 'woocommerce_account_support_endpoint', 'QuadLayers_support_content' );

Se ricevi un errore di pagina 404 non trovata quando fai clic sulla nuova scheda, apri la pagina del permalink andando alla dashboard di WordPress > Impostazioni > Permalink e fai clic sul pulsante Salva in basso.

Si noti che lo script è diviso in quattro sezioni. Ognuno di loro svolge un compito diverso, quindi utilizzi le sezioni che desideri aggiungere al tuo negozio. Tieni inoltre presente che nell'ultima sezione dello script (4), puoi sostituire lo shortcode nella funzione do_shortcode() . Questo sarà il risultato finale per la nuova scheda Supporto. scheda personalizzata il mio account woocommerce

Conclusione

Tutto sommato, la pagina Il mio account predefinita contiene le informazioni di base di cui gli utenti hanno bisogno, ma è piuttosto semplice. Quindi, se vuoi migliorare l'esperienza utente nel tuo negozio, dovresti personalizzare la pagina Il mio account. Questo non solo ti aiuterà a migliorare una sezione molto importante del tuo negozio, ma aumenterà anche le tue vendite.

Esistono diversi plugin per personalizzare la pagina Il mio account. Tuttavia, se non desideri installare altri plug-in e hai capacità di programmazione, puoi modificare la pagina Il mio account di WooCommerce in modo programmatico. Per questo ci sono due opzioni:

Sostituisci i file modello
Usa gli hook WooCommerce

Entrambi i metodi porteranno a termine il lavoro, ma come regola generale, ti consigliamo di utilizzare gli hook quando possibile. È meno rischioso ed è una delle migliori pratiche consigliate da WordPress. In questa guida, abbiamo visto diversi esempi di cose che puoi fare usando entrambi i metodi. Ti consigliamo di prendere questi script come guida, usarli per ottenere alcune idee e giocare per ottenere il massimo dalla pagina Il mio account nel tuo negozio.

Infine, per ulteriori guide per sfruttare al meglio la pagina Il mio account, dai un'occhiata a queste guide:

Come personalizzare il mio account WooCommerce con e senza plugin
I migliori plugin per personalizzare la pagina del mio account WooCommerce

Quali modifiche hai apportato alla pagina Il mio account? Hai avuto problemi con il nostro tutorial? Fatecelo sapere nella sezione commenti qui sotto!