Come personalizzare la pagina del mio account in WooCommerce (plugin e in modo programmatico)

Cerchi modi semplici per modificare e personalizzare la tua pagina Il mio account? In questa guida imparerai come personalizzare la pagina Il mio account di WooCommerce sia in modo programmatico che con i plugin per portare il tuo negozio al livello successivo.

La creazione di una pagina Il mio account può essere fondamentale per qualsiasi negozio online. Questa pagina è solitamente trascurata dalla maggior parte dei proprietari di negozi, ma può aiutarti a distinguerti dalla concorrenza e offrire ai tuoi acquirenti un'esperienza cliente molto migliore. Prima di passare a come modificarlo, diamo un'occhiata più da vicino al motivo per cui è così importante personalizzare la pagina del tuo account WooCommerce.

Cos'è la mia pagina Account e perché dovresti personalizzarla?

La pagina Il mio account in WooCommerce è il luogo in cui i proprietari dei negozi conservano le informazioni sulle informazioni personali, la fatturazione e l'indirizzo di spedizione dei clienti. Inoltre, è dove gli utenti possono controllare i loro ordini. La pagina Il mio account predefinita è una semplice pagina WordPress che contiene uno shortcode WooCommerce.

 [ woocommerce_my_account ]

Questa pagina predefinita contiene tutte le informazioni di base di cui gli utenti hanno bisogno, ma puoi sfruttarle al meglio a meno che non personalizzi la pagina Il mio account. Puoi utilizzare questa pagina per un'ampia gamma di scopi. Oltre a fornire ai tuoi clienti informazioni sui loro ordini, puoi impostare coupon e codici sconto e visualizzarli lì, o persino fornire loro avvisi esclusivi, offerte di sconto e avvisi di vendita.

La pagina Il mio account offre tantissime opportunità per ulteriori interazioni con i tuoi clienti, migliorando al contempo le loro esperienze di acquisto. Ad esempio, puoi consentire agli acquirenti di salvare i dettagli di pagamento, gli indirizzi di spedizione e i dettagli dell'account aggiuntivi e integrarli con il processo di pagamento.

Allo stesso modo, puoi fornire loro un elenco di download e prodotti virtuali che hanno portato direttamente nella pagina Il mio account e persino consentire loro di aprire ticket di supporto premium e contattarli direttamente dalla pagina Il mio account.

Se stai eseguendo una pagina WooCommerce e vuoi renderla il più conveniente possibile per i tuoi clienti, allora dovresti assolutamente personalizzare la tua pagina Il mio account in WooCommerce.

Come personalizzare la pagina del mio account in WooCommerce

Esistono due modi per modificare la pagina Il mio account:

1. Con plugin
2. Programmaticamente

In questa guida descriveremo entrambi i metodi in modo che tu possa scegliere quello più adatto a te.

1) Modifica la pagina Il mio account con i plugin

Esistono diversi plugin per modificare la pagina Il mio account. Per semplificarti la vita, daremo un'occhiata alla nostra selezione dei migliori strumenti. Questi plugin sono dotati di tutta la personalizzazione di cui hai bisogno per rendere la tua pagina WooCommerce My Account unica, comoda e facile da usare. Se non hai capacità di programmazione, l'uso dei plugin è la strada da percorrere.

Puoi modificare le schede della pagina Il mio account, crearne di nuove e persino personalizzarne l'aspetto utilizzando personalizzazioni dedicate e tonnellate di opzioni di personalizzazione. Senza ulteriori indugi, questa è la nostra raccomandazione personale di plug-in che puoi utilizzare per personalizzare la pagina Il mio account in WooCommerce.

1) StoreCustomizer

StoreCustomizer è un plugin gratuito per WordPress che può aiutarti a personalizzare tutte le tue pagine WooCommerce. Ciò include tutto, dall'aggiunta di articoli ai tuoi menu, alla gestione del tuo negozio, dei prodotti, delle pagine di pagamento e persino del tuo account personale. Puoi rinominarlo liberamente, rimuovere schede e diverse opzioni per modificare lo stile della pagina Il mio account in 2 modi diversi.

Una cosa grandiosa di StoreCustomizer è che non richiede alcuna modifica ai modelli dei tuoi temi o persino l'impostazione di hook WooCommerce. Il plugin è estremamente leggero e facile da usare. Inoltre, con la versione premium, hai accesso a più opzioni per personalizzare la tua pagina Il mio account come l'aggiunta di schede personalizzate e la modifica del contenuto delle schede utilizzando gli editor Gutenberg come plug-in per la creazione di pagine.

Caratteristiche principali

