Come aggiungere campi aggiuntivi alla pagina di pagamento di WooCommerce

Se svolgi attività online, conosci già l'importanza di una pagina di pagamento. A volte potresti dover personalizzare il tuo sito e-commerce a causa di requisiti specifici.

In questo tutorial, ti mostreremo come personalizzare la pagina di pagamento di WooCommerce e aggiungervi campi aggiuntivi. Discuteremo due modi per portare a termine il tuo lavoro:

1. Aggiungi campi aggiuntivi alla pagina di pagamento di WooCommerce utilizzando il codice (per utenti tecnici)
2. Aggiungi campi aggiuntivi alla pagina di pagamento di WooCommerce utilizzando un plugin WordPress (per utenti non tecnici).

Prima di passare al tutorial, scopriamo cos'è una pagina di pagamento.

Cos'è una pagina di pagamento WooCommerce?

Una pagina di pagamento è un termine eCommerce che si riferisce a una pagina mostrata a un cliente durante la procedura di pagamento passo dopo passo. Generalmente, è la pagina più importante sia per i venditori che per i clienti.

I clienti devono fornire informazioni cruciali come indirizzo, dettagli di fatturazione e metodo di pagamento in questa pagina. E se in qualche modo questa pagina dovesse produrre un errore, nessun cliente potrà effettuare alcun acquisto! Quindi possiamo immaginare quanto sia importante questa pagina per i venditori.

Quando utilizzi WordPress per potenziare il tuo sito web e WooCommerce come soluzione di eCommerce, otterrai la tua pagina di pagamento. Tuttavia, essendo una soluzione gratuita, WooCommerce non ti dà la possibilità di personalizzare la pagina di pagamento di WooCommerce dalle impostazioni.

Quindi, come personalizzeresti la pagina di pagamento di WooCommerce, se necessario? Bene, ora ti mostreremo i trucchi per personalizzare la pagina di pagamento di WooCommerce.

Come aggiungere un campo aggiuntivo alla pagina di pagamento di WooCommerce?

Aggiungere campi personalizzati a una pagina di pagamento WooCommerce a volte può essere un compito impegnativo. Questo tutorial ti guiderà attraverso il processo. Dopo aver letto questo blog, saprai come aggiungere un campo personalizzato alla pagina di pagamento di WooCommerce. Immergiamoci subito nel merito:

Immaginiamo che questa sia la tua pagina di pagamento predefinita.

Esistono due approcci completamente diversi che ti aiuteranno ad aggiungere campi personalizzati alla pagina di pagamento in WooCommerce. Quelli sono-

• utilizzando la codifica personalizzata (per programmatori)
• utilizzando un plugin WordPress (per non programmatori)

1. Aggiungi campi aggiuntivi alla pagina di pagamento di WooCommerce tramite codifica

Le persone che sanno programmare o che hanno conoscenze di programmazione di base possono seguire questo approccio. Questo metodo aggiunge il campo personalizzato alla pagina di pagamento utilizzando il codice indicato di seguito. Per iniziare con il codice della pagina di pagamento di WooCommerce, segui i passaggi seguenti:

Innanzitutto, devi eseguire un'azione sul nostro file Functions.php . Copia l'intero codice nel file function.php del tuo tema.

 /** * Add custom field to the checkout page */ add_action('woocommerce_after_order_notes', 'custom_checkout_field'); function custom_checkout_field($checkout) { echo '<div><h2>' . __('New Heading') . '</h2>'; woocommerce_form_field('custom_field_name', array( 'type' => 'text', 'class' => array( 'my-field-class form-row-wide' ) , 'label' => __('Custom Additional Field') , 'placeholder' => __('New Custom Field') , ) , $checkout->get_value('custom_field_name')); echo '</div>'; }

Dopo aver aggiunto questo codice, la pagina di pagamento dovrebbe apparire come:

Per la convalida dei dati del campo personalizzato, è possibile utilizzare il codice riportato di seguito:

 /** * Checkout Process */ add_action('woocommerce_checkout_process', 'customised_checkout_field_process'); function customised_checkout_field_process() { // Show an error message if the field is not set. if (!$_POST['customised_field_name']) wc_add_notice(__('Please enter value!') , 'error'); }

Quindi abbiamo aggiunto un campo sostitutivo alla pagina di pagamento insieme al controllo di convalida! Grande!
Confermiamo che i dettagli inseriti nel campo personalizzato dal cliente vengano salvati o meno.

Questo può essere fatto utilizzando il codice seguente:

 /** * Update the value given in custom field */ add_action('woocommerce_checkout_update_order_meta', 'custom_checkout_field_update_order_meta'); function custom_checkout_field_update_order_meta($order_id) { if (!empty($_POST['customised_field_name'])) { update_post_meta($order_id, 'Some Field',sanitize_text_field($_POST['customised_field_name'])); } }

Aggiungi un campo personalizzato alla pagina di pagamento di WooCommerce utilizzando un plugin

Con le righe di codice sopra, abbiamo aggiunto campi personalizzati al nostro negozio web WooCommerce!

Se non sei un programmatore, puoi anche utilizzare un plug-in per aggiungere un nuovo campo alla pagina di pagamento. Esistono molti plugin che possono essere utilizzati per questo scopo. Alcuni sono i seguenti-

• Gestore cassa WooCommerce
• Editor del campo di pagamento
• Editor e gestore del campo di checkout per WooCommerce

Utilizzando questi plugin chiunque non abbia alcuna conoscenza di programmazione può aggiungere campi personalizzati extra alla pagina di pagamento di WooCommerce. Vediamo come aggiungere un campo con Checkout Field Editor e Manager per WooCommerce .

Basta installare e attivare il plugin. Troverai un nuovo menu sotto WooCommerce che è "Campi di pagamento". Passa a WP Admin Dashboard > WooCommerce > Campi di pagamento .

Sul lato sinistro, sotto l'opzione Campi , puoi trovare 6 diversi tipi di campi. A seconda del tipo di campo che desideri aggiungere, sceglilo di conseguenza. Vogliamo aggiungere un campo per il numero di telefono, quindi scegliamo Text . Trascineremo semplicemente il pulsante Testo sotto i campi del nome.

Durante l'aggiunta di nuovi campi, ho notato come abbiamo reso il campo obbligatorio . Puoi scegliere di non farlo se non hai bisogno che il campo sia obbligatorio.

Allo stesso modo, puoi aggiungere qualsiasi tipo di campo che questo plugin ha da offrire.

Troverai il nuovo campo aggiunto alla tua pagina di pagamento. Facile, vero?

Aggiungi campi a WooCommerce Checkout – Nota finale

D'ora in poi, saprai come aggiungere un ulteriore campo di pagamento WooCommerce e non sarà affatto difficile.

Ora, qualunque sia il motivo: una richiesta obbligatoria del cliente o le tue esigenze, sei pronto per personalizzare la pagina di pagamento di WooCommerce!

Se avete domande, non esitate a commentare. Promettiamo che ti ricontatteremo.