Come personalizzare le pagine di accesso di WooCommerce (3 metodi)

Se vuoi offrire ai clienti un'esperienza più fluida nel tuo negozio WooCommerce, creare una pagina di accesso personalizzata è un ottimo punto di partenza.

La pagina di accesso predefinita di WordPress appare semplice e non corrisponde al branding del tuo negozio. Personalizzandola, puoi rendere il processo di accesso più professionale e in linea con il tuo brand.

Noi di WPBeginner abbiamo aiutato molti utenti a configurare pagine di accesso personalizzate, e il modo più semplice è utilizzare un page builder come SeedProd o un plugin per moduli come WPForms.

In questo tutorial, ti mostrerò come progettare una pagina di accesso WooCommerce completamente personalizzata e ti presenterò uno strumento potente che puoi utilizzare anche per personalizzare la pagina di accesso al checkout.

Perché creare una pagina di accesso personalizzata per i clienti WooCommerce?

Personalizzare le pagine di accesso di WooCommerce ti consente di aggiungere il tuo logo e modificare il design per adattarlo al tuo sito web. Questo rende il tuo sito più professionale e offre una migliore esperienza utente.

Ti consente inoltre di aggiungere più campi al modulo e ti permette persino di promuovere prodotti specifici o mostrare offerte speciali ai clienti.

Altrimenti, quando i clienti accedono al tuo negozio WooCommerce, vedranno la pagina di accesso predefinita di WordPress con solo il logo e il marchio di WordPress.

Questa pagina va bene se vuoi solo accedere alla dashboard del tuo sito. Tuttavia, i clienti potrebbero essere scoraggiati dal design semplice e trovarlo sospetto che la pagina di accesso non corrisponda all'aspetto del tuo sito web.

Detto questo, vediamo come puoi creare una pagina di accesso cliente personalizzata in WooCommerce.

Quale metodo dovresti scegliere?

Questo articolo copre tre diversi modi per personalizzare la tua pagina di accesso. Ecco un breve riepilogo per aiutarti a scegliere quello migliore per il tuo negozio:

Metodo	Ideale per	Caratteristiche principali/Flessibilità
SeedProd	Creazione di una pagina di accesso completamente personalizzata e autonoma con un design che corrisponde al tuo brand.	Builder drag-and-drop, personalizzazione completa della pagina, blocchi WooCommerce (prodotti, offerte).
WPForms	Aggiunta di un modulo di accesso flessibile a qualsiasi pagina, post o barra laterale del tuo sito web.	Builder di moduli drag-and-drop, moduli facilmente incorporabili, addon di registrazione utente, campi personalizzabili.
FunnelKit (Accesso al checkout)	Miglioramento del modulo di accesso nella pagina di checkout di WooCommerce per aiutare i clienti abituali.	Modelli di checkout dal design professionale, esperienza di accesso senza interruzioni durante il checkout, test A/B, analisi.

Puoi utilizzare i collegamenti rapidi qui sotto per passare a diversi metodi nel nostro tutorial:

Metodo 1: Crea una pagina di accesso WooCommerce completamente personalizzata utilizzando SeedProd

Il modo migliore per creare una pagina di accesso completamente personalizzata è utilizzare SeedProd. È il miglior builder di landing page WordPress che sostituisce l'accesso predefinito di WordPress per il tuo negozio WooCommerce con un design personalizzato.

Puoi utilizzare il costruttore drag-and-drop di SeedProd per personalizzare il design e il layout di una pagina o del tuo tema WordPress senza toccare una singola riga di codice.

Per saperne di più, consulta la nostra recensione dettagliata di SeedProd.

Passaggio 1: Installa e attiva SeedProd

Innanzitutto, dovrai installare e attivare il plugin SeedProd. Se hai bisogno di aiuto, consulta la nostra guida su come installare un plugin WordPress.

Dopo l'attivazione, vedrai la schermata di benvenuto di SeedProd.

Inserisci la tua chiave di licenza e fai clic sul pulsante ‘Verifica chiave’. Puoi trovare la chiave di licenza nell'area account di SeedProd.

Passaggio 2: Imposta una nuova pagina di accesso

Successivamente, puoi creare una pagina di accesso personalizzata per il tuo negozio WooCommerce.

