Les extraits WooCommerce suivants vous permettront de :

• Changer le « label » du woocommerce commande_comments champ
• Changer le « placeholder » du woocommerce commande_comments champ
• Ajouter une « description » au woocommerce commande_comments champ
• Limiter le nombre maximum de caractères dans le woocommerce commande_comments champ
• Faites le woocommerce commande_comments champ obligatoire
• Empêcher la saisie de ponctuation ou de caractères spéciaux dans le woocommerce commande_comments champ

Pourquoi modifier le champ des commentaires de commande WooCommerce ?

Sur la boutique WooCommerce Fermes de pâturages verts J'utilise le champ « Commentaires sur la commande » pour collecter les instructions de livraison du client qui seront imprimées sur l'étiquette de livraison pour le coursier au cas où le client ne serait pas là lorsque la livraison est tentée.

Le champ par défaut « Commentaires sur la commande » n'est pas suffisant car :

• Les clients ne savent pas à quoi l'utiliser car le nom n'est pas descriptif
• Ce n'est pas obligatoire, donc beaucoup de gens le laissent vide
• Le portail de réservation de coursier a une limite maximale de caractères et n'acceptera pas les caractères spéciaux

J'ai donc souhaité modifier l'étiquette, l'espace réservé et la description du champ de commentaires de commande woocommerce afin d'aider les clients à le remplir correctement, de le rendre obligatoire, de limiter le nombre maximum de caractères et d'éviter les caractères spéciaux pour éviter toute erreur potentielle.

Anatomie d'un champ de paiement WooCommerce

Avant de commencer il est important de connaître les différents éléments qui composent un champ de formulaire.

L'étiquette est le titre qui s'affiche en permanence au-dessus du champ.

Si le champ est obligatoire, l'astérisque rouge s'affichera et l'utilisateur ne pourra pas procéder au paiement sans saisir du texte dans la case. (Un message d'erreur s'affichera).

L'espace réservé est le texte grisé qui s'affiche à l'intérieur du champ jusqu'à ce que l'utilisateur commence à taper.

La description apparaît une fois que l'utilisateur a cliqué sur la case pour donner des conseils supplémentaires.

Comment modifier le champ « Commentaires de commande » de WooCommerce avec des crochets de filtre

Voir les commentaires dans le code pour l'explication de chaque partie individuelle. Vous pouvez supprimer les sections dont vous n'avez pas besoin et modifier le texte en fonction de vos besoins, selon vos besoins.

// Modifiez les notes de commande en « Instructions de livraison » avec des règles sur le paiement Woocommerce via woosimon.com add_filter( 'woocommerce_checkout_fields' , 'alter_woocommerce_checkout_fields' ); function alter_woocommerce_checkout_fields( $fields ) { // Changer le nom de l'étiquette $fields['order']['order_comments']['label'] = __('Delivery Instructions', "woocommerce"); // Changer l'espace réservé $fields['order']['order_comments']['placeholder'] = __('Pas de ponctuation ni de caractères spéciaux s'il vous plaît', "woocommerce"); // Ajouter une description $fields['order']['order_comments']['description'] = __('Veuillez désigner un endroit sûr où le coursier peut laisser la boîte en toute sécurité si vous n'êtes pas présent au moment de la livraison. La boîte peut être laissé à l'extérieur en toute sécurité jusqu'à 24 heures après la livraison. Veuillez NE PAS laisser de numéro de téléphone avec des instructions pour appeler. Veuillez ne pas laisser d'autres types de demandes spéciales ou de messages pour les bouchers. Merci.', "woocommerce") ; // Rendre obligatoire $fields['order']['order_comments']['required'] = true; // Ajouter une validation personnalisée pour empêcher les caractères spéciaux et limiter à 52 caractères maximum $fields['order']['order_comments']['custom_attributes'] = array( 'onkeydown' => "javascript: return event.keyCode != 35 && event.keyCode != 36 && event.keyCode != 37 && event.keyCode != 38 && event.keyCode != 39 && event.keyCode != 40 && event.keyCode != 45 && event.keyCode != 46 && event .keyCode != 33 && event.keyCode != 34 && event.keyCode != 92 && event.keyCode != 123 && event.keyCode != 125 && event.keyCode != 126 && event.keyCode != 127 && event. keyCode != 128 && event.keyCode != 129 && event.keyCode != 130 && event.keyCode != 131 && event.keyCode != 132 && event.keyCode != 133 && event.keyCode != 134 && event.keyCode != 135 && event.keyCode != 144 && event.keyCode != 145 && event.keyCode != 155 && event.keyCode != 186 && event.keyCode != 187 && event.keyCode != 188 && event.keyCode ! = 189 && event.keyCode != 190 && event.keyCode != 191 && event.keyCode != 192 && event.keyCode != 219 && event.keyCode != 220 && event.keyCode != 221 && event.keyCode != 222", 'longueurmax' => 52 ); renvoyer les champs $ ; } // Consultez woosimon.com pour des extraits WordPress et Woocommerce plus pratiques !

Une méthode alternative pour empêcher les caractères spéciaux dans le champ WooCommerce order_comments

Personnellement, je préfère la méthode ci-dessus pour empêcher les caractères spéciaux, car elle empêche les utilisateurs de les saisir en premier lieu.

Lorsque j'ai commencé à implémenter ce code, j'avais juste l'espace réservé et la description sans la validation et de nombreuses personnes les ignoraient et utilisaient des signes de ponctuation et des caractères spéciaux. La première règle de la conception Web : beaucoup de gens ne peuvent pas / ne veulent pas lire, si vous ne voulez pas que les gens fassent quelque chose, rendez cela impossible !

L’inconvénient de la méthode ci-dessus est cependant qu’elle ne fonctionne pas sur tous les appareils. Par exemple, je peux toujours saisir la ponctuation dans le champ via mon clavier Andriod.

Le code suivant effectue une validation après coup et garantira qu'aucun caractère spécial ou ponctuation ne passera même si l'utilisateur parvient à les saisir.

//Empêcher les caractères spéciaux dans le champ des commentaires de commande via www.woosimon.com add_filter( 'woocommerce_checkout_process', 'prevent_special_chars_in_delivery_instructions' ); function Prevent_special_chars_in_delivery_instructions() { $delivery_instructions = $_POST['order_comments']; // Vérifiez si le champ contient des caractères spéciaux ou des signes de ponctuation if (preg_match('/[\'^£$%&*()}{@#~?><>,|=+¬]/', $delivery_instructions)) { wc_add_notice( 'Veuillez ne pas utiliser de caractères spéciaux ou de signes de ponctuation dans le champ Instructions de livraison car cela provoquerait une erreur lorsque nous essaierons de réserver la livraison auprès du transporteur. Merci.', 'erreur' ); } } //Consultez woosimon.com pour des extraits WordPress et Woocommerce plus pratiques !

Contrairement à la première méthode, ce code n'empêchera pas les utilisateurs de saisir des caractères spéciaux en premier lieu, mais s'exécutera une fois que l'utilisateur aura appuyé sur le bouton de soumission. S'il y a des caractères spéciaux dans le champ, cela empêchera la soumission de passer et affichera le message d'erreur dans la chaîne.

L'inconvénient potentiel de cette méthode est qu'elle pourrait frustrer les utilisateurs et conduire à un panier abandonné. Vous devrez donc décider si le risque en vaut la peine.

Peut-être un peu exagéré, mais j'exécute en fait les deux extraits, en utilisant ce second comme sauvegarde en cas d'échec du premier pour une raison quelconque.