🚫 L'index de validation de WooCommerce interfère avec les clients : 4 façons de supprimer la vérification

Pourquoi la validation du code postal est une barrière inutile

WooCommerce exige le champ du code postal par défaut et le valide. Mais voici la réalité: des dizaines de pays en Afrique, en Amérique centrale et en Océanie n'utilisent pas du tout de codes postaux. Un acheteur au Kenya ou en Jamaïque saisit des chiffres au hasard, rencontre une erreur et quitte la page.

Les champs superflus et les erreurs sur la page de paiement nuisent directement à la conversion. Selon le Baymard Institute, 17% des acheteurs américains ont abandonné un processus de paiement précisément parce qu'il était trop long ou compliqué. Supprimer un ou deux champs inutiles est le moyen le moins coûteux d'augmenter les ventes sans budget publicitaire.

Voici quatre méthodes pour désactiver la validation: de la suppression complète du champ à son simple renommage. Choisissez en fonction de votre audience.

💡 Aperçu rapide:

• Supprimer complètement le champ du code postal via unset(), pour les boutiques qui n'en ont pas du tout besoin
• Rendre le code postal facultatif, pour les boutiques avec une audience géographique mixte
• Supprimer les champs inutiles du formulaire de facturation, si le code postal n'est qu'une partie du problème
• Modifier le libellé du champ pour quelque chose que l'utilisateur comprend, intervention minimale
• Envisager des extensions si vous préférez ne pas toucher au code

Méthode 1: Supprimer complètement le champ du code postal du paiement

La méthode la plus radicale et la plus propre. Le hook woocommerce_checkout_fields donne un contrôle total sur tous les champs de paiement: prenez le tableau, retirez billing_postcode et retournez-le.

Ajoutez le code au fichier functions.php de votre thème enfant:

1
/**
2
 * Remove the postal code field (billing_postcode) from checkout.
3
 */
4
add_filter( 'woocommerce_checkout_fields', 'quadlayers_remove_billing_postcode_checkout' );
5
function quadlayers_remove_billing_postcode_checkout( $fields ) {
6
    unset( $fields['billing']['billing_postcode'] );
7
    return $fields;
8
}

Voici ce qui se passe. Le hook woocommerce_checkout_fields reçoit l'intégralité du tableau des champs de paiement: facturation, livraison et commande. La fonction unset() retire la clé spécifique billing_postcode de la section billing. Le tableau est retourné à WooCommerce sans le champ du code postal, qui disparaît donc à la fois du formulaire et de la validation.

Mais si votre audience est mixte et que certains clients ont besoin d'un code postal, voyez la méthode 2.

Méthode 2: Rendre le code postal facultatif

Au lieu de supprimer le champ, vous pouvez simplement décocher l'indicateur obligatoire. Le champ reste sur la page, mais l'acheteur peut le sauter sans erreur.

Nous utilisons ici le filtre woocommerce_default_address_fields, qui gère les paramètres par défaut de tous les champs d'adresse:

1
/**
2
 * Make the postal code field optional.
3
 */
4
add_filter( 'woocommerce_default_address_fields', 'quadlayers_optional_postcode_checkout' );
5
function quadlayers_optional_postcode_checkout( $p_fields ) {
6
    $p_fields['postcode']['required'] = false;
7
    return $p_fields;
8
}

La différence avec la première méthode réside dans le hook. woocommerce_default_address_fields travaille un niveau plus bas: il définit les propriétés des champs eux-mêmes (libellé, placeholder, obligatoire) avant qu'ils n'arrivent dans les sections de facturation et de livraison. C'est pourquoi la clé ici est simplement postcode, sans le préfixe billing_.

Convient aux boutiques qui vendent à la fois dans des pays avec et sans codes postaux.

Méthode 3: Supprimer les champs inutiles du formulaire de facturation

Souvent, le problème est plus large que le seul code postal. Les champs société, adresse_2, ville et région ne sont pas non plus toujours nécessaires: chacun ajoute une friction au paiement.