Vai semplicemente su SeedProd » Landing Pages dalla tua bacheca di WordPress e fai clic sul pulsante ‘Imposta una pagina di accesso’.

Dopodiché, SeedProd ti mostrerà diversi modelli. Puoi selezionarne rapidamente uno e personalizzarlo in base alle tue esigenze. Questo aiuta a risparmiare tempo e puoi utilizzare un design esistente per creare la tua pagina di accesso WooCommerce.

Il plugin ti consente anche di creare una pagina di accesso da zero utilizzando un modello vuoto.

Una volta selezionato un modello, si aprirà una finestra popup.

Continua e inserisci un nome per la tua pagina e fai clic sul pulsante ‘Salva e inizia a modificare la pagina’.

Passaggio 3: Personalizza il design della pagina di accesso

Successivamente, vedrai il generatore di pagine drag-and-drop.

Ora puoi personalizzare la pagina di accesso aggiungendo nuovi blocchi al modello dal menu sulla sinistra.

SeedProd offre blocchi standard per titoli, testi, immagini, pulsanti e altro.

Oltre a questi, puoi aggiungere blocchi avanzati come un giveaway, modulo di contatto, pulsanti di condivisione social, modulo di iscrizione e altro.

Ci sono anche blocchi WooCommerce come prodotti recenti, prodotti in evidenza e prodotti più venduti che puoi aggiungere al tuo modello di pagina di accesso.

Utilizzando i blocchi WooCommerce, puoi facilmente consigliare i tuoi prodotti migliori e promuovere offerte di sconto per ottenere più conversioni.

Oltre a questi blocchi, SeedProd ti consente inoltre di personalizzare ulteriormente qualsiasi sezione della pagina di accesso. Fai semplicemente clic sulla sezione e vedrai altre opzioni come la modifica dell'etichetta, del colore, del carattere e dello spazio.

Passaggio 4: Pubblica la tua pagina di accesso personalizzata

Una volta terminata la personalizzazione della pagina di accesso di WooCommerce, non dimenticare di fare clic sul pulsante 'Salva' in alto.

Dopodiché, puoi andare alla scheda ‘Impostazioni pagina’ e fare clic sull’interruttore ‘Stato pagina’ per cambiarlo da Bozza a Pubblica. Quindi, puoi procedere e fare clic sul pulsante ‘Salva’ e chiudere il page builder.

Passaggio 5: Attiva la nuova pagina di accesso

Da qui, tutto ciò che resta è far apparire la tua nuova pagina di accesso personalizzata per WooCommerce per gli utenti. Per fare ciò, vai su SeedProd » Pagine di destinazione nella tua bacheca di WordPress.

Fai semplicemente clic sull’interruttore sotto ‘Pagina di accesso’ in modo che sia verde e dica ‘Attiva’.

Una volta attivato, la tua nuova pagina di accesso apparirà sul tuo sito web WordPress!

Puoi visitare il tuo negozio eCommerce per vederla in azione.

Metodo 2: Personalizza il modulo di accesso cliente WooCommerce utilizzando WPForms

Vuoi creare un modulo di accesso che corrisponda anche al tuo tema del sito web e offra più campi modulo?

Il modulo di accesso predefinito di WordPress consente solo agli utenti di inserire il proprio indirizzo email o nome utente insieme a una password.

Il vantaggio principale dell’utilizzo di un plugin per moduli è la flessibilità. Ti consente di posizionare il tuo modulo di accesso ovunque nel tuo negozio online, come in una barra laterale o in una pagina prodotto, rendendolo conveniente per i clienti.

Il modo migliore per farlo è usare WPForms. È il miglior costruttore di moduli WordPress facile da usare per i principianti. Oltre 6 milioni di siti web utilizzano WPForms per creare moduli più intelligenti.

Su WPBeginner, lo abbiamo utilizzato per creare moduli di contatto e sondaggi annuali, e ci piace molto. Per saperne di più, consulta la nostra recensione completa di WPForms.

Puoi creare facilmente un modulo di accesso WooCommerce personalizzato e visualizzarlo ovunque sul tuo negozio online, come nella barra laterale o nella pagina del prodotto.

Passaggio 1: Installa e attiva WPForms

