3 modi efficaci per personalizzare e modificare la pagina di pagamento di WooCommerce

Stai cercando il modo migliore per modificare la pagina di pagamento di WooCommerce ?

Imparare a personalizzare la pagina di pagamento di WooCommerce ti consente un maggiore controllo sul suo design e aumenta il potenziale per più vendite.

‍ In questo tutorial dettagliato, ti mostreremo tre modi senza codice per personalizzare la pagina di pagamento, inclusa la regolazione completa del design e/o la modifica dei campi che appaiono nella pagina di pagamento.

Esamineremo anche tutte le funzionalità integrate offerte da WooCommerce per personalizzare l'esperienza di pagamento.

Iniziamo…

Motivi per modificare la pagina di pagamento di WooCommerce

C'è un motivo lampante per modificare la pagina di pagamento di WooCommerce per cominciare? Dipende. Il modulo di pagamento integrato è pulito, funzionale e abbastanza veloce da elaborare i pagamenti senza infastidire i tuoi clienti.

Ma potresti anche notare i suoi aspetti negativi. Ecco i motivi principali per cui potresti voler modificare la pagina di pagamento di WooCommerce :

• Per sostituire gli elementi del marchio WooCommerce predefiniti come i caratteri, gli stili preimpostati e il viola WooCommerce.
• Per aggiungere elementi web correlati alla tua attività, come un logo, colori del marchio e collegamenti alla documentazione di supporto.
• Se è necessario ottimizzare il checkout per le conversioni dopo il test.
• Per accelerare il processo di pagamento convertendolo in un passaggio.
• Per incorporare upsell, cross-sell e prodotti correlati.
• Per aggiungere campi personalizzati o rimuovere alcuni campi forniti da WooCommerce.
• Per modificare le opzioni di spedizione.
• Per modificare elementi di design come il testo del pulsante, il testo del campo predefinito e le opzioni di pagamento degli ospiti.

Come modificare la pagina di pagamento di WooCommerce

Hai diverse opzioni disponibili per modificare la pagina di pagamento di WooCommerce. Il metodo che funziona meglio per te dipenderà dalle modifiche specifiche che stai cercando di apportare e dalla tua disponibilità o meno all'utilizzo di un plug-in.

Di seguito, esamineremo tre dei migliori metodi:

1. Impostazioni native di WooCommerce : WooCommerce include molte opzioni integrate per la personalizzazione del checkout, che descriveremo in dettaglio nel primo metodo. Il tuo tema potrebbe anche offrire le proprie opzioni per personalizzare il design della pagina di pagamento.
2. Elementor Pro – Elementor Pro ora offre il proprio widget di pagamento che ti consente di personalizzare completamente il design della pagina di pagamento. Questa è un'ottima opzione se desideri modificare specificamente il design della pagina.
3. Editor campo di pagamento : questa è un'ottima opzione se desideri modificare i campi del modulo visualizzati nella pagina di pagamento. Puoi usarlo per aggiungere nuovi campi, rimuovere i campi predefiniti e riorganizzare tutto secondo necessità.

Esaminiamoli..

Metodo 1: utilizza le impostazioni di pagamento predefinite di WooCommerce

WooCommerce offre impostazioni integrate per modificare il tuo modulo di pagamento e il tuo tema WordPress potrebbe già fornire strumenti per regolare alcuni campi e impostazioni di pagamento nel Personalizzatore di WordPress.

È sempre consigliabile controllare queste impostazioni prima di cercare un plug-in, un tema o un personalizzatore di campo aggiuntivo, poiché potresti già disporre delle funzionalità di cui hai bisogno.

Ad esempio, WooCommerce ha strumenti per rimuovere determinati campi, abilitare le aliquote fiscali durante il checkout e mostrare i campi dei coupon.

Passaggio 1: aggiungi i calcoli delle tasse e un campo coupon al momento del pagamento

WooCommerce ha impostazioni integrate per automatizzare il calcolo delle tasse e accettare coupon al momento del pagamento.

Per attivare/disattivare, vai su WooCommerce > Impostazioni su WordPress.