Le même hook woocommerce_checkout_fields supprime n'importe quel champ par son identifiant. Voici la liste complète des clés disponibles pour la section de facturation:

1
unset( $fields['billing']['billing_company'] );
2
unset( $fields['billing']['billing_address_2'] );
3
unset( $fields['billing']['billing_city'] );
4
unset( $fields['billing']['billing_state'] );
5
unset( $fields['billing']['billing_phone'] );

Les noms sont explicites. Le préfixe billing_ indique que le champ appartient au formulaire de facturation. Par exemple, pour supprimer company et address_2 en même temps que le code postal:

1
/**
2
 * Remove company, address_2 and postal code from checkout.
3
 */
4
add_filter( 'woocommerce_checkout_fields', 'quadlayers_remove_billing_fields' );
5
function quadlayers_remove_billing_fields( $fields ) {
6
    unset( $fields['billing']['billing_company'] );
7
    unset( $fields['billing']['billing_address_2'] );
8
    unset( $fields['billing']['billing_postcode'] );
9
    return $fields;
10
}

Plusieurs appels unset() cohabitent sans problème dans une même fonction: il suffit de lister les clés que vous souhaitez masquer.

Méthode 4: Renommer un champ pour qu'il soit compris par l'utilisateur

Une intervention minimale pour un effet maximal. Vous ne touchez pas à la validation, vous remplacez simplement le libellé cryptique «Code postal / ZIP» par quelque chose que votre audience comprend. Par exemple, «Quartier» ou «Code postal (si vous en avez un)».

Nous utilisons le hook gettext, le même que celui employé par WordPress et WooCommerce pour traduire l'interface:

1
/**
2
 * Change checkout field labels via gettext.
3
 */
4
add_filter( 'gettext', 'quadlayers_billing_field_strings', 20, 3 );
5
function quadlayers_billing_field_strings( $translated_text, $text, $domain ) {
6
    switch ( $translated_text ) {
7
        case 'Postcode / ZIP':
8
            $translated_text = __( 'Area code', 'woocommerce' );
9
            break;
10
    }
11
    return $translated_text;
12
}

Si vous souhaitez renommer plusieurs champs, ajoutez des cas dans le switch:

1
function quadlayers_billing_field_strings( $translated_text, $text, $domain ) {
2
    switch ( $translated_text ) {
3
        case 'Billing details':
4
            $translated_text = __( 'Order information', 'woocommerce' );
5
            break;
6
        case 'Ship to a different address?':
7
            $translated_text = __( 'Send to other location please', 'woocommerce' );
8
            break;
9
        case 'Company name':
10
            $translated_text = __( 'Company', 'woocommerce' );
11
            break;
12
        case 'Postcode / ZIP':
13
            $translated_text = __( 'Area code', 'woocommerce' );
14
            break;
15
    }
16
    return $translated_text;
17
}

Dans la capture d'écran ci-dessus, le résultat de la combinaison des approches: plusieurs champs sont masqués, le champ du code postal est renommé en «Indicatif régional» et rendu facultatif, les titres des sections de facturation et de livraison sont remplacés par des titres personnalisés. La page de commande est devenue plus courte et plus claire, sans aucune extension.

Extensions pour gérer les champs de commande

Si vous ne souhaitez pas modifier le fichier functions.php, il existe des outils prêts à l'emploi. Examinons deux extensions gratuites qui résolvent le problème sans écrire une seule ligne de code.

Checkout Field Manager pour WooCommerce

Checkout Field Manager, l'un des éditeurs de champs de commande les plus populaires. Il vous permet d'ajouter, de supprimer et de réorganiser les champs dans les sections Facturation, Livraison et Informations complémentaires, le tout via une interface visuelle.

L'extension est gratuite; la version de base couvre les principaux scénarios: masquer un champ, le rendre facultatif, le renommer. Pour la logique conditionnelle (afficher un champ uniquement pour un pays spécifique) et des types de champs supplémentaires, il existe une version premium.

Direct Checkout pour WooCommerce

