Come personalizzare la pagina del mio account di WooCommerce utilizzando Elementor?

WooCommerce è una delle piattaforme di eCommerce più utilizzate su Internet. Uno studio recente suggerisce che almeno 5 milioni di negozi utilizzano WooCommerce per vendere prodotti (digitali o fisici) su Internet. Notevole, non è vero?

Per lo più l'interfaccia utente e l'esperienza sono le stesse per tutti i negozi WooCommerce. Tutti i negozi hanno un simile add-to-carrello per il processo di pagamento alla pagina Il mio account. La pagina Il mio account di WooCommerce contiene informazioni relative all'ordine di un utente, fatture, metodi di pagamento, indirizzi e altri dettagli del profilo. Quindi, se un sito Web ha una pagina Il mio account personalizzata, darebbe una sensazione straordinaria all'utente.

Ma, come sappiamo, personalizzare le pagine di WooCommerce non è un compito facile. Sebbene Elementor Pro disponga di widget che possono essere utilizzati per personalizzare la pagina del prodotto di WooCommerce, non esiste alcun widget per personalizzare la pagina Il mio account.

Ecco che arriva il widget Il mio account WooCommerce di PowerPack che puoi utilizzare per personalizzare la pagina Il mio account di WooCommerce. La parte migliore è che non richiede Elementor Pro! Sì, funziona con la versione gratuita di Elementor .

In questo tutorial, inizierò con le basi e approfondiremo la personalizzazione di ogni aspetto della pagina Il mio account di WooCommerce.

Quindi, senza ulteriori indugi, tuffiamoci!

Personalizzazione della pagina del mio account WooCommerce

Abbiamo anche creato un breve video che spiega in dettaglio come personalizzare la Pagina del mio account di WooCommerce. Quindi, se ti piace la spiegazione del video, ti suggerisco di dargli un'occhiata.

Ora, continuiamo. Per personalizzare la pagina Il mio account, utilizzeremo questi tre plugin:

• Versione gratuita di Elementor: ottieni Elementor.
• Plugin WooCommerce: ottieni WooCommerce.
• PowerPack per Elementor: ottieni PowerPack.

Dopo aver installato e attivato questi plug-in, dovresti creare una nuova pagina andando al dashboard di WordPress> Pagine > Aggiungi nuovo. Assegna alla pagina il nome "Pagina personale WooCommerce personalizzata" .

Quindi, fai clic su "Modifica con Elementor" per aprire la pagina in Elementor Page Builder.

Avvia l'editor di Elementor

Non appena fai clic su "Modifica con Elementor" , si aprirà l'editor di Elementor. Quindi, trascina e rilascia il widget Il mio account nell'editor di Elementor. Non appena aggiungi il widget Il mio account , vedrai apparire le schede Il mio account con le impostazioni predefinite.

Lo screenshot qui sotto mostra come sarebbe la tua pagina dopo aver aggiunto il widget Il mio account .

Ora che abbiamo aggiunto il widget Il mio account WooCommerce di PowerPack alla pagina, personalizzeremo e stilizzeremo la pagina Il mio account del nostro negozio WooCommerce nella scheda Contenuto e stile dell'editor Elementor.

Personalizzazione del widget del mio account WooCommerce di PowerPack nella scheda Contenuto

Ci sono 2 sezioni nella scheda Contenuto del widget Il mio account: Anteprima e Schede .

• Anteprima: in questa sezione, puoi selezionare l'endpoint che verrà aperto per te in modo da poter personalizzare la pagina Il mio account del tuo sito. Gli endpoint disponibili tra cui puoi scegliere sono Dashboard, Ordini, Download, Indirizzi e Dettagli account.

• Schede: nella sezione schede, hai la possibilità di scegliere quali schede vuoi mostrare o nascondere. Le schede disponibili che puoi scegliere di mostrare/nascondere sono Dashboard, Ordini, Download, Indirizzi, Dettagli account e Collegamento Logout .

Per impostazione predefinita, non hai la possibilità di mostrare o nascondere le schede nella pagina Il mio account di WooCommerce. Dovresti farlo in modo programmatico se non stavi utilizzando il widget Il mio account di PowerPack!

Ora che abbiamo impostato la struttura della pagina Il mio account, modifichiamola per renderla sbalorditiva.

Lo stile del widget del mio account WooCommerce di PowerPack nella scheda Stile