Scegli la scheda Generale e scorri verso il basso fino alla sezione Abilita tasse . Seleziona la casella per abilitare le aliquote fiscali e i calcoli durante il checkout. Questo genera e visualizza le tasse in base alle tariffe che configuri in WooCommerce ( WooCommerce > Impostazioni > Tasse > Tariffe standard ).

Seleziona la casella Abilita l'uso dei codici coupon per mostrare un campo in cui i clienti possono digitare i codici sconto.

Se preferisci non mostrare determinati elementi, rimuovi semplicemente le caselle di controllo. Assicurati di fare clic sul pulsante Salva per vedere le modifiche sul frontend.

Passaggio 2: mostra i prezzi dei prodotti con o senza tasse

Una cosa è calcolare le tasse alla fine del checkout, ma devi anche decidere se desideri includere le tasse nel costo complessivo dei prodotti, soprattutto quando i clienti si spostano durante il checkout.

In generale, questo mostra una maggiore trasparenza, invece di aumentare il prezzo con le tasse appena prima che il cliente paghi.

Per includere le tasse con i prezzi nel processo di pagamento, vai su WooCommerce > Impostazioni > Tasse .

Scorri la pagina verso il basso per trovare il campo "Visualizza i prezzi durante il carrello e il checkout".

Scegli dal menu a tendina:

• Tasse incluse
• Tasse escluse

Fare clic su Salva modifiche .

Passaggio 3: imposta ciò che gli articoli di spedizione mostrano alla cassa

Inoltre, in WooCommerce > Impostazioni , puoi contrassegnare quale zona di spedizione, metodi e calcoli vengono visualizzati nel checkout di WooCommerce.

Basta andare alla scheda Spedizione e regolare:

• Calcoli: per abilitare il calcolatore di spedizione nella pagina del carrello
• Calcoli: per nascondere le spese di spedizione in cassa fino all'inserimento di un indirizzo
• Destinazione di spedizione: per impostare gli indirizzi di spedizione predefiniti in fase di checkout

Fare clic su Salva modifiche .

Passaggio 4: gestisci gli account e la privacy al momento del pagamento

Rimanendo in WooCommerce > Impostazioni , vai alla scheda Account e privacy .

Nella parte superiore della pagina, vedrai due campi:

• Check-out degli ospiti: includi/rimuovi i check-out degli ospiti e gli accessi all'account esistenti
• Creazione account: consente ai clienti di creare un account o avviare un abbonamento durante il checkout

Continua nella pagina Account e Privacy per trovare l'area Privacy Policy .

Compila la casella di testo Informativa sulla privacy di pagamento per assicurarti che i clienti vedano la politica al momento del pagamento. Lascia vuoto il campo se preferisci non visualizzare una politica sulla privacy in quell'area.

Passaggio 5: scegli la pagina di pagamento effettiva e altre impostazioni avanzate

Passa alla scheda Avanzate per visualizzare una sezione Imposta pagina ; questo richiede ai commercianti di dire a WooCommerce dove inviare i clienti mentre effettuano il check-out.

Per impostazione predefinita, WooCommerce genera le pagine Carrello , Checkout , Il mio account e Termini e condizioni , che puoi trovare andando su Pagine > Tutte le pagine su WordPress.

Tuttavia, hai la possibilità di generare una pagina completamente nuova e collegarla qui. Ciò sovrascrive le pagine di pagamento predefinite e invia i clienti a quelle personalizzate.

Un'altra opzione nella scheda Avanzate è Force Secure Checkout , che richiede un certificato SSL.

Passaggio 6: modifica il design del checkout del tuo tema nel Personalizzatore di WordPress

I temi WordPress con funzionalità WooCommerce spesso installano strumenti di personalizzazione di WordPress per regolare facilmente lo stile del tuo checkout.

Tieni presente che tutti i temi WooCommerce offrono impostazioni di personalizzazione di WordPress uniche (alcuni non hanno alcuna impostazione), ma nel complesso vale la pena controllare il Personalizzatore di WordPress per un rapido controllo sul checkout.

Per iniziare, vai su Aspetto > Personalizza su WordPress.

Se disponibile, il tuo tema dovrebbe visualizzare un pulsante WooCommerce da qualche parte nel Personalizzatore di WordPress. Fare clic su quello.

