Come personalizzare la tua pagina di pagamento WooCommerce nel 2025

Gli acquirenti adorano un pagamento rapido e agevole. Ma se c'è anche una piccola distrazione, abbandoneranno i loro carri senza pensarci due volte. Ecco quanto velocemente perdi una vendita.

Con la pagina di pagamento WooCommerce predefinita, potresti già perdere preziosi clienti. Personalizzarlo può fornire un'esperienza di branding coerente, rimuovere le distrazioni e semplificare il completamento degli acquisti per i tuoi clienti. In questo modo puoi migliorare il valore medio degli ordini e aumentare le vendite.

Continua a leggere questo post mentre ti mostriamo come personalizzare una pagina di pagamento WooCommerce nel modo più semplice possibile e ti guidiamo attraverso l'ottimizzazione per migliorare i tassi di conversione.

Perché personalizzare una pagina di pagamento WooCommerce

Guadagni entrate solo quando effettuano il checkout, quindi il tuo checkout deve essere ottimizzato attentamente. Con WooCommerce, ottieni già un checkout pre-progettato insieme ad altre pagine, ma è semplice e inutilmente lungo, il che rischia che i tuoi clienti se ne vadano senza eseguire l'azione desiderata.

Tuttavia, se il tuo checkout è personalizzato, ti aiuta a:

• Aumenta il valore medio dell'ordine (AOV): semplifichi il processo di pagamento dei tuoi clienti eliminando passaggi non necessari, abilitando pagamenti di una sola pagina e compilando automaticamente i dettagli di base. Ciò accelera il completamento del pagamento e invoglia i clienti a ordinare più spesso.
• Migliora l'esperienza utente: ottimizzi il checkout in base al tipo di prodotto. Per un singolo prodotto, permetti loro di effettuare il check-out come ospite. Per gli abbonamenti SaaS mensili, consenti loro di accedere con i dettagli del proprio account Google. Per il noleggio o altre prenotazioni online con un processo lungo (ma essenziale), attivi un checkout in più fasi per suddividerlo.
• Mantieni la coerenza del marchio: Checkout fa ancora parte della tua attività, quindi personalizzarlo per aggiungere il tuo marchio e rimuovere elementi di distrazione come il piè di pagina e l'intestazione è un ottimo modo per garantire che i tuoi clienti completino i loro acquisti.

Modi per personalizzare la pagina di pagamento di WooCommerce

A seconda di quanto desideri personalizzare, puoi utilizzare l'editor del sito di WordPress o un builder WooCommerce per modificare la pagina di pagamento. Ad esempio, con WooCommerce Blocks, puoi apportare piccole modifiche al branding, come colori, caratteri e dimensioni. Ma con un builder WooCommerce come Divi, puoi modificare ogni centimetro della tua pagina di pagamento.

Ti mostrerò come farlo in entrambi i modi.

1. Utilizzo dell'editor del sito e dei blocchi WooCommerce

Tieni presente che puoi accedere a WordPress Site Editor solo se hai installato un tema Block, il che significa che non funzionerà se utilizzi un tema classico o di terze parti. Per il nostro esempio, utilizziamo il tema Twenty Twenty-Four.

Vai su Aspetto > Editor > Pagine > Checkout > Modifica per accedere all'Editor del sito. (Se utilizzi un tema classico, puoi modificare la pagina di pagamento accedendo alla dashboard di WordPress > Pagine > Pagamento > Modifica. )

Vedrai lo shortcode di pagamento WooCommerce predefinito. Eliminalo perché non puoi personalizzarlo affatto.

Aggiungi il blocco Checkout WooCommerce facendo clic sull'icona più.

Rimuovi alcuni elementi del blocco, come note dell'ordine, termini e condizioni, numeri di telefono, intestazioni di sezione, link per tornare al carrello, ecc. Per eliminare un elemento, fai clic sui tre punti (impostazioni) e quindi su Elimina.

Esamina il modello e decidi quali elementi rimuovere. Non esagerare, però, poiché la rimozione di passaggi critici può impedirti di ottenere le informazioni necessarie per i tuoi clienti. Ad esempio, puoi rimuovere la riga Indirizzo 2, poiché i clienti la lasciano generalmente vuota, ma non la colonna del numero di telefono se prevedi di inviare messaggi di marketing tramite SMS o WhatsApp.

