Come aggiungere campi condizionali al checkout di WooCommerce

Vuoi creare una logica condizionale per il tuo negozio? Sei nel posto giusto. In questa guida imparerai come aggiungere campi condizionali alla cassa di WooCommerce .

Il checkout è una delle pagine più cruciali per qualsiasi negozio di eCommerce. Ci sono milioni di siti là fuori che competono per gli stessi utenti. Quindi, per essere un passo avanti rispetto ai tuoi concorrenti, dovresti personalizzare e ottimizzare il più possibile il tuo checkout. Una delle opzioni più interessanti per farlo è aggiungere campi condizionali al tuo pagamento WooCommerce .

Questi campi consentono di creare una logica condizionale e visualizzare solo i campi che i clienti devono compilare nella pagina di checkout per velocizzare il processo di acquisto. Quindi, cerchiamo di capire meglio cosa sono i campi condizionali e come possono aiutarti a portare il tuo negozio al livello successivo.

Cosa sono i campi condizionali?

I campi condizionali sono campi che hanno una logica condizionale in modo che, quando la condizione viene soddisfatta, un altro campo venga visualizzato o nascosto. Per creare la logica condizionale, è necessario almeno un campo padre e uno o più campi figlio che dipendono dai valori assunti dal campo padre . Ad esempio, se offri ai tuoi clienti la possibilità di pagare con PayPal o carta di credito, potresti voler visualizzare i campi dei dettagli della carta di credito solo se gli utenti selezionano l'opzione Carta di credito . Se vogliono pagare con PayPal, quei campi non verranno visualizzati. In questo modo, migliori l'esperienza utente sul tuo sito e aumenti i tuoi tassi di conversione.

Cos'è la logica condizionale?

Devi avere un'idea chiara di cosa sia la logica condizionale prima di iniziare, quindi scaviamo un po' più a fondo. Quando crei la logica condizionale, vuoi che il campo condizionale faccia X se la condizione è soddisfatta o true, ma faccia Y se la condizione è false o non soddisfatta .

Seguendo il nostro esempio di carta di credito, desideriamo che i campi dei dettagli della carta di credito vengano visualizzati solo se il cliente seleziona l'opzione di pagamento con carta di credito. Questo esempio è piuttosto semplice, ma la logica condizionale può raggiungere un livello di complessità più elevato quando si lavora con diversi tipi di campo e/o si aggiungono più condizioni e azioni.

Nella pagina di pagamento di WooCommerce, puoi impostare una condizione per un singolo campo. Il valore che il cliente immette in quel campo verrà confrontato con le impostazioni e, se la condizione è soddisfatta, l'azione sarebbe quella di visualizzare il campo.

Per creare la logica condizionale nella pagina di pagamento, devi utilizzare almeno due campi. Un genitore e suo figlio. Il campo in cui vengono controllati i valori è chiamato campo padre . E quello in cui crei la logica condizionale per farlo apparire o meno solo se la condizione è vera è il campo figlio . Come vedremo in questa guida, a un campo padre possono essere applicati più campi figlio e più condizionali.

Come aggiungere campi condizionali al checkout di WooCommerce

In questa sezione, vedremo come utilizzare e aggiungere logica condizionale e campi condizionali al checkout in WooCommerce. La creazione di logica condizionale utile a livello di codice richiede molta codifica, quindi ti consigliamo di utilizzare un plug-in. Per questa dimostrazione, utilizzeremo Checkout Manager.

Questo plugin ti consente di aggiungere, personalizzare ed eliminare diversi tipi di campi nella pagina di pagamento. Inoltre, puoi applicare convalide condizionali illimitate utilizzando più campi personalizzati nella pagina di pagamento di WooCommerce. Con oltre 80.000 download attivi , è uno dei migliori plugin di checkout in circolazione. Ha una versione gratuita con funzionalità di base che puoi scaricare da qui e tre piani premium che partono da 19 USD.

Abbiamo diviso il post in diverse sezioni in modo da poter passare direttamente alla sezione che ti interessa. Senza ulteriori indugi, vediamo come aggiungere campi condizionali alla pagina di pagamento in WooCommerce .

1. Come creare una logica condizionale
2. Logica condizionale con più campi personalizzati figlio
3. Come utilizzare più campi personalizzati e condizionali concatenati
4. Cosa non puoi fare quando usi la logica condizionale