Direct Checkout pour WooCommerce (anciennement appelé «WooCommerce Direct Checkout») résout un problème plus large: il simplifie l'ensemble du processus de commande. En plus de supprimer des champs, il peut: sauter l'étape du panier et emmener directement le client vers la commande, modifier le texte du bouton «Ajouter au panier», ajouter l'ajout au panier en AJAX sur les pages produits.

Les deux extensions sont régulièrement mises à jour et compatibles avec les versions actuelles de WordPress et WooCommerce.

⁉️🤔 Foire aux questions

Puis-je désactiver la validation uniquement pour certains pays?

Oui. Vous pouvez lier la vérification à WC()->customer->get_billing_country() à l'intérieur du filtre woocommerce_checkout_fields et appliquer unset() ou required = false uniquement pour la liste des pays sans code postal. Ainsi, les acheteurs d'Allemagne ou des États-Unis verront toujours un champ obligatoire, tandis que les clients du Kenya ne le verront pas.

La livraison risque-t-elle de ne plus fonctionner après avoir désactivé la validation du code postal?

Cela dépend du service de livraison. Les services postaux comme USPS ou Royal Mail utilisent le code postal pour calculer les tarifs; pour eux, il est préférable de conserver le champ obligatoire ou au moins visible. Si vous vendez des biens numériques ou utilisez une livraison par coursier dans une ville, vous pouvez supprimer le code postal en toute sécurité. Testez le calcul des frais pour chaque zone de livraison après avoir effectué les modifications.

Le code ne fonctionne pas; le champ du code postal est toujours là. Quelle peut être la cause?

Trois causes fréquentes. Premièrement: le cache. Videz le cache de votre site et de votre navigateur; après avoir modifié functions.php, ouvrez la page de commande en mode navigation privée. Deuxièmement: une autre extension ou le thème remplace le champ après votre filtre. Essayez d'augmenter la priorité du hook: add_filter( 'woocommerce_checkout_fields', '...', 99 ). Troisièmement: vous modifiez le mauvais fichier functions.php. Le code doit se trouver dans le fichier du thème (enfant) actif.

Comment supprimer le champ du code postal sans modifier functions.php?

Installez Checkout Field Manager pour WooCommerce; il vous permet de désactiver n'importe quel champ via le panneau d'administration. Ou utilisez l'extension Code Snippets: collez le code PHP de la méthode 1 en tant qu'extrait et activez-le. Ces deux options sont plus sûres que de modifier directement functions.php et ne seront pas perdues lors de la mise à jour du thème.

Que faire si la validation du code postal est désactivée, mais que WooCommerce affiche toujours une erreur?

Très probablement, l'erreur n'est pas générée par le cœur de WooCommerce mais par une extension tierce, comme une extension de service de livraison ou un validateur d'adresse. Désactivez une par une les extensions de livraison et de vérification d'adresse pour trouver le coupable. Vérifiez également si la validation est définie au niveau JavaScript dans le thème; parfois, les développeurs dupliquent la vérification côté front-end.

Un exemple pratique en vidéo

Regardez un exemple concret de configuration des champs de commande, du code au résultat final:

Code ou plugin: lequel choisir?

Si vous avez simplement besoin de supprimer un ou deux champs et que vous êtes à l’aise avec l’éditeur de thème, quatre lignes de PHP issues de la méthode 1 ou 2 suffisent. C’est léger et cela n’ajoute pas de code superflu au site.

Si vous avez de nombreux champs à configurer, que vous testez fréquemment des modifications du checkout ou que vous préférez ne pas toucher au fichier functions.php, optez pour Checkout Field Manager for WooCommerce. Il est gratuit et vous donne un contrôle visuel sur tous les champs, sans risque de casser le site à cause d’une faute de frappe dans le code.

Pour une optimisation complète du checkout (suppression de l’étape panier, boutons AJAX, libellés personnalisés), Direct Checkout for WooCommerce couvre tous les besoins avec un seul plugin.

La règle d’or: après toute modification, effectuez une commande de test du début à la fin. Cinq minutes de test vous épargnent des heures à traiter les réclamations de vrais clients.