• Un plug-in intuitivo che personalizza le pagine WooCommerce senza modificare i file del tema.
• Completamente integrato con WordPress Live Customizer.
• Consente di rinominare ed eliminare le schede Account personale, nonché di modificare lo stile delle schede.
• La versione Premium consente la personalizzazione completa della scheda Il mio account e l'aggiunta di schede personalizzate.

Prezzo

Questo è un plugin freemium. Ha una versione gratuita con funzionalità di base e quattro piani premium che partono da 29 USD all'anno.

2) Booster

Booster è la risposta completa alla personalizzazione delle pagine WooCommerce senza bisogno di codifica. Questo plugin viene fornito con una vasta gamma di moduli per aiutarti a modificare varie funzionalità e pagine di WooCommerce. Ciò include anche la pagina Il mio account. Puoi facilmente modificare gli endpoint delle schede in modo che facendo clic sulle schede arrivi a qualsiasi pagina specificata.

Inoltre, puoi aggiungere pagine personalizzate e persino personalizzare pagine e schede specifiche. Ad esempio, puoi personalizzare i messaggi della dashboard e persino consentire ai tuoi clienti di modificare manualmente lo stato dell'ordine dalla scheda degli ordini. Se stai cercando una soluzione completa per personalizzare la tua pagina Il mio account, Booster è sicuramente un'ottima risposta.

Caratteristiche principali

• Tutto in un plug-in per personalizzare pagine, funzioni e modelli di WooCommerce.
• Personalizzazione dell'endpoint della scheda per le pagine Account personale.
• Fornisce opzioni per la personalizzazione della scheda dashboard.
• Aggiungi schede personalizzate e rinomina, assegna uno stile e riordina le schede Account personale.

Prezzo

Booster ha una versione gratuita con funzionalità limitate e quattro piani premium a partire da 99,99 USD all'anno.

3) Personalizza il mio account per WooCommerce

Personalizza il mio account per WooCommerce è un'opzione premium per personalizzare e personalizzare la pagina Il mio account nel modo desiderato. Con questo strumento puoi modificare e aggiungere tutti gli endpoint che desideri. Puoi rinominare, riordinare e personalizzare tutte le tue schede utilizzando il personalizzatore live. Inoltre, puoi modificare liberamente le etichette delle schede, aggiungere icone e persino includere contenuti personalizzati nelle tue schede senza alcuna necessità di codifica.

Inoltre, questo plug-in include potenti opzioni di modifica insieme al personalizzatore live per personalizzare la pagina Il mio account. È possibile modificare la dimensione e i colori del carattere, le immagini di sfondo, i colori, il riempimento e il margine. Puoi anche aggiungere il tuo codice CSS personalizzato per portare la personalizzazione a un livello completamente nuovo.

Caratteristiche principali

• Facile da usare e completamente integrato con il personalizzatore Live.
• Personalizzazione completa di tutte le schede e gli endpoint nella pagina Il mio account.
• Opzioni per modificare le etichette delle schede, aggiungere contenuto personalizzato, immagini e icone delle schede.
• Supporta codice CSS personalizzato per una personalizzazione aggiuntiva.

Prezzo

Personalizza il mio account per WooCommerce è un plug-in premium che ti riporterà a 49 USD all'anno.

Personalizzazione della pagina Il mio account utilizzando WooCommerce StoreCustomizer

Ora, diamo un'occhiata a come utilizzare StoreCustomizer per personalizzare la pagina del tuo account WooCommerce. La versione gratuita ti consente di modificare i nomi delle schede o cambiare lo stile delle schede mentre per aggiungere nuove schede avrai bisogno del piano pro. Anche se scegli un plug-in diverso, questa sezione ti aiuterà a farti un'idea migliore di come utilizzare il plug-in per personalizzare la pagina Il mio account.

Innanzitutto, installiamo il plug-in StoreCustomizer . Apri la dashboard di amministrazione di WordPress e vai su Plugin > Aggiungi nuovo. Quindi, utilizza la barra di ricerca in alto a destra per cercare StoreCustomize r. Fare clic su Installa e quindi su Attiva . Ora il plugin dovrebbe essere attivato e installato.

Per iniziare a personalizzare la pagina Il mio account, vai su WooCommerce > StoreCustomizer .

Questo aprirà l'interfaccia del plug-in e ti fornirà tutte le opzioni di personalizzazione offerte dal plug-in. Mentre personalizzeremo la pagina Il mio account, premi il pulsante Personalizza le tue impostazioni nella parte inferiore della pagina.

Utilizzo di StoreCustomizer