1. Come creare una logica condizionale

Quindi, ora che hai un'idea chiara di cosa sia la logica condizionale e come funziona, vediamo come creare un campo di logica condizionale utilizzando il plug-in WooCommerce Checkout Manager. Creiamo una condizione per visualizzare un messaggio quando un utente digita " admin " come nome nel modulo di fatturazione. Per farlo, prima vai su WooCommerce > Checkout > Fatturazione nella dashboard di WordPress. Lì, premi il pulsante Aggiungi nuovo campo .

Si aprirà una finestra. Questo è l'editor di campo del nuovo campo. Lì, seleziona Messaggio come tipo e compila le opzioni come Etichetta, Tipo e Messaggio. Inoltre, seleziona il Nome come campo padre nella colonna di destra. Infine, scrivi " admin " sotto il nome e premi Salva .

Come puoi vedere, stiamo impostando il campo Nome come campo padre. Ora è il momento di testarlo. Quindi, vai alla tua pagina di pagamento sul frontend e digita " admin " nel campo del nome. Dovresti vedere un messaggio di avviso come questo.

Questo è un semplice esempio, ma i condizionali possono includere molti campi e le cose possono diventare molto complesse quando si utilizzano molti campi condizionali e personalizzati. Quindi, per gestirli facilmente, puoi vedere quale campo ha una condizione e il campo padre nella schermata del gestore campo del modulo di pagamento corrispondente ( Fatturazione, spedizione, aggiuntivo ).

Ecco come puoi aggiungere un campo condizionale al checkout in WooCommerce usando Checkout Manager. Ora, diamo un'occhiata a un esempio più complesso. E, naturalmente, la cosa migliore è che non ci sono limiti al numero di campi personalizzati che possono applicare condizioni uguali o diverse allo stesso campo padre.

2. Logica condizionale con più campi figlio personalizzati

Supponiamo ora che tu voglia offrire ai tuoi acquirenti la possibilità di ricevere i prodotti che hanno acquistato in uno dei tuoi centri di distribuzione o di scegliere una consegna standard in una località specifica. Per questo, puoi utilizzare un campo del tipo di radio in modo che i clienti possano scegliere una delle due opzioni.

Crea un nuovo campo padre

Quindi, per prima cosa, vai su WooCommerce> Checkout e crea un campo del tipo di radio. Per questo esempio, chiameremo questo campo "Consegna". Quindi entra nelle Opzioni. Li chiameremo Takeaway e Delivery. Qui puoi anche selezionare un prezzo per ciascuna opzione e impostarne uno come predefinito. Poiché vogliamo mostrare campi diversi ai clienti a seconda della casella di controllo che selezionano, utilizzeremo alcuni dei campi di pagamento predefiniti di WooCommerce per l'opzione di consegna . In questo modo, gli acquirenti possono compilare i propri dati per ricevere i prodotti a un indirizzo di loro scelta. Quindi, modifica i campi WooCommerce predefiniti: stato, città, codice postale e indirizzo. Quindi, crea la stessa logica condizionale per ciascuno di essi. Inoltre, creeremo un condizionale e selezioneremo il tipo di campo radio Consegna come campo padre e visualizzeremo il campo Stato se gli utenti selezionano l'opzione Consegna. Naturalmente, puoi fare lo stesso per tutti questi campi o alcuni di essi. In questo esempio creeremo un condizionale i seguenti campi:

• billing_state
• billing_city
• billing_postcode
• Indirizzo di fatturazione 1

Crea campo figlio personalizzato