Poiché Checkout di WooCommerce è un blocco genitore creato combinando molti blocchi figli, non puoi modificare direttamente le impostazioni di stile come carattere e colore. Poiché i blocchi principali adattano gli stili dalle impostazioni globali del tema, WordPress Gutenberg è limitato nella personalizzazione. Non puoi personalizzare molto a meno che non codifichi o acquisti estensioni, il che alla fine porta a spendere più soldi.

2. Utilizzo di un costruttore WooCommerce come Divi

Se ti piace il controllo completo sul design del tuo negozio online e risparmi denaro, personalizzare il tuo checkout (e altre pagine) con un builder WooCommerce come Divi è ciò di cui hai bisogno. Semplifica la personalizzazione, offre flessibilità illimitata e ti consente di modificare ogni angolo del tuo negozio online, inclusa la pagina di pagamento.

Divi è ideale per personalizzare le pagine di pagamento di WooCommerce (e creare siti di e-commerce) grazie al suo builder drag-and-drop senza codice per la facilità dei principianti, elementi di pagamento WooCommerce dinamici per funzionalità e straordinari layout di pagamento e siti Web preimpostati , che semplifica la progettazione. Divi si abbina perfettamente a WooCommerce, grazie ai suoi strumenti di marketing come Divi Leads, che ti consentono di eseguire test divisi e condizioni che ti aiutano a ottimizzare i diversi percorsi degli utenti.

Ottieni anche strumenti unici come Divi Quick Sites per progettare una pagina di pagamento, un negozio online o un sito Web in due minuti e Divi AI per creare layout di pagina, testi ottimizzati corrispondenti allo stile del tuo marchio e bellissime immagini in pochi minuti. Divi ha tutto ciò di cui hai bisogno per gestire e far crescere il tuo negozio online senza investire in estensioni di terze parti per aggiungere funzionalità.

Inizia con Divi

Perché Divi è perfetto per personalizzare le pagine di pagamento di WooCommerce

Abbinato a WooCommerce, Divi è una soluzione di e-commerce perfetta che ti aiuta a progettare negozi online e pagine di pagamento con marchio senza sforzo. Si integra con WooCommerce grazie a queste potenti funzionalità:

1. Siti Divi Quick per generare un sito WooCommerce (con un modello di pagamento)

Divi Quick Sites è un vero toccasana per i proprietari di siti a cui non piace progettare il proprio sito da zero. Non toccherai nemmeno una riga di codice né sposterai il cursore. Divi Quick Sites creerà per te un negozio online brandizzato in meno di due minuti. Tutto quello che devi fare è attivare il pulsante Acquista mentre inserisci i dettagli del tuo sito e installerà e attiverà automaticamente WooCommerce. Crea inoltre modelli di pagina WooCommerce con marchio come prodotto, carrello e checkout .

Vai su Divi > Genera un nuovo sito > Scegli un modello predefinito.

Il tuo sito è pronto! Vai su Divi > Theme Builder > Checkout per accedere al modello della tua pagina di pagamento. Fai clic sull'icona della matita accanto al corpo personalizzato per modificarlo.

2. Layout del sito WooCommerce progettati professionalmente

Se odi fissare lo schermo vuoto come me, Divi ti copre. Con oltre 2000 layout Divi, puoi importare pacchetti di layout di siti Web progettati in modo professionale per siti Web di e-commerce in qualsiasi settore. Una volta importato uno, può essere personalizzato utilizzando il builder Divi e i moduli WooCommerce, il che semplifica la progettazione di un modello di checkout con marchio.