Questo dovrebbe aprire una finestra di personalizzazione dal vivo e dovresti essere in grado di vedere una scheda di personalizzazione del negozio nel menu. Fai clic su di esso e quindi vai alla scheda Pagina dell'account sotto di esso.

Ora iniziamo a modificare la pagina Il mio account. Innanzitutto, cambiamo le opzioni di stile della scheda. Fare clic sull'opzione Design scheda account e cambiarla in Stile orizzontale o Stile scheda laterale.

Possiamo anche scegliere di rimuovere le schede o rinominarle , quindi rinominiamo la scheda Indirizzi in Indirizzo di spedizione ed eliminiamo la scheda Download.

Rinominare le schede della pagina Il mio account utilizzando la personalizzazione del negozio

Per rinominare, vai alla scheda che desideri rinominare e fai clic su Modifica testo scheda . Quindi, inserisci semplicemente il nuovo testo della scheda che desideri nel campo del titolo della scheda e dovrebbe apparire nella finestra di personalizzazione live a destra. Puoi anche scegliere di cambiare il titolo della pagina che appare quando fai clic su Tab. Basta cambiare il testo sotto il titolo della pagina e dovrebbe farlo.

Rimozione delle schede della pagina Il mio account utilizzando la personalizzazione del negozio

Per rimuovere una scheda, fai semplicemente clic sul pulsante Rimuovi scheda sotto la scheda che desideri nascondere. Ad esempio, se desideri rimuovere la scheda Download, seleziona semplicemente l'opzione Rimuovi scheda sotto di essa.

Ricorda che puoi ripristinare qualsiasi modifica alla scheda in qualsiasi momento. Facendo clic sull'icona di ripristino sotto le schede, puoi riportare le schede Il mio account ai valori predefiniti.

Ora, ti consigliamo di andare avanti e personalizzare le schede della pagina Il mio account di WooCommerce quanto vuoi e modificare le tue schede. Tuttavia, se desideri aggiungere nuove schede ed endpoint, dovrai acquistare la versione premium di StoreCustomizer . Il processo per aggiungere nuove schede è identico e puoi semplicemente aprire la schermata di personalizzazione per farlo.

Puoi anche fare riferimento alla documentazione del plug-in per ottenere il massimo dal plug-in e dall'intera gamma di personalizzazioni di WooCommerce. Una volta terminata la personalizzazione della pagina Il mio account, ricorda di fare clic su Pubblica nella parte superiore della schermata di personalizzazione per salvare le modifiche.

Sebbene l'opzione per personalizzare la pagina Il mio account utilizzando un plug-in sia più semplice e snella, la maggior parte dei plug-in costa una notevole quantità di denaro per fornirti un'ampia gamma di funzionalità. Quindi, se vuoi ottenere il massimo dalla tua pagina Il mio account ma hai un budget limitato, codificare la tua soluzione è un'ottima alternativa.

Vediamo come puoi personalizzare la tua pagina WooCommerce My Account in modo programmatico .

2) Personalizza la pagina del mio account in WooCommerce in modo programmatico

Se hai competenze di programmazione, puoi anche personalizzare la pagina Il mio account in modo programmatico modificando i file modello di WooCommerce o utilizzando gli hook di WooCommerce . Prima di iniziare, ti consigliamo vivamente di creare un tema figlio o di utilizzare uno di questi plug-in e di generare un backup completo per l'installazione di WordPress.

Per la nostra dimostrazione, ti mostreremo come personalizzare la pagina Il mio account in modo programmatico utilizzando gli hook di WooCommerce. Ciò non richiede la modifica dei file del modello, quindi ci sono meno possibilità di rompere qualcosa.

Tuttavia, se desideri più opzioni per personalizzare la pagina Il mio account con un po' di codifica, consulta la nostra guida completa su come modificare la pagina Il mio account in modo programmatico. Per ulteriori informazioni su come personalizzare i modelli, dai un'occhiata a questo tutorial.

Personalizzazione della pagina del mio account in WooCommerce utilizzando gli hook di WooCommerce

Se non hai dimestichezza con gli hook di WooCommerce, ti consigliamo di dare un'occhiata alla nostra guida sugli hook di WooCommerce per capire meglio come funzionano. Successivamente, segui semplicemente i seguenti passaggi per personalizzare ed eseguire modifiche alle pagine del tuo account.

Per iniziare con il processo, nella dashboard di amministrazione di WordPress , vai su Aspetto > Editor temi su apri il tuo editor di temi .

Quindi, vai al file functions.php nell'elenco dei file del tema nella barra laterale destra. Ora, usando l'editor, puoi aggiungere le tue funzioni personalizzate al file delle funzioni del tuo tema figlio .

Rinominare le schede utilizzando WooCommerce Hooks

