Tutorial WordPress affidabili, quando ne hai più bisogno.
Guida per principianti a WordPress
WPB Cup
25 Milioni+
Siti web che utilizzano i nostri plugin
16+
Anni di esperienza con WordPress
3000+
Tutorial WordPress di esperti

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.

Come creare una pagina di accesso cliente WooCommerce personalizzata

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 branding di WordPress.

Esempio di schermata di accesso standard 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.

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

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 1: SeedProd – Ideale per creare una pagina di accesso autonoma completamente personalizzata con un design unico che corrisponde al tuo marchio.
  • Metodo 2: WPForms – Ideale se desideri aggiungere un modulo di accesso flessibile a qualsiasi pagina, post o barra laterale del tuo sito web.
  • Bonus: Personalizza l'accesso al checkout – La scelta migliore per migliorare il modulo di accesso nella pagina di checkout di WooCommerce per aiutare i clienti abituali.

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

Il modo migliore per creare una pagina di accesso cliente WooCommerce personalizzata è utilizzare SeedProd. È il miglior costruttore di pagine di destinazione e temi WordPress per WordPress, ed è incredibilmente facile da usare.

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.

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

📌 Nota: Per questo tutorial, utilizzeremo la licenza SeedProd Pro perché include il modello Pagina di accesso e altre opzioni di personalizzazione avanzate. Esiste anche una versione SeedProd Lite che puoi usare gratuitamente.

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.

Chiave di licenza SeedProd

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’.

Seleziona 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.

Scegli un modello per la tua pagina di accesso SeedProd

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’.

Inserisci un nome per la pagina e un URL per la pagina

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.

Personalizza la tua pagina di accesso WooCommerce

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

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 ciò, SeedProd ti consente anche 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.

Altre opzioni di personalizzazione

Una volta terminata la personalizzazione della pagina di accesso 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.

Impostazioni pagina SeedProd

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’.

Rendi attiva la tua pagina di accesso SeedProd

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.

Anteprima della pagina di accesso WooCommerce

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 è utilizzare 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.

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

📌 Nota: Per questo tutorial, utilizzeremo il piano WPForms Pro perché include l'addon User Registration. Puoi anche provare la versione gratuita di WPForms per iniziare.

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.

Inserisci la tua chiave di licenza WPForms

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’.

Installa il componente aggiuntivo di registrazione utenti WPForms

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’.

Seleziona il modello di modulo di accesso utenti WPForms

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.

Ad esempio, puoi aggiungere campi avanzati come numeri di telefono trascinandoli dal menu sulla sinistra e rilasciandoli sul modello.

Generatore di moduli WPForms

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.

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

Personalizzazione del testo del pulsante WPForms

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.

Modifica le impostazioni di conferma in WPForms

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

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.

Incorpora un modulo nella pagina

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!’

Inserisci un nome per la nuova pagina di accesso

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.

Personalizza il modulo di accesso WooCommerce

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.

Esempio di pagina di accesso WooCommerce tramite WPForms

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.

Vai semplicemente su Aspetto » Widget dalla tua bacheca di 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.

Aggiungi il tuo modulo di accesso nella barra laterale

Al termine, fai clic sul pulsante 'Aggiorna'.

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

Anteprima del 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 personalizzata per WordPress.

Inoltre, puoi anche consultare 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.

Suggerimento 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.

Esempio di checkout WooFunnels

Hai anche la possibilità di testare A/B i funnel multipli, le pagine di vendita e le offerte di upsell.

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

Test A/B di WooFunnels per 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.

Libreria email Autonami per WooCommerce

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 imparare come creare una pagina di accesso personalizzata per i clienti 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 anche trovarci su Twitter e Facebook.

Dichiarazione: Il nostro contenuto è supportato dai lettori. Ciò significa che se fai clic su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come è finanziato WPBeginner, perché è importante e come puoi supportarci. Ecco il nostro processo editoriale.

Il Toolkit WordPress Definitivo

Ottieni l'accesso GRATUITO al nostro toolkit - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Interazioni del lettore

3 CommentsLeave a Reply

  1. Ho sempre aderito alla regola che i grandi siti web sono fatti di dettagli. Sì, la pagina di accesso predefinita di WooCommerce funziona perfettamente, ma è poco attraente e, oserei dire, piuttosto noiosa. SeedProd aggiunge una dimensione completamente nuova ed è incredibilmente facile da usare con una guida così dettagliata a portata di mano. Come ho detto, sono questi dettagli, come una pagina di accesso personalizzata, che trasformano un negozio ordinario in uno buono e uno buono in uno eccezionale. Grazie per il consiglio.

  2. Thank you for showing the SeedProd method :-) I like how SeedProd allows adding custom blocks and sections to match my branding.
    I have one clarifying question – when I use SeedProd to create the custom customer login page, will it also replace the default admin login, or will the admin login page remain unchanged?

    • Sì, sostituirebbe il tuo normale accesso così come l'accesso al tuo negozio.

      Amministratore

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tieni presente che tutti i commenti sono moderati secondo la nostra politica sui commenti, e il tuo indirizzo email NON verrà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avviamo una conversazione personale e significativa.