Quindi, devi creare un nuovo campo personalizzato che apparirà quando il cliente seleziona l'opzione Takeaway in modo da poter inviare il prodotto a uno dei centri di distribuzione. Ancora una volta, vai alle impostazioni del plug-in e crea un tipo di campo Seleziona . Attiva la casella di controllo condizionale, seleziona Consegna come padre e chiamala Take away in Consegna . Successivamente, è necessario creare gli indirizzi per i centri di distribuzione. Quindi, vai alla sezione Opzioni e aggiungi alcuni indirizzi. Infine, salva le modifiche. Ora è il momento di controllare il frontend. Vai alla pagina di pagamento e seleziona alcune delle opzioni che hai appena creato. Ad esempio, quando gli utenti selezionano l'opzione Takeaway, puoi scegliere uno dei centri di distribuzione. Se invece selezionano Consegna , devono inserire l'indirizzo dove vogliono ricevere i loro prodotti. NOTA : abbiamo aggiunto altri due campi per visualizzare il messaggio informativo, uno per ciascuna opzione, utilizzando le stesse condizioni che abbiamo utilizzato negli altri campi. Ora sai come aggiungere campi condizionali al checkout di WooCommerce utilizzando una logica più complessa. Tuttavia, puoi spingerti un po' oltre e creare una logica ancora più complessa. Vediamo come creare condizionali concatenati .

3. Come utilizzare più campi personalizzati e condizionali concatenati

Quando lavori con molti condizionali correlati, le cose possono diventare piuttosto complesse. I condizionali concatenati ne sono un ottimo esempio. È quando c'è un condizionale applicato a un campo che ha un altro condizionale su un campo diverso. Per capirlo meglio, puoi pensare a un condizionale con un sottocondizionale, che ha un altro sottocondizionale, e così via. Il livello gerarchico dei condizionali e il numero di campi personalizzati che puoi utilizzare sono illimitati, quindi puoi creare una logica molto complessa con molte dipendenze.

Creazione di un condizionale concatenato

Quindi, creiamo un esempio più complesso usando condizionali concatenati. Supponiamo che tu voglia offrire ai tuoi clienti la possibilità di aggiungere un pacchetto extra al loro ordine. Le opzioni saranno Cartone, Regalo e Polistirolo. Innanzitutto, aggiungi un tipo di campo casella di controllo in modo che il cliente possa richiedere il pacchetto Extra. Nella scheda Prezzo dell'editor di campo, inserisci il prezzo che desideri aggiungere all'ordine corrente quando il cliente seleziona la casella di controllo Pacchetto extra. Quindi, devi lavorare sulle opzioni di imballaggio che offrirai ai tuoi clienti. Consentiremo agli acquirenti di selezionare più di un'opzione, quindi creeremo un tipo di campo Selezione multipla. Aggiungi un'etichetta e seleziona Pacchetto extra come campo padre in modo che la tua logica condizionale assomigli a questa: Quindi, vai alla scheda Opzioni e crea le opzioni per i tuoi clienti. In questa schermata è possibile impostare un prezzo diverso per ciascuna alternativa. Poiché abbiamo già impostato il prezzo quando abbiamo creato il campo della casella di controllo, non utilizzeremo questa opzione qui. Una volta terminato, è il momento di controllare il frontend. Se tutto funziona correttamente, dovresti essere in grado di selezionare più opzioni quando selezioni il campo Imballaggio extra : Abbiamo usato un singolo condizionale qui per visualizzare un campo a selezione multipla. Ora creiamo un condizionale concatenato con ciascuna delle opzioni/valori del campo padre.

Aggiungi più opzioni

Quindi, scegliamo l'opzione Confezione regalo e applichiamo alcune condizionali. Creiamo un campo radio personalizzato e compiliamo l'editor come segue. Offriremo diverse stampe su carta per confezioni regalo, quindi utilizzeremo questo campo per consentire ai clienti di sceglierne una. Per fare ciò, vai alla sezione Opzioni e imposta le stampe su carta per il campo radio. Abbiamo configurato le opzioni in questo modo: E sul frontend, vedrai qualcosa del genere: Poiché stiamo visualizzando le confezioni regalo, è meglio mostrare le immagini anziché il testo. Per visualizzare le immagini in ciascuna opzione, abbiamo utilizzato alcune immagini che avevamo precedentemente caricato nella libreria. Puoi inserire immagini per l'etichetta di ciascuna opzione con il codice seguente: <img class=”paper-style” src=”#path of your image url”> Finora hai creato una logica condizionale concatenata che include due livelli e due condizioni che dipendono l'una dall'altra. Imballaggio extra ->(condizione 1)-> Tipo di imballaggio ->(condizione 2)-> Confezione regalo

Aggiunta di un altro livello condizionale