Per rinominare una scheda usando gli hook di WooCommerce, aggiungi il seguente script al tuo file functions.php . Questo script rinominerà la scheda Indirizzi in I tuoi indirizzi ma puoi modificare lo script e utilizzare il nome che desideri.

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

Quindi salva le modifiche e controlla il frontend per vedere le modifiche.

Puoi anche modificare questo script e cambiare i nomi delle tue schede. Per fare ciò, cambia semplicemente il nome dell'array $items . Puoi controllare l'elenco completo degli slug disponibili per l'array $items qui.

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

Ad esempio, se desideri rinominare la scheda Ordini in I tuoi ordini , puoi modificare la terza riga dello script in $items['orders'] = 'I tuoi ordini'. Devi anche cambiare il nome del filtro in QuadLayers_rename_orders_tab in modo che la tua nuova funzione non abbia lo stesso nome di quella sopra. Quindi, con queste modifiche, il tuo nuovo script sarà:

 add_filter( 'woocommerce_account_menu_items', 'QuadLayers_rename_orders_tab', 9999 );
funzione QuadLayers_rename_orders_tab ($ articoli) {
$items['orders'] = 'I tuoi ordini';
restituire $ articoli;
}

In questo modo, puoi modificare il file functions.php e rinominare tutte le tue schede. Una volta che sei soddisfatto delle modifiche, fai clic su Aggiorna file e sei a posto.

Eliminare le schede utilizzando gli hook di WooCommerce

Oltre a rinominare le schede, puoi anche eliminare le schede nella pagina Il mio account utilizzando la funzione unset() con l' array $items. Ad esempio, per rimuovere la scheda Dettagli account , è necessario utilizzare lo script seguente.

 add_filter( 'woocommerce_account_menu_items', 'QuadLayers_remove_acc_tab', 999 );
funzione QuadLayers_remove_acc_tab($elementi) {
unset($items['edit-account']);
restituire $ articoli;
} 

Salva le modifiche e quindi controlla il frontend. Vedrai che la scheda Dettagli account non è presente.

Utilizzando lo stesso script, puoi modificarlo e rimuovere qualsiasi scheda desideri. Ad esempio, se vuoi nascondere la scheda dei download, devi cambiare il nome della funzione e l'array degli elementi da $items['edit-account'] a $items['downloads']. Quindi ora il tuo nuovo script sarà qualcosa del genere.

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

Quindi, fai clic su Aggiorna file per applicare le modifiche. Queste sono solo alcune delle cose che puoi fare per personalizzare la pagina Il mio account in WooCommerce, ma non sei solo limitato all'eliminazione e alla ridenominazione. Puoi anche unire schede, creare schede personalizzate e molto altro. Per imparare a sfruttare al meglio la pagina Il mio account in modo programmatico, ti consigliamo vivamente di seguire la nostra guida passo passo.

Conclusione

E questo conclude la nostra guida su come personalizzare la pagina Il mio account di WooCommerce . Questo ti aiuterà a migliorare la tua esperienza cliente e a distinguerti dalla concorrenza.

Per quanto riguarda la nostra raccomandazione su quale metodo utilizzare per modificare la pagina Il mio account, dipende dalle tue esigenze e competenze. Se non hai competenze di programmazione o non desideri modificare i file modello del tuo tema, i plug-in sono l'opzione migliore. Questa alternativa è più conveniente e adatta ai principianti. Inoltre, ti assicuri di non rompere nulla nell'installazione di WordPress utilizzando funzioni e modelli personalizzati.

In questo post, ti abbiamo mostrato alcuni dei migliori 3 plugin per modificare la pagina Il mio account. Se vuoi dare un'occhiata ad altre opzioni, dai un'occhiata a questo post. D'altra parte, se sai come programmare e desideri la massima flessibilità, puoi personalizzare la pagina Il mio account in modo programmatico. Per questo, puoi sovrascrivere i file modello WooCommerce predefiniti o utilizzare gli hook WooCommerce.

In questa guida ti abbiamo mostrato come utilizzare gli hook ma se desideri maggiori informazioni su come personalizzare la pagina Il mio account con script personalizzati, ti consigliamo vivamente di dare un'occhiata a questo tutorial.

• Come personalizzare la pagina del negozio in WooCommerce
• Personalizza il pulsante Aggiungi al carrello in WooCommerce
• Come modificare il WooCommerce Checkout (codifica e plugin)
• Come personalizzare la pagina del prodotto WooCommerce in Divi

Infine, indipendentemente dal metodo che scegli, facci sapere nei commenti se hai problemi con la configurazione della pagina Il mio account.