Innanzitutto, dovrai installare e attivare il plugin WPForms. Se hai bisogno di aiuto, consulta la nostra guida su come installare un plugin WordPress.

Dopo l'attivazione, puoi andare su WPForms » Impostazioni dalla tua bacheca di WordPress e inserire la chiave di licenza. Puoi trovare la chiave di licenza nell'area account di WPForms.

Passaggio 2: Installa l'addon di registrazione utente

Successivamente, dovrai recarti su WPForms » Addons nel pannello di amministrazione di WordPress.

Dopodiché, scorri verso il basso fino a ‘User Registration Addon’ e fai clic sul pulsante ‘Install Addon’.

Passaggio 3: Crea un nuovo modulo di accesso utente

Ora sei pronto per creare un modulo di accesso personalizzato per WooCommerce. Vai semplicemente su WPForms » Add New per avviare il costruttore di moduli.

Nella schermata successiva, puoi inserire un nome per il tuo modulo in alto. Quindi, cerca il modello ‘User Login Form’ e fai clic sul pulsante ‘Use Template’.

Passaggio 4: Personalizza i campi del tuo modulo di accesso

Dopodiché, puoi personalizzare il tuo modello di modulo di accesso utente utilizzando il costruttore drag-and-drop. WPForms rende molto facile aggiungere diversi campi al modulo o riorganizzare i campi esistenti nel modello.

Puoi aggiungere campi aggiuntivi se desideri combinare l'accesso con altre azioni, o semplicemente riorganizzare i campi esistenti nel modello.

Puoi personalizzare ulteriormente ogni campo del modulo nel modello. Fai semplicemente clic su qualsiasi campo e modifica la sua etichetta, aggiungi una descrizione e rendilo un campo obbligatorio nel modulo.

Passaggio 5: Configura le impostazioni del modulo e le conferme

Dopodiché, puoi recarti nella scheda ‘Settings’ nel costruttore di moduli. Nelle impostazioni generali, puoi cambiare il testo del pulsante di invio in ‘Login.’

Successivamente, puoi andare alla scheda ‘Confirmations’ per cambiare cosa accadrà quando un utente accede con successo.

Fai semplicemente clic sul menu a discesa ‘Confirmation Type’ e seleziona un'opzione. Puoi mostrare ai clienti un messaggio, visualizzare una pagina o reindirizzarli a un URL specifico.

Ad esempio, puoi aggiungere il tuo modulo di accesso WooCommerce a una pagina prodotto e consentire ai clienti di accedere rapidamente per acquistare il tuo prodotto.

Al termine, fai semplicemente clic sul pulsante ‘Save’ in alto.

Passaggio 6: Incorpora e pubblica il modulo di accesso

Successivamente, dovrai aggiungere il modulo di accesso clienti WooCommerce a una pagina del tuo sito.

Fai semplicemente clic sul pulsante ‘Embed’ in alto nel costruttore. Puoi quindi scegliere se inserire il modulo in una pagina esistente o crearne una nuova.

Scegliamo per ora l'opzione ‘Create New Page’.

Successivamente, dovrai inserire un nome per la tua pagina e fare clic sul pulsante ‘Let’s Go!’

Dopodiché, vedrai il modulo di accesso di WPForms nell'area dei contenuti di WordPress.

Da qui, puoi personalizzare e stilizzare il tuo modulo di accesso aprendo il pannello dei blocchi sul lato destro dello schermo. Nella sezione 'Temi', puoi scegliere tra oltre 40 temi predefiniti per dare al tuo modulo di accesso un aspetto unico.

Puoi anche cambiare lo stile e le dimensioni dei campi del modulo, delle etichette, dei pulsanti e altro ancora.

Una volta soddisfatto del design, puoi visualizzare in anteprima il tuo modulo, pubblicare la nuova pagina e visualizzare il modulo di accesso WooCommerce personalizzato per i tuoi clienti.

Passaggio 7: (Facoltativo) Aggiungi il modulo alla barra laterale

Puoi anche aggiungere il tuo modulo di accesso WooCommerce alla barra laterale del tuo negozio. In questo modo, il tuo modulo apparirà su ogni pagina del prodotto e consentirà ai clienti di accedere rapidamente.

Semplicemente vai su Aspetto » Widget dalla tua bacheca WordPress. Successivamente, fai clic sul pulsante '+' e aggiungi un blocco widget di WPForms.