Questo è solo un esempio con il tema Storefront (quindi potresti non vedere la stessa cosa), ma è piuttosto comune che i temi abbiano una scheda Checkout nel Customizer. Scegli quello, o qualcosa di simile, che potrebbe indicare il controllo sul checkout.

Esamina tutte le impostazioni di pagamento offerte dal tuo tema. Nel tema Storefront, puoi rendere questi campi opzionali, obbligatori o nascosti:

• Campo del nome dell'azienda
• Indirizzo riga 2 campo
• Campo telefonico

È anche possibile evidenziare i campi obbligatori con un asterisco.

Infine, il tema Storefront offre opzioni per mostrare una pagina sulla politica sulla privacy e sui termini e condizioni alla fine del checkout.

Metodo 2: usa un generatore di pagine per modificare i campi di pagamento di WooCommerce e lo stile generale

I page builder come Elementor, Beaver Builder e Themify offrono tutti widget di contenuto WooCommerce per sovrascrivere ciò che è attualmente nella pagina di pagamento di WooCommerce.

I costruttori di pagine riservano quasi esclusivamente i loro moduli di pagamento WooCommerce per i loro piani Premium, quindi ci sono buone probabilità che tu debba pagare per questa funzionalità. Ad esempio, ricevi il widget Elementor Checkout con il piano Pro.

Detto questo, un page builder ti dà il controllo quasi completo sulla tua pagina di pagamento, quindi è un modo semplice per modificare il checkout di WooCommerce senza conoscenze di codifica e solo per circa $ 50 a $ 100 all'anno.

In questo tutorial, ti mostreremo come funziona generalmente la personalizzazione del checkout con un generatore di pagine, utilizzando Elementor.

Passaggio 1: apri la pagina di pagamento designata in Elementor

Per modificare il checkout di WooCommerce in Elementor, devi andare alla pagina di pagamento creata automaticamente da WooCommerce. Trovalo in Pagine> Tutte le pagine .

Apri la pagina denominata "Pagina di pagamento", quindi fai clic su Modifica con Elementor .

Passaggio 2: rimuovi lo shortcode per il checkout di WooCommerce

WooCommerce ha aggiunto automaticamente il suo "WooCommerce checkout" nell'editor, che rende il modulo di pagamento WooCommerce predefinito.

L'obiettivo è scambiarlo con un modulo di pagamento dal tuo generatore di pagine. Quindi, elimina lo shortcode per il checkout di WooCommerce.

Passaggio 3: rilascia il widget Elementor Checkout

Ora è il momento di trovare il widget di checkout del tuo generatore di pagine. Elementor ne offre uno chiamato Checkout , che puoi trovare utilizzando la barra di ricerca o navigando sotto la voce WooCommerce. Fai clic e trascina il widget Checkout sulla pagina vuota, dove dice "Trascina il widget qui".

Nota: potresti non visualizzare il widget Checkout se non hai eseguito l'aggiornamento alla versione Premium di Elementor. Questo è il caso della maggior parte dei costruttori di pagine.

Passaggio 4: personalizza il contenuto, lo stile e le funzionalità avanzate

Dopo aver trascinato il widget di pagamento, Elementor esegue il rendering dell'anteprima di pagamento. Puoi quindi fare clic su queste schede a sinistra per personalizzare ogni aspetto del checkout:

Ad esempio, puoi cambiare il layout generale in una colonna e regolare il testo segnaposto per il campo del nome.

Altre schede di personalizzazione includono:

• Dettagli di fatturazione
• Informazioni aggiuntive
• Il tuo ordine
• Buono
• Pagamento

Ci sono anche infiniti modi per modificare il checkout di WooCommerce nella scheda Stile .

Usa queste schede:

• Sezioni
• Tipografia
• Le forme
• Riepilogo ordine
• Pulsante di acquisto

Ad esempio, abbiamo sostituito il pulsante blu Acquista con uno verde.

Infine, la scheda Avanzate offre strumenti ancora più potenti per modificare:

• Layout
• Effetti di movimento
• Trasformazioni
• Sfondi
• frontiere
• Maschere
• Reattività
• Attributi
• CSS personalizzato