Non dimentichiamo i modelli di checkout gratuiti che abbiamo rilasciato per semplificarlo ancora di più. Importa il modello, modifica il marchio e il gioco è fatto! Gli esperti Divi (che conoscono i dettagli del web design e dell'ottimizzazione UX) hanno creato questi modelli, quindi ogni design è ottimizzato per la conversione per ottenere più vendite.

3. Moduli di pagamento WooCommerce nativi di Divi

Divi ha oltre 200 moduli nativi e oltre 30 moduli WooCommerce, inclusi i moduli di pagamento, quindi puoi evitare di crearli da zero. I moduli di pagamento di Divi includono solo i campi necessari per garantire tempi rapidi e brevi per i tuoi clienti.

A differenza del blocco Checkout di WooCommerce in Site Editor, che era un blocco genitore con molti blocchi figli che non possono essere modificati separatamente, i moduli di Divi sono separati, quindi sei tu a decidere quali elementi includere. Ad esempio, aggiungi Woo Checkout Information solo se vendi prodotti personalizzati e hai bisogno del contributo dei clienti.

4. Divi Theme Builder per creare rapidamente siti WooCommerce

Divi Theme Builder ti consente di progettare e personalizzare l'intero sito Web e le pagine WooCommerce a livello di sito utilizzando il builder Divi drag-and-drop. Ad esempio, crei un modello di pagina di pagamento (che dipende in gran parte dai carrelli dei clienti) e Divi Theme Builder, combinato con la capacità di contenuto dinamico di Divi, ti aiuta a offrire ai tuoi clienti un'esperienza di branding coerente senza sforzi manuali da parte tua.

Quando apporti modifiche a un modello, queste vengono aggiornate ovunque. Questo è ottimo per i negozi con più prodotti, poiché personalizzi solo il modello del prodotto per modificare tutte le pagine del prodotto. Allo stesso modo, puoi creare e personalizzare modelli per altre pagine WooCommerce, come il carrello e persino pagine di destinazione specifiche per prodotto.

5. Strumenti di marketing integrati per ottimizzare le pagine di pagamento

Divi dispone di potenti strumenti di marketing come funzionalità integrate per aiutarti a ottimizzare le tue pagine di pagamento per ottenere tassi di conversione migliori. Ad esempio, Divi Leads ti consente di eseguire test divisi e scegliere un vincitore tra due elementi. Puoi testare intere pagine di pagamento, intestazioni, copie di descrizioni, CTA o altri componenti.

Supponiamo che tu non sia sicuro se nascondere l'intestazione del sito al momento del pagamento. Puoi facilmente creare uno split test e scegliere un vincitore in base a un tasso di conversione elevato tra i due.

Allo stesso modo, le Condizioni ti consentono di creare esperienze di acquisto personalizzate. Ad esempio, puoi mostrare messaggi dinamici agli utenti, come un messaggio "Bentornato!" ai clienti registrati o “Sconti esclusivi per i membri! Crea il tuo account adesso!” ai visitatori per la prima volta. Divi include anche plug-in premium come Bloom per creare opzioni di posta elettronica ad alta conversione e Monarch per commercializzare e indirizzare più traffico.

Ottieni Divi+WooCommerce

Come personalizzare la tua pagina di pagamento WooCommerce (passo dopo passo)

Questo tutorial si concentra sulla personalizzazione di una pagina di pagamento WooCommerce. Per una procedura passo passo per avviare un negozio online, leggi la nostra guida sulla creazione di un negozio e-commerce.

Per seguire questo tutorial è necessario che il tema Divi sia installato e attivo nel tuo negozio online.

L'abbonamento annuale a Divi costa $ 89, ma puoi ottenerlo per tutta la vita con un pagamento una tantum di $ 249. Una volta acquistato Divi, accedi con le credenziali di Elegant Themes e scarica il file Divi.zip. Carica la cartella zip sul tuo aspetto WordPress > Temi > Aggiungi nuova scheda. Infine, attiva la tua licenza Divi.

Ecco un tutorial passo passo sull'installazione e l'attivazione di Divi:

Ottieni Divi+WooCommerce

1. Crea un modello di pagina di pagamento

Vai su Divi > Theme Builder > Aggiungi nuovo modello per creare da zero.

Scegli Checkout dalle pagine WooCommerce come fonte.

La finestra successiva è il builder Divi drag-and-drop per progettare il tuo modello di pagamento. Passa il mouse sopra e fai clic sull'icona più per aggiungere una riga e creare un modello di pagina di pagamento utilizzando Divi Theme Builder.

Se non vuoi crearne uno, importa un modello predefinito o chiedi a Divi AI di crearne uno utilizzando Build with AI.

Ricorda che non devi costruire da zero se non sai da dove cominciare. Puoi sempre generare un modello di pagamento brandizzato con Divi Quick Sites.

2. Personalizza il modello della tua pagina di pagamento

Utilizzerò il modello di pagamento Divi Quick Sites che abbiamo generato sopra per mostrarti il ​​processo di personalizzazione. Ecco come appare:

Come puoi vedere, il modello generato da Divi Quick Sites include già i moduli di pagamento WooCommerce necessari, quindi non dovrai fare molto altro che aggiungere i tuoi metodi di pagamento ( WooCommerce > Impostazioni > Pagamenti ) per renderlo funzionale prima della pubblicazione.

Suggerimento professionale: installa l'estensione WooPayments per consentire ai clienti di utilizzare i metodi di pagamento locali preferiti, come Paytm in India e Pix in Brasile. Offre inoltre numerosi vantaggi, come depositi bancari automatici e supporto multivaluta. L'aggiunta di più metodi di pagamento aumenta le possibilità che i tuoi clienti completino il processo di pagamento.

Utilizza i moduli di pagamento WooCommerce di Divi

Esaminiamo i moduli di pagamento WooCommerce di Divi a cui hai accesso. A differenza dei blocchi WooCommerce di WordPress Gutenberg, i moduli WooCommerce di Divi sono ottimizzati per la velocità. Ad esempio, il modulo Woo Checkout Bill include solo i campi necessari, con etichette e titoli di campo (facoltativi) se non sono essenziali.

Oltre a ciò, invece di un blocco genitore, i moduli di pagamento Divi sono separati, quindi decidi tu se aggiungere un indirizzo di spedizione diverso con Woo Checkout Shipping o aggiungere note sull'ordine con Woo Checkout Information .

Puoi personalizzare facilmente lo stile di un modulo facendo clic sull'icona a forma di ingranaggio (impostazioni) e passando a Progettazione da contenuto . Puoi modificare rapidamente colori, caratteri, pulsanti e altre impostazioni.

La parte migliore dell'utilizzo di Divi sono i suoi oltre 200 moduli di contenuti nativi per migliorare la tua pagina di pagamento per ottenere più conversioni. Nelle sezioni seguenti utilizzeremo diverse impostazioni e moduli Divi per ottimizzare questo modello di pagamento.

Aggiungi una testimonianza per creare credibilità

Mostrare prove sociali al momento del pagamento è un ottimo modo per aiutare gli acquirenti a superare i dubbi dell'ultimo minuto e completare i loro acquisti. Utilizzando il modulo Testimonial nativo di Divi, puoi aggiungere una testimonianza permanente del cliente per creare credibilità. Vai alle sue impostazioni per farlo risaltare aggiungendo un colore di sfondo o un bordo o modificando il carattere, i colori, ecc.

Poiché non è dinamica, la testimonianza apparirà uguale a tutti i clienti, quindi assicurati di scegliere una testimonianza specifica del marchio anziché una specifica del prodotto, qualcosa che dipinga il marchio come affidabile e affidabile.

Creare una sezione di garanzia

Potresti anche creare una sezione Garanzia al momento del pagamento per ricordare ai tuoi clienti perché dovrebbero fidarsi di fare acquisti con il tuo marchio. Ad esempio, qui su Elegant Themes diamo una garanzia di rimborso di 30 giorni senza fare domande . Questo perché crediamo che una volta che i nostri clienti si saranno abituati a Divi, lo adoreranno immediatamente e si dimenticheranno di un rimborso.

Puoi anche visualizzare qualcosa di semplice, come i valori della tua azienda, il numero di clienti, ecc., per evidenziare l'autorità del tuo marchio.

Per creare una sezione come questa, utilizza i moduli Titolo, Icona e Testo nativi di Divi. Segui questo tutorial per utilizzare Divi Builder e i moduli per aggiungere e personalizzare elementi.

Crea un banner di sconto last minute utilizzando la funzionalità di contenuto dinamico di Divi

Un'altra cosa grandiosa dei moduli Divi è che sono dinamici, il che significa che estraggono automaticamente i dati da prodotti specifici senza doverli inserire manualmente. Ad esempio, quando i tuoi clienti configurano il carrello e selezionano i prodotti, le informazioni vengono compilate automaticamente nel modulo Dettagli Woo Checkout di Divi.

Puoi anche modificare le impostazioni del contenuto dinamico in alcuni elementi per personalizzare ancora di più l'esperienza degli utenti. Ad esempio, crea un banner di sconto last minute con un limite di tempo per creare urgenza e incoraggiare gli utenti a completare i propri acquisti. Per questo, utilizzare il modulo Countdown Timer . Ecco come personalizzarlo:

Mostra sconti speciali per i clienti che hanno effettuato l'accesso utilizzando le condizioni di Divi

Le Condizioni di Divi sono un'altra potente funzionalità per ottimizzare i percorsi di acquisto in base a clienti diversi. Ad esempio, crea un banner popup di sconto con intenzione di uscita per retargetizzare i clienti che non hanno completato l'acquisto dopo essere andati alla pagina di pagamento. Oppure mostra un codice sconto riservato agli utenti che hanno effettuato l'accesso o un'offerta di consegna gratuita ai clienti che hanno creato un account cliente.

Innanzitutto, crea un banner immagine e aggiungilo utilizzando il modulo Immagine di Divi. Quindi vai su Impostazioni > Avanzate > Condizioni. Ora scegli lo stato Utente connesso . Ecco come mostrare un codice sconto agli utenti che hanno effettuato l'accesso.

Rimuovi l'intestazione e il piè di pagina del sito per evitare distrazioni

Rimuovere le distrazioni dal checkout è necessario per garantire che i tuoi clienti si concentrino sul completamento dell'acquisto. Questi elementi di distrazione potrebbero essere pulsanti o collegamenti che potrebbero allontanare i tuoi clienti dal pagamento, generalmente nell'intestazione e nel piè di pagina del tuo sito. Quindi, nascondili. Ma come puoi assicurarti che siano visibili su altre pagine, ad eccezione di checkout e carrello? Farlo con Divi è semplicissimo, grazie a Divi Theme Builder.

Durante la creazione di modelli con Divi Theme Builder, crei e assegni pagine di destinazione specifiche su cui li utilizzerai. Ad esempio, abbiamo assegnato Checkout dalle pagine WooCommerce al nostro modello di pagamento, quindi eventuali modifiche influenzeranno solo le pagine di pagamento.

Per nascondere l'intestazione e il piè di pagina dal modello di pagamento, fai clic sull'icona a forma di occhio accanto a essi e su Salva modifiche . L'icona dell'occhio rappresenta la visibilità e, poiché l'abbiamo disattivata, significa che non sono visibili.

Se non vuoi nascondere completamente l'intestazione e il piè di pagina, puoi creare versioni più semplificate per la pagina di pagamento. Basta fare clic per modificare l'area dell'intestazione o del piè di pagina del modello della pagina di pagamento e utilizzare il builder per apportare modifiche.

Facoltativo: aggiunta di un modulo popup di ottimizzazione e-mail

Puoi anche utilizzare il plug-in Bloom di Divi per creare un popup di attivazione e-mail con buoni sconto esclusivamente per gli abbonati e-mail. Bloom ha molti tipi di visualizzazione diversi, inclusi popup specifici del trigger. Ad esempio, puoi mostrare il popup se un utente è inattivo sulla pagina del prodotto. Oppure attiva un popup personalizzato nella pagina di ringraziamento dopo aver completato l'acquisto. Questo sarebbe un ottimo momento per offrire uno sconto per iscriversi alla tua lista e-mail in modo da poter ottenere più vendite.

Ottieni Divi+WooCommerce

3. Salva e visualizza l'anteprima del modello di pagamento

Una volta soddisfatto del tuo progetto, fai clic sul pulsante Salva in basso a destra in Divi Builder.

Ottieni Divi+WooCommerce

Altri modi per ottimizzare i modelli di pagamento WooCommerce

Oltre a personalizzare il tuo checkout WooCommerce con Divi, ecco alcuni plugin essenziali ed estensioni WooCommerce che ti aiuteranno a ottimizzare ancora di più il tuo checkout:

• Bloom: per ridurre il tasso di abbandono dei carrelli, raccogli contatti e-mail direttamente dalle tue pagine di pagamento offrendo sconti speciali o aggiornamenti in cambio di iscrizioni via e-mail.
• FunnelKit: ottimizza il percorso di acquisto dei tuoi clienti creando canalizzazioni di vendita automatizzate e checkout in una sola pagina.
• DiviFlash: aumenta le tue vendite con layout WooCommerce straordinari e ottimizzati per la conversione per le pagine di negozio, prodotto, carrello e pagamento. Vedi anche il kit di interfaccia utente WooCommerce definitivo.
• Divi Checkout: offri diverse opzioni di pagamento, tra cui Google Pay e Apple Pay, per semplificare l'elaborazione dei pagamenti per i tuoi clienti.
• WooCommerce One-Page Checkout: riduci il tempo impiegato per il checkout creando processi di pagamento in una sola pagina.
• WooPayments: accetta pagamenti in oltre 135 valute e integra oltre 100 metodi di pagamento per offrire ai tuoi clienti le loro scelte preferite.
• Gestore campi di pagamento: personalizza facilmente le etichette dei campi di pagamento di WooCommerce.
• Campi personalizzati WooCommerce: aggiungi il menu a discesa, la casella di controllo e la selezione multipla dei campi personalizzati al blocco WooCommerce Checkout predefinito.
• Plugin SEO WooCommerce: ottimizza il tuo sito per il SEO WooCommerce utilizzando plugin che semplificano il processo di indicizzazione e ottimizzazione di prodotti, categorie e altre pagine WooCommerce.

Inoltre, se non hai ancora deciso un tema, puoi dare un'occhiata a questi temi WooCommerce, che offrono una maggiore personalizzazione immediata.

Strumenti necessari per creare modelli di pagamento WooCommerce

Divi + WooCommerce è la soluzione e-commerce definitiva

Divi e WooCommerce sono tutto ciò di cui hai bisogno per creare un negozio di e-commerce unico e funzionale che i tuoi clienti entusiasmeranno. La personalizzazione di Divi perfeziona la funzionalità di e-commerce di WooCommerce, così puoi creare pagine di pagamento rapide e fluide, ottimizzarle per più conversioni e ridurre i tassi di carrello abbandonati.

Ottieni Divi+WooCommerce

Domande frequenti sulla personalizzazione delle pagine di pagamento di WooCommerce

Come posso personalizzare la pagina di pagamento di WooCommerce senza plugin?

Puoi personalizzare la pagina di pagamento di WooCommerce senza plug-in utilizzando l'editor del sito di WordPress , ma con esso puoi fare solo un certo limite. Per ottenere il controllo completo sul design della tua pagina di pagamento, un modo migliore è utilizzare un tema personalizzabile come Divi che funziona con WooCommerce e ti consente di modificare ogni centimetro del tuo negozio online.

Come posso migliorare le conversioni del mio checkout?

Dovresti iniziare semplificando la procedura di pagamento. Rimuovi i campi non necessari e aggiungi più metodi di pagamento in modo che i tuoi clienti possano scegliere. Quindi, utilizza fattori di credibilità come testimonianze, garanzie, sconti e offerte last minute per aiutare gli acquirenti a prendere rapidamente decisioni di acquisto. Un tema altamente personalizzabile come Divi può facilmente aggiungere questi elementi alla tua pagina di pagamento.

Come posso modificare la pagina di pagamento predefinita di WooCommerce?

Cambiare la pagina di pagamento WooCommerce predefinita con Divi è semplicissimo. Basta andare su Divi > Theme Builder e generare un nuovo modello di pagamento. Successivamente, puoi utilizzare Divi Builder per progettare la tua pagina di pagamento come preferisci.

Come posso aggiungere un campo di pagamento personalizzato in WooCommerce?

Puoi aggiungere un campo di pagamento personalizzato in WooCommerce installando l'estensione WooCommerce Custom Fields. Un modo migliore è utilizzare Divi per accedere a oltre 200 moduli di contenuto, inclusi elementi interattivi come menu a discesa, caselle di controllo, ecc.