Dopodiché, puoi scegliere il tuo modulo di accesso dal menu a discesa e inserire un titolo.

Al termine, fai clic sul pulsante 'Aggiorna'.

Ora puoi visitare il tuo negozio online per vedere il modulo di accesso nella barra laterale.

Per ulteriori modi per creare una pagina di accesso cliente WooCommerce personalizzata, potresti voler consultare la nostra guida su come creare una pagina di accesso WordPress personalizzata.

Inoltre, puoi anche vedere il nostro tutorial su come aggiungere un menu di navigazione in WordPress in modo da poter aggiungere la tua pagina di accesso WooCommerce alla navigazione del tuo sito web.

Metodo Bonus: Personalizza la pagina di accesso al checkout di WooCommerce

WooCommerce consente ai visitatori di ritorno di accedere durante la pagina di checkout. Tuttavia, un modulo di accesso generico o goffo sulla pagina di checkout può interrompere il processo di acquisto e portare a vendite perse.

Creando un'esperienza di accesso fluida e personalizzata in questo passaggio critico, puoi ridurre l'abbandono del carrello e costruire maggiore fiducia con i tuoi clienti.

Il modo migliore per farlo è utilizzare un potente plugin per la creazione di funnel come FunnelKit.

Viene fornito con modelli progettati professionalmente che sostituiscono la pagina di checkout predefinita, offrendo ai clienti abituali un'esperienza di accesso molto migliore e più semplice. Questo aiuta a ridurre l'attrito e rende più probabile che completino i loro acquisti.

Hai anche la possibilità di testare A/B più funnel, pagine di vendita e offerte di upsell.

FunnelKit ti fornisce analisi dettagliate su ogni fase del tuo funnel WooCommerce.

Viene fornito anche con un potente componente aggiuntivo di automazione del marketing, FunnelKit Automations.

Ti consente di personalizzare le email di WooCommerce, inviare notifiche email a goccia in WooCommerce per abbandono del carrello, serie di benvenuto e altro ancora.

Se sei serio riguardo alla crescita del tuo negozio WooCommerce, allora questo è uno degli strumenti indispensabili che raccomandiamo.

Domande frequenti sulle pagine di accesso WooCommerce

Ecco alcune domande che i nostri lettori pongono frequentemente sulla creazione di pagine di accesso WooCommerce in WordPress:

Posso usare queste pagine di accesso personalizzate anche per gli utenti WordPress normali?

Sì, assolutamente. Il metodo che utilizza SeedProd sostituisce la pagina di accesso predefinita di WordPress per tutti gli utenti, inclusi amministratori ed editor. Il metodo WPForms ti consente di inserire un modulo di accesso ovunque, che può essere utilizzato anche da qualsiasi ruolo utente.

Devo sapere come programmare per personalizzare la mia pagina di accesso?

Assolutamente no. Sia SeedProd che WPForms sono progettati per essere facili da usare con costruttori drag-and-drop. Puoi creare una pagina di accesso dall'aspetto professionale senza toccare una singola riga di codice.

È gratuito creare una pagina di accesso WooCommerce personalizzata?

Entrambi i plugin offrono versioni gratuite per iniziare. Tuttavia, per accedere ai modelli specifici della pagina di accesso e alle funzionalità avanzate mostrate in questo tutorial, avrai bisogno delle versioni Pro di SeedProd o WPForms.

Quale metodo è migliore per il mio negozio, SeedProd o WPForms?

Dipende dalle tue esigenze specifiche. SeedProd è ideale se vuoi creare una pagina di accesso completamente separata e dal design completo che si abbini perfettamente al tuo brand.

D'altra parte, WPForms è migliore se desideri un modulo di accesso flessibile che puoi aggiungere in vari punti del tuo sito, come una barra laterale o una pagina di checkout.

Speriamo che questo articolo ti abbia aiutato a capire come creare una pagina di accesso personalizzata per i clienti di WooCommerce. Puoi anche consultare la nostra selezione di esperti dei migliori plugin WooCommerce e la nostra guida su come limitare i tentativi di accesso in WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro Canale YouTube per tutorial video su WordPress. Puoi trovarci anche su Twitter e Facebook.