Finché rimani con la pagina precedentemente impostata come "Pagina di pagamento" per WooCommerce e sostituisci lo shortcode di verifica di WooCommerce con il widget di verifica del generatore di pagine, puoi salvare le modifiche e completare il processo!

Metodo 3: installa un plug-in di personalizzazione per modificare i campi

Esistono molti plugin di personalizzazione del checkout di WooCommerce, come ad esempio:

La maggior parte dei plug-in per il checkout di WooCommerce fornisce strumenti di personalizzazione aggiuntivi per modificare e aggiungere campi, ma ce ne sono alcuni per rinnovare completamente il design, come il plug-in Multi-step Checkout.

Ti suggeriamo di esaminare tutti i plug-in consigliati sopra, ma seguiremo un breve tutorial con il plug-in Checkout Field Editor per aiutarti a capire come modificare il checkout di WooCommerce con un plug-in.

Passaggio 1: installa e attiva il plug-in Checkout Field Editor

Installa il plug-in Checkout Field Editor, quindi segui il processo di attivazione del plug-in.

Una volta attivo, il plugin aggiunge una nuova scheda su WordPress, a cui puoi accedere andando su WooCommerce > Modulo di pagamento.

Passaggio 2: modifica i campi correnti

Il plug-in mostra tutti i campi correnti all'interno del tuo checkout WooCommerce, tranne che il plug-in ora si collega al checkout WooCommerce predefinito, quindi hai il pieno controllo sui campi.

Puoi modificare:

• Campi di fatturazione
• Campi di spedizione
• Campi aggiuntivi

Per modificare i campi di pagamento di WooCommerce, fai clic su Modifica accanto al campo che desideri modificare. Per questo esempio, modificheremo il campo Nome azienda .

Nella finestra Modifica campo , puoi modificare le opzioni per il campo, come:

• Etichetta
• Segnaposto
• Valore di default
• Classe
• Convalida

È anche possibile deselezionare la casella Richiesto , in modo che i clienti non siano obbligati a compilare il campo. Puoi anche disabilitare il campo in modo che non venga visualizzato nel checkout. Assicurati di fare clic su Salva e chiudi .

Il plug-in di solito salva tutto dopo, ma puoi fare nuovamente clic sul pulsante Salva modifiche per assicurarti che funzioni.

Come puoi vedere, abbiamo rimosso il campo Nome azienda dall'area di pagamento.

Ed è sparito dal checkout front-end.

Potresti anche voler modificare qualcosa come il testo del segnaposto . In tal caso, è lo stesso processo di apertura del campo in questione e di modifica delle impostazioni.

Il campo Nome del nostro checkout ora rivela un nuovo testo segnaposto.

Passaggio 3: aggiungi un nuovo campo al checkout di WooCommerce

Per aggiungere un campo completamente nuovo, fai clic sul pulsante Aggiungi campo .

Scegli il Tipo di campo, scegliendo tra opzioni come:

• Testo
• Numero
• Nascosto
• Parola d'ordine
• Telefono
• Casella di controllo
• Mese
• URL
• e tanti altri

Ad esempio, creeremo un campo Numero e chiederemo ai clienti di digitare il loro Numero Premio Fedeltà. Puoi anche designare elementi come segnaposto, valori predefiniti e se si tratta di un campo obbligatorio.

Assicurati di selezionare la casella Abilitato , quindi fai clic su Salva e chiudi .

Passaggio 4: visualizza i risultati

Sul back-end, vedrai il nuovo campo di pagamento in fondo all'elenco. È posizionato alla fine per impostazione predefinita, ma puoi fare clic e trascinare per riordinare.

E il nuovo campo appare anche nel modulo di checkout frontend.

Crea la pagina di pagamento perfetta oggi

Ti consigliamo di iniziare con le impostazioni di pagamento predefinite di WooCommerce per vedere se aiutano a ottenere i risultati desiderati. Per modifiche più avanzate, considera l'utilizzo di campi personalizzati. E per personalizzazioni avanzate, ma relativamente facili da implementare, utilizza uno dei page builder suggeriti.

Quali sono le tue principali domande su come modificare il checkout di WooCommerce? Condividi i tuoi pensieri nei commenti!