Come puoi vedere nello screenshot qui sopra, il widget Il mio account è composto da 5 sezioni nella scheda dello stile:

• Schede
• Tabelle
• Bottoni
• Le forme
• Avvisi

Esaminiamo ciascuna delle sezioni una per una.

• Schede : come suggerisce il nome, qui puoi personalizzare la posizione delle schede, la tipografia del contenuto della scheda, lo sfondo, il testo, il collegamento e i colori del bordo della scheda nella scheda predefinita e attiva . È possibile impostare ulteriormente la spaziatura tra le schede e la spaziatura tra le schede e il contenuto .

• Tabelle: nella sezione tabelle, puoi definire lo stile della tabella "Ordini" della pagina Il mio account. Puoi impostare la tipografia e lo stile del bordo dell'intera tabella contemporaneamente oppure puoi impostarli uno per uno per intestazione, righe e celle . Inoltre, puoi anche selezionare il colore del testo , il colore di sfondo e il riempimento per il testo dell'intestazione, il testo della riga e il testo in ciascuna cella.

• Pulsanti: questa sezione viene utilizzata per definire lo stile dei pulsanti presenti in diverse schede della pagina Il mio account. Da questa sezione è possibile impostare la tipografia, il colore di sfondo, il colore del testo e il tipo di bordo per i pulsanti negli stati normale e attivo . Inoltre, puoi impostare il riempimento e la spaziatura dei pulsanti anche da questa sezione.

• Moduli: la pagina Il mio account del tuo negozio WooCommerce è composta da moduli come Indirizzo di spedizione, Indirizzo di fatturazione e Dettagli dell'account. Quindi, nella sezione moduli, puoi definire lo stile dei campi di questi moduli. Puoi dare uno stile alle intestazioni, inviare pulsanti, etichette e campi di input nei moduli. È possibile applicare uno stile a ciascuno di questi campi modificando il colore del testo, dello sfondo, del bordo, dell'ombreggiatura del riquadro, del collegamento e del collegamento al passaggio del mouse .

Inoltre, puoi allineare il testo nel campo di immissione e modificare la larghezza del pulsante di invio . Successivamente, puoi impostare il riempimento tra ciascuno dei campi e il margine tra intestazioni e campi e al di fuori del pulsante di invio.

• Avvisi : nella sezione Avvisi, puoi definire lo stile del colore di sfondo, del testo, dell'icona, delle proprietà del bordo, del riempimento e della tipografia per qualsiasi avviso mostrato su una qualsiasi delle schede nella pagina Il mio account del tuo negozio WooCommerce.

Imposta la "Pagina del mio account WooCommerce personalizzata" appena creata come Pagina del mio account predefinita

Dopo aver disegnato e personalizzato la pagina del mio account WooCommerce personalizzata che hai appena creato, vai su WooCommerce >> Impostazioni >> Avanzate e scegli la pagina che hai appena creato come "Pagina del mio account". Nello screenshot qui sotto, abbiamo impostato la "Pagina del mio account WooCommerce personalizzata" che abbiamo creato nel passaggio precedente come "Pagina del mio account" predefinita.

Questo aprirà la pagina del mio account WooCommerce personalizzata che hai creato utilizzando il widget del mio account WooCommerce di PowerPack ogni volta che un utente si dirige per accedere al tuo sito.

Avvolgendolo!

Nei passaggi precedenti, abbiamo personalizzato e modellato la nostra pagina Il mio account di WooCommerce per avere un aspetto e una sensazione di stile particolarmente sbalorditivi. Abbiamo usato una combinazione di colori, stili di bordo e box-shadow per ottenere questo aspetto. Puoi controllare le opzioni che abbiamo usato negli screenshot sopra.

Dai un'occhiata alla nostra pagina WooCommerce My Account personalizzata utilizzando il widget WooCommerce My Account di PowerPack qui sotto!

Sono sicuro che, con l'aiuto di questo tutorial, saresti stato in grado di configurare facilmente la tua pagina del mio account WooCommerce personalizzata.

Puoi fare molto di più con il componente aggiuntivo PowerPack per Elementor. Esistono più di 70 widget creativi che puoi utilizzare per personalizzare le tue pagine Elementor. Se desideri saperne di più sul componente aggiuntivo PowerPack per Elementor, controlla qui.

Cosa ne pensi di questo tutorial? Condividi se hai trovato utile questa guida!