Andiamo un po' oltre e aggiungiamo un nuovo livello di condizionale. Nell'ultimo screenshot, vedrai che c'è un nuovo campo chiamato Gift Card per dare agli utenti la possibilità di aggiungere una carta regalo dedicata al pacchetto. Per questo, addebiteremo ulteriori $ 4. Inoltre, utilizzeremo un condizionale per visualizzare un nuovo campo personalizzato e consentire agli utenti di inserire il testo che desiderano stampare sulla carta regalo. Quindi, creiamo un nuovo campo casella di controllo e lo impostiamo come segue: Puoi vedere come ci riferiamo allo stesso campo padre e utilizzando la stessa condizione che abbiamo utilizzato per la confezione regalo nel passaggio precedente. Quindi, aggiungi un'area di testo in modo che gli utenti possano digitare il testo che vogliono vedere nella carta regalo e configurarlo in questo modo: Questa è l'ultima condizione. Ha il campo personalizzato Carta regalo come campo padre e il Testo della carta regalo come campo figlio. Quindi ora, quando gli acquirenti selezionano l'opzione Carta regalo, vedranno questo: Ed è così che crei una logica complessa e aggiungi diversi campi condizionali alla pagina di pagamento in WooCommerce. Abbiamo concatenato tre condizionali e diversi campi personalizzati in questo ordine: Confezione extra ->(condizione 1)-> Tipo di confezione ->(condizione 2)-> Confezione regalo ->(condizione 3)->Carta regalo

4. Cosa non puoi fare quando usi la logica condizionale

Usa campi di moduli diversi

In WooCommerce, i campi condizionali devono fare riferimento a un campo padre situato nello stesso modulo. Ci sono tre moduli nella pagina di pagamento: Fatturazione, Spedizione e Moduli aggiuntivi. Ciascuno di essi funziona come un modulo separato e non può avere condizionali che dipendono dai campi di un altro modulo.

Condizionale su campi senza valore (pulsante, intestazione, messaggi)

Non puoi utilizzare pulsanti, messaggi e tipi di campi di intestazione come campi principali perché non hanno alcun valore per verificare se la condizione è soddisfatta.

Modifica gli ID o i nomi dei campi

Per garantire una corretta integrazione con WooCommerce, non puoi modificare i nomi e gli ID dei campi. Questo vale sia per i campi WooCommerce predefiniti che per tutti i campi personalizzati che aggiungi.

Attiva un'azione diversa dalla visualizzazione/nascondere un campo

In WooCommerce, i campi condizionali possono eseguire una singola azione: visualizzare il campo specificato quando la condizione è vera. Ciò significa che, sfortunatamente, non puoi aggiungere uno sconto, un prodotto, modificare l'ordine o eseguire qualsiasi altra azione quando la condizione è soddisfatta.

Applicare condizionali ai valori dei campi al di fuori del checkout

Infine, i condizionali possono controllare solo i valori di un altro campo di checkout sullo stesso modulo. Pertanto, non puoi controllare le condizioni che controllano la quantità del prodotto, il prezzo totale, il ruolo dell'utente o qualsiasi altra cosa che non sia un valore del campo di pagamento.

Conclusione

Tutto sommato, la logica condizionale può aiutarti a migliorare l'esperienza utente e aumentare i tassi di conversione sul tuo sito. Ecco perché l'aggiunta di campi condizionali alla cassa di WooCommerce è un ottimo modo per portare il tuo negozio al livello successivo.

In questa guida, hai imparato come creare e impostare campi aggiuntivi utilizzando il plug-in WooCommerce Checkout Manager. Abbiamo aggiunto campi personalizzati e creato sia una logica condizionale semplice che esempi più complessi con condizionali concatenati. Infine, abbiamo dato un'occhiata ai limiti della logica condizionale in WooCommerce.

Qui, abbiamo visto alcuni esempi, ma questa è solo la punta dell'iceberg. Ci sono molte cose che puoi fare con i campi condizionali per migliorare il tuo checkout. Quindi, ti consigliamo di creare campi personalizzati e giocare con il condizionale.

Per ulteriori informazioni su come sfruttare al meglio il tuo checkout, puoi consultare la nostra guida per ottimizzare il checkout WooCommerce e il nostro tutorial per disabilitare la convalida del codice postale. Facci sapere se hai domande o dubbi per aggiungere campi condizionali alla cassa. Saremo felici di aiutarti!