Come disabilitare la convalida del codice postale di WooCommerce

Pubblicato: 2020-09-12

Vuoi rimuovere il campo del codice postale? In questo tutorial, ti mostreremo come disabilitare la convalida del codice postale di WooCommerce per migliorare la tua pagina di pagamento e aumentare i tassi di conversione.

Perché rimuovere la convalida del codice postale di WooCommerce?

Per impostazione predefinita, i campi del codice postale sono obbligatori in WooCommerce, quindi includono la convalida. Tuttavia, a volte quei campi non sono necessari e aggiungono attrito alla pagina di pagamento. Ad esempio, ci sono molti paesi in Africa, America Centrale e Oceania che non hanno o non utilizzano codici postali. Inoltre, se gli utenti digitano il testo nel campo del codice postale, WooCommerce mostrerà un messaggio di errore e non consentirà agli acquirenti di completare il checkout.

Avere una pagina di pagamento ottimizzata e snella è la chiave per qualsiasi negozio online. Dovresti rimuovere qualsiasi distrazione per fornire un'esperienza di acquisto migliore e più rapida ai tuoi clienti. Di conseguenza, la presenza di campi e messaggi di errore non necessari può influire sull'esperienza di acquisto e sui tassi di conversione degli utenti. Quindi, in questa guida, ti mostreremo come disabilitare la convalida del codice postale di WooCommerce nella pagina di pagamento . disabilita la convalida del codice postale woocommerce - Predefinito

Come disabilitare la convalida del codice postale di WooCommerce in modo programmatico

Poiché modificheremo il file functions.php del tuo tema, prima di iniziare, ti consigliamo di creare un tema figlio. Puoi consultare la nostra guida per crearne uno o utilizzare uno di questi plugin. Quindi, per rimuovere la convalida del codice postale in WooCommerce, prima vai su una pagina del prodotto e aggiungi un prodotto al carrello facendo clic sul pulsante Aggiungi al carrello. Ora, diamo un'occhiata a come puoi fare quanto segue:

  1. Rimuovi il CAP/Codice postale dalla pagina di pagamento di WooCommerce
  2. Rendi facoltativo il campo CAP/Codice postale
  3. Rimuovere i campi di fatturazione dal checkout
  4. Modifica le etichette dei campi della pagina di pagamento

1) Rimuovi CAP/Codice postale dalla pagina di pagamento di WooCommerce

Un'opzione per disabilitare la convalida del codice postale è rimuovere completamente il campo del codice postale dalla pagina di pagamento di WooCommerce. Il modo più semplice per farlo è utilizzare alcuni degli hook di WooCommerce. Quindi, per rimuovere il campo zip dalla pagina di pagamento, copia e incolla semplicemente il seguente script alla fine del file functions.php del tuo tema figlio:

 // Disabilita il campo CAP/codice postale
add_filter( 'woocommerce_checkout_fields' , 'QuadLayers_remove_billing_postcode_checkout' );
funzione QuadLayers_remove_billing_postcode_checkout($campi) {
unset($fields['billing']['billing_postcode']);
restituisci $campi;
}

L'hook woocommerce_checkout_fields è uno degli hook principali di WooCommerce che puoi utilizzare per personalizzare la pagina di pagamento. Con la funzione incorporata in PHP unset() svuoti il ​​campo e lo rispedisci a WooCommerce con return ; nella riga seguente. rimuovi il campo di convalida del codice postale/codice postale woocommerce

2) Rendi facoltativo il campo CAP/Codice postale

Un'altra alternativa per disabilitare la convalida del codice postale nella pagina di pagamento di WooCommerce è rendere l'opzione del campo anziché obbligatoria. Per farlo, incolla il seguente script alla fine del file functions.php :

 // Rendi facoltativo il campo CAP/CAP
add_filter( 'woocommerce_default_address_fields' , 'QuadLayers_optional_postcode_checkout' );
funzione QuadLayers_optional_postcode_checkout($p_fields) {
$p_fields['postcode']['required'] = false;
restituisce $p_campi;
}

Qui stiamo usando un hook diverso ( 'woocommerce_default_address_fields') . In questo caso, puoi utilizzare questo hook per modificare un campo di fatturazione nella pagina di pagamento. L'impostazione del campo del codice postale su false lo renderà facoltativo e rimuoverà la convalida.

3) Rimuovere i campi di fatturazione dal checkout

Il campo Zip viene visualizzato nel modulo di fatturazione, quindi un altro modo per disabilitare la convalida è personalizzare la sezione di fatturazione e rimuovere alcuni campi dalla pagina di pagamento . Allo stesso modo, hai disabilitato il campo CAP al punto 1, puoi fare lo stesso con qualsiasi altro campo. Puoi identificare il campo del codice postale nel codice con questi indici: $fields['billing']['billing_postcode']) .

Allo stesso modo, puoi nascondere tutti gli altri campi che desideri. Hai solo bisogno di conoscere gli indici giusti per quel campo specifico. Questi sono alcuni identificatori dei campi che di solito puoi rimuovere per ottimizzare l'esperienza di acquisto dei clienti:

 unset($fields['billing']['billing_company']);
unset($fields['billing']['billing_address_2']);
unset($fields['billing']['billing_city']);
unset($fields['billing']['billing_state']);
unset($fields['billing']['billing_phone']);

Ogni indice che identifica un campo ha un nome autoesplicativo. Inoltre, l'indice "fatturazione" indica che il campo si trova all'interno del modulo di fatturazione. Quindi, ad esempio, se vuoi rimuovere i campi azienda e indirizzo_2 , hai bisogno di questo codice:

 // Rimuovi i campi di fatturazione dell'azienda e dell'indirizzo_2 
add_filter( 'woocommerce_checkout_fields' , 'QuadLayers_remove_billing_fields' ); 
funzione QuadLayers_remove_billing_fields($campi) { 
unset($fields['billing']['billing_company']); 
unset($fields['billing']['billing_address_2']); 
restituisci $campi; 
}

Come puoi vedere, puoi utilizzare più di un indice contemporaneamente. Per rimuovere più campi, è sufficiente aggiungerli alla funzione sopra utilizzando l'indice corrispondente. Rimuovi i campi di checkout di woocommerce

4) Modifica le etichette dei campi della pagina di pagamento di WooCommerce

Ora, supponiamo che tu abbia deciso di rendere facoltativo il campo CAP/Codice postale ma desideri modificare l'etichetta di quel campo (CAP/Codice postale) per renderlo più chiaro per i tuoi utenti. Con il seguente script, puoi modificare l'etichetta "Zip/Codice postale" in qualsiasi modo desideri. Ad esempio, l'abbiamo modificato per Prefisso :

 /* WooCommerce: modifica le stringhe di fatturazione */
add_filter( 'gettext', 'QuadLayers_billing_field_strings', 20, 3 );

funzione QuadLayers_billing_field_strings($testo_tradotto, $testo, $dominio) {
interruttore ( $ testo_tradotto ) {
    caso 'Codice postale / CAP':
        $translated_text = __('Codice area','woocommerce');
        rottura;
    }
restituisce $testo_tradotto;
}

L'hook gettext è molto utile e di solito è usato nelle traduzioni. Anche se questa non è esattamente una traduzione, questo hook sarà comunque utile. Il codice sopra cambia l'etichetta WooCommerce predefinita (CAP/Codice postale) per la stringa del prefisso .

Dai un'occhiata allo script sopra e guarda dove si trovano queste stringhe nel codice. Se vuoi tradurre più stringhe, aggiungi le tue traduzioni all'interno dell'istruzione switch come segue:

 funzione QuadLayers_billing_field_strings($testo_tradotto, $testo, $dominio) {
interruttore ( $ testo_tradotto ) {
    caso 'Dettagli di fatturazione' :
        $translated_text = __( 'Informazioni sull'ordine', 'woocommerce');
        rottura;
    case 'Spedire a un indirizzo diverso?':
        $translated_text = __('Invia ad un'altra posizione per favore','woocommerce');
        rottura;
    caso 'Nome azienda':
        $translated_text = __('Azienda','woocommerce');
        rottura;
    caso 'Codice postale / CAP':
        $translated_text = __('Codice area','woocommerce');
        rottura;
    }
restituisce $testo_tradotto;
}

A questo punto, dovresti essere in grado di rimuovere e rendere opzionali alcuni dei campi di checkout e hai anche imparato a tradurre una stringa usando l'hook gettext . Nell'immagine seguente, abbiamo rimosso diversi campi, cambiato il nome del campo CAP/Codice postale per Prefisso e lo abbiamo reso facoltativo. Inoltre, abbiamo modificato l'intestazione per il modulo di fatturazione e Spedisci a un indirizzo diverso. disabilitare la convalida del codice postale WooCommerce - Finale

Rimuovi la convalida del codice postale di WooCommerce con i plugin

Se non hai competenze di programmazione o non ti senti a tuo agio nella modifica del file functions.php , abbiamo una soluzione per te. Puoi rimuovere la convalida del codice postale di WooCommerce con i plugin . Ci sono diversi strumenti là fuori, ma ti mostreremo come disabilitare i campi del codice postale con due plugin freemium:

  1. Responsabile della cassa per WooCommerce
  2. Pagamento diretto WooCommerce

1) Checkout Manager per WooCommerce

Checkout Manager è un plug-in eccellente per personalizzare il processo di pagamento e uno dei migliori editor sul campo in circolazione. Ti consente di aggiungere, modificare ed eliminare campi nella pagina di pagamento. In questo modo puoi personalizzare i campi che desideri visualizzare nelle sezioni Fatturazione, Spedizione e Campi aggiuntivi.

Per disabilitare la convalida del codice postale di WooCommerce, devi prima installare e attivare il plugin. Puoi scaricare Checkout Manager gratuitamente dal repository di WordPress o acquistare uno dei piani premium a partire da 19 USD (pagamento una tantum).

Una volta attivato Checkout Manager, è il momento di rimuovere i campi che non desideri. Quindi, nel tuo amministratore di WordPress vai su WooCommerce > Checkout > Fatturazione . Lì avrai la possibilità di disabilitare il codice postale e altri campi che non desideri visualizzare nella sezione di fatturazione. Quindi, puoi andare alla sezione di spedizione e ripetere il processo. In questo modo, non solo puoi rimuovere il campo zip ma anche personalizzare l'intera pagina di pagamento. Checkout Manager ha molte altre funzionalità che puoi utilizzare per migliorare il tuo checkout, come la creazione di campi condizionali o consentire agli utenti di caricare file durante il checkout.

Per ulteriori informazioni su come utilizzare questo plugin, puoi consultare la pagina della documentazione.

2) Pagamento diretto WooCommerce

Un altro plug-in che puoi utilizzare per rimuovere il campo del codice postale è Direct Checkout. Questo è uno dei migliori plugin di pagamento per WooCommerce e ti consente di rimuovere i campi non necessari per semplificare la pagina di pagamento. E la parte migliore è che ha una versione gratuita.

Prima di iniziare, puoi scaricare la versione gratuita o acquistare uno dei piani premium a partire da 20 USD (pagamento una tantum).

Successivamente, nel tuo amministratore di WordPress, vai su WooCommerce > Pagamento diretto > Pagamento . Lì, vai alla sezione Rimuovi campi checkout e seleziona il codice postale e tutti i campi che non vuoi visualizzare sul checkout. Inoltre, avrai altre opzioni per personalizzare la pagina di pagamento. Rimuovi il campo del codice postale con WooCommerce Direct Checkout

Direct Checkout è molto facile da usare, quindi non avrai problemi con esso.

Conclusione

Tutto sommato, alcuni campi nella pagina di pagamento non sono necessari e aggiungono attrito al processo di acquisto, quindi è meglio rimuoverli.

Abbiamo visto come disabilitare la convalida del codice postale di WooCommerce per migliorare l'esperienza degli utenti e aumentare i tassi di conversione. Inoltre, hai imparato a personalizzare il checkout rendendo facoltativo il campo zip, rimuovendo i campi di fatturazione dal checkout e modificando le etichette.

Per coloro che non hanno competenze di codifica, abbiamo anche visto come rimuovere il codice postale e altri campi dalla pagina di checkout con due plug-in: Checkout Manager e Direct Checkout. Questi strumenti hanno versioni gratuite e sono molto facili da usare, quindi sono un'ottima alternativa per coloro che non vogliono modificare il file functions.php .

Infine, se vuoi personalizzare altre parti del tuo negozio, ti consigliamo di dare un'occhiata alla nostra guida per modificare la pagina del negozio e aumentare le tue vendite.

Hai cancellato la convalida del codice postale? Hai avuto problemi con questo tutorial? Fatecelo sapere nella sezione commenti qui sotto!