Come creare una pagina del mio account WooCommerce personalizzata
Pubblicato: 2022-04-14Se gestisci un negozio online utilizzando il plug-in WooCommerce, probabilmente hai familiarità con la pagina Il mio account. Questa è la pagina che i tuoi clienti vedono quando accedono al proprio account.
Per impostazione predefinita, questa pagina è piuttosto spoglia, come questa.
C'è molto più potenziale e molto di più che puoi fare con questa parte molto importante del tuo negozio di eCommerce.
Puoi personalizzarlo per includere molte più informazioni e funzionalità interessanti per migliorare l'esperienza dell'utente.
Ti mostreremo come personalizzare la pagina Il mio account di WooCommerce e offrire ai tuoi clienti un'esperienza molto migliore!
Seguendo questi passaggi, sarai in grado di creare una pagina Il mio account dall'aspetto professionale proprio come quella qui sotto.
Pronto? Iniziamo!
Perché personalizzare la pagina Il mio account in WooCommerce?
La pagina Il mio account è la dashboard dell'utente per gestire i propri ordini, controllare i download, modificare il proprio indirizzo e modificare i dettagli dell'account.
Una pagina Il mio account ben progettata può fornire una migliore esperienza utente ai tuoi clienti.
Oltre ad essere piacevole per gli occhi (chi non ama le cose carine?), questo layout rende la gestione degli account molto più conveniente.
Ecco alcuni motivi per cui creare una fantastica pagina Il mio account è fondamentale:
Migliore soddisfazione del cliente
Se puoi fornire ai tuoi clienti tutte le informazioni di cui hanno bisogno nella pagina Il mio account, è meno probabile che ti contattino per chiedere aiuto.
Una pagina Il mio account ben personalizzata farà sentire i tuoi clienti più a loro agio e sicuri quando fanno acquisti nel tuo negozio.
Migliore fidelizzazione dei clienti
La personalizzazione della pagina Il mio account può anche aiutare a fidelizzare i clienti.
Se rendi facile l'accesso alle informazioni sul loro account e alla cronologia degli ordini, è più probabile che continuino a fare acquisti con te.
È più probabile che un cliente felice torni.
Resi di prodotti ridotti
Migliorare la pagina Il mio account aiuta i clienti a ottenere tutte le informazioni di cui hanno bisogno sul prodotto, inclusi i dettagli di spedizione, le informazioni di tracciamento e altro ancora.
Con tutte queste informazioni in un unico posto, in un'interfaccia facile da usare, i clienti non dovranno preoccuparsi della realizzazione del prodotto.
Quando metti le menti dei tuoi clienti a proprio agio, hanno un'esperienza molto più positiva, che può comportare ripetute personalizzazioni.
Come personalizzare la pagina Il mio account
Ora che conosciamo i vantaggi e come possono essere applicati alla tua attività, aggiungiamo queste modifiche al design alla pagina Il mio account.
Personalizza manualmente la tua pagina Il mio account
Per questo metodo, innanzitutto, installeremo tutti i plugin e i temi richiesti; successivamente, progetteremo la dashboard Il mio account e infine nasconderemo la navigazione WooCommerce predefinita.
Importante : copia ogni link dalla tua attuale pagina Il mio account e salvalo in un documento separato.
Questo tornerà utile nei passaggi futuri.
Passaggio 1: installa i plug-in richiesti
Puoi utilizzare qualsiasi generatore di pagine WordPress che preferisci.
Abbiamo usato Ultimate Addons per Gutenberg (UAG) per questo progetto.
UAG è un plugin leggero che aggiunge fantastici layout e blocchi di design alla libreria Gutenberg.
È compatibile con tutti i temi ed è completamente gratuito da scaricare.
Avrai anche bisogno di un altro plugin chiamato Gutenberg Blocks Library & Toolkit – Editor Plus.
Questo plugin ti consente di aggiungere CSS personalizzati ai singoli blocchi Gutenberg. Avremo bisogno di questo plugin nel passaggio 3.
Entrambi questi plugin sono disponibili nella libreria dei plugin di WordPress e puoi scaricarli gratuitamente.
Passaggio 2: progetta la tua dashboard
Dopo aver scaricato i plugin desiderati, è il momento di personalizzare la Pagina del mio account di WooCommerce.
1. Vai a Pagine > Il mio account dalla dashboard di WordPress.
2. Fare clic su Modifica per iniziare a modificare la pagina.
Vedrai il codice funzione predefinito del mio account aggiunto lì. Questo shortcode consente a WordPress di sapere che la pagina è la pagina Il mio account.
3. Per ora, copia lo shortcode in un altro documento ed elimina il blocco. Ne avremo bisogno, ma non in questo momento.
4. Nella colonna, aggiungere un blocco Info Box .
5. Dalla barra laterale destra, utilizzare le impostazioni del blocco per personalizzare il blocco.
Qui imposta la posizione dell'icona come Left Of Text And Title e imposta l'allineamento verticale su Middle .
6. Puoi anche scegliere di abilitare o disabilitare il titolo e il separatore dalla barra laterale.
Qui stiamo disabilitando il titolo e il separatore.
Puoi farlo disattivando l'interruttore accanto all'opzione Abilita titolo .
Per disabilitare il separatore, seleziona Nessuno nell'opzione Stile in Separatore .
7. Infine, vai alla sezione CTA e imposta il Tipo CTA come casella completa.
8. Successivamente, vai alla visualizzazione elenco dall'alto e seleziona e duplica la colonna fino a quando non ne hai 6.
Aggiungi il contenuto necessario nello spazio modificabile e la tua pagina dovrebbe assomigliare a questa.
9. Ora è il momento di aggiungere i collegamenti corretti a ciascuna casella.
In questo modo, ogni casella icona diventa attiva e indirizza il tuo cliente alla rispettiva pagina.
10. Modificare le icone in ciascuna delle caselle delle icone in qualcosa di simile al titolo.
Per fare ciò, seleziona una casella icona , vai su Impostazioni icona e cerca l'icona più vicina al titolo.
Infine, fai clic sull'icona nella casella dell'icona.
11. Possiamo aggiungere dei bordi per creare una separazione tra le caselle delle icone.
- Vai a Visualizzazione elenco e seleziona una colonna.
- Dalla barra laterale destra, vai su Impostazioni bordo e aggiungi un po' di spessore all'impostazione. In questo caso, abbiamo aggiunto 2 px.
- Vai su Border Radius e cambia il raggio se lo desideri. Abbiamo aggiunto un raggio del 5% per aggiungere una leggera curvatura in questo caso.
12. Infine, aggiungi lo Shortcode del mio account WooCommerce .
- Fare clic sul pulsante "+".
- Seleziona l'opzione Shortcode .
- Incolla lo shortcode WooCommerce My Account nella barra che appare.
Una volta aggiunto lo shortcode, noterai che la vecchia dashboard del mio account WooCommerce riappare sotto il tuo design attuale.
Possiamo semplicemente nasconderlo usando il codice CSS che tratteremo nel passaggio successivo.
Passaggio 3: nascondi la navigazione della pagina del mio account WooCommerce
Per questo passaggio, dovrai aggiungere un piccolo snippet CSS al tuo sito web.
- Vai alla vista dal vivo.
- Seleziona la colonna che vuoi nascondere. In questo caso, la colonna shortcode.
- Dalla barra laterale destra, vai a Impostazioni CSS personalizzate .
- Incolla il seguente CSS personalizzato:
.woocommerce-MyAccount-navigation { display:none; } .woocommerce-account .woocommerce-MyAccount-content { width: 100%; } 
Con queste impostazioni in atto, la tua pagina Il mio account ora avrà un aspetto molto migliore!
Passaggio 4: modifica le impostazioni di visibilità della tua pagina
Ora, la pagina Il mio account ha un aspetto migliore rispetto alla versione predefinita. Un solo problema è che anche gli utenti disconnessi vedranno lo stesso formato.
Ecco come appare quando un utente disconnesso visita la pagina Il mio account di WooCommerce.
Non è così che vogliamo che la pagina funzioni. Vogliamo che questi elementi siano visibili solo agli utenti che hanno effettuato l'accesso.
- Seleziona la colonna che vuoi nascondere agli utenti disconnessi dalla Visualizzazione elenco. In questo caso, seleziona le colonne contenenti le caselle icona.
- Dalle Impostazioni a destra, barra laterale, vai su Impostazioni blocco> Avanzate.
- Impostare le condizioni di visualizzazione su Stato utente.
- Attiva l'opzione Nascondi da utenti disconnessi.
- Fallo per entrambe le colonne.
Plugin WordPress per personalizzare la pagina del mio account di WooCommerce
Ora, se non vuoi fare tutto il lavoro da solo, ecco 3 plugin che possono aiutarti.
Pagine dell'account WooCommerce di Iconic WP
La pagina dell'account WooCommerce del plug-in IconicWP è uno dei plug-in più semplici per WooCommerce e funziona bene su tutti i temi WordPress più diffusi.
Con questo plugin puoi aggiungere i tuoi contenuti personalizzati nella pagina Il mio account. Puoi anche aggiungere tutte le pagine personalizzate che desideri nell'area Il mio account.
YITH WooCommerce Personalizza la pagina del mio account
La pagina YITH WooCommerce Personalizza il mio account include un sacco di opzioni di personalizzazione.
Garantisce che i clienti possano vedere ciò di cui hanno bisogno nella sezione Il mio account del tuo sito web. Con opzioni di menu illimitate, hai molto spazio per istruzioni e notifiche, puoi offrire un'esperienza cliente solida.
Puoi anche aggiungere contenuti personalizzati come sondaggi, istruzioni, coupon, notifiche e video.
Personalizza la pagina del mio account da ThemeGrill
Personalizza la pagina del mio account di ThemeGrill è disponibile nella directory ufficiale dei plugin di WooCommerce.
Con questo plugin, puoi creare fantastiche pagine "Il mio account" personalizzando la dimensione del carattere, il colore e lo sfondo. Inoltre ci sono molte opzioni per aggiungere informazioni come indirizzi o metodi di pagamento.
Puoi progettare la pagina come ritieni opportuno e abbinare al marchio generale del tuo sito web.
Personalizza la tua pagina WooCommerce Il mio account oggi
Questo è tutto ciò che devi fare per personalizzare la pagina Il mio account di WooCommerce!
Questo metodo funziona con tutti i temi e con tutti i page builder. Ecco un video in cui personalizziamo la pagina del mio account WooCommerce con Elementor.
Se hai domande o commenti, sentiti libero di lasciarli nella sezione commenti qui sotto e ti risponderemo il prima possibile.