Guichet de paiement personnalisé complet pour WooCommerce : du niveau débutant au niveau expert.

Pourquoi est-il nécessaire de personnaliser les champs de paiement ?

La page de paiement par défaut de WooCommerce propose des champs de base tels que le nom, l’adresse et l’adresse e-mail. Cependant, pour de nombreux scénarios commerciaux spécifiques, ces champs ne sont pas suffisants. Par exemple, une boutique qui vend des gâteaux personnalisés pourrait avoir besoin de collecter des messages de félicitations à inscrire sur les gâteaux, un site de vente en gros B2B pourrait avoir besoin du numéro de taxe d’entreprise des clients, et un site de billetterie pour des événements pourrait avoir besoin des numéros d’identité des participants afin de procéder à des vérifications. Dans de tels cas, les développeurs doivent personnaliser les champs de paiement pour étendre les fonctionnalités et répondre aux besoins uniques de collecte de données commerciales.

Les champs personnalisés permettent non seulement d’améliorer l’expérience utilisateur et de rendre le processus de paiement plus adapté aux besoins de l’entreprise, mais ils fournissent également des données essentielles pour la gestion des clients, le traitement des commandes et même les activités de marketing. En affichant correctement ces champs sur le backend et dans les e-mails, on peut garantir l’intégrité des informations tout au long du processus de commande.

Détails sur les méthodes principales et les hooks

WooCommerce offre un système de hooks puissant et flexible qui nous permet de personnaliser en profondeur la page de paiement sans avoir à modifier le code source. La mise en place de champs personnalisés implique principalement trois étapes clés : l’ajout des champs, la validation de ces champs, et l’enregistrement ainsi que l’affichage de leurs données. Chacune de ces étapes correspond à un hook d’action spécifique de WooCommerce ou à un hook de filtre.

Filtre utilisé pour ajouter des champs

L'ajout de champs se fait principalement via… woocommerce_checkout_fields Cela est réalisé à l’aide de filtres. Ces filtres nous permettent d’ajouter de nouveaux champs d’entrée, des menus déroulants ou des cases à cocher dans différentes sections du formulaire de paiement, telles que la zone “ Facture ”, la zone “ Livraison ” ou la zone personnalisée “ Informations supplémentaires sur la commande ”.

Les développeurs doivent écrire une fonction de rappel (callback) qui reçoit un array de champs existants et en retourne un nouvel array après les avoir modifiés. À l’intérieur de cette fonction, il est possible de définir de manière détaillée les propriétés de chaque nouveau champ : son type, son étiquette, son placeholder, s’il est obligatoire, son ordre de priorité (utilisé pour le tri), ainsi que ses classes CSS, etc.

Hébergement WordPress par UltraHost

Garantie de remboursement dans les 30 jours, bande passante illimitée et base de données, protection gratuite contre les attaques DDoS. Avantage de 501 TP4T pour les achats sur 3 ans.

page d'accès

Fonction de validation des champs (hook used for field validation)

Lorsque l'utilisateur soumet le formulaire de paiement, nous devons nous assurer que les données des champs personnalisés correspondent aux exigences. C'est à ce moment-là qu'il est nécessaire d'utiliser… woocommerce_checkout_process Action hook. Dans la fonction de rappel (callback) de ce hook, nous pouvons accéder aux données transmises. $_POST Les données soumises par les variables globales sont vérifiées.

Par exemple, on peut vérifier si un champ obligatoire est vide ou si le format d'un numéro de téléphone est correct. En cas d’échec de la validation, il est possible d’utiliser… wc_add_notice() La fonction affiche un message d'erreur à l'utilisateur, empêchant le processus de paiement de continuer.

Fonctionnalités permettant de sauvegarder et d'afficher des données.

Après que l'utilisateur ait soumis une commande, les données des champs personnalisés doivent être sauvegardées de manière sécurisée dans les métadonnées de la commande. Cela est réalisé en… woocommerce_checkout_update_order_meta Les actions sont réalisées à l’aide de « hooks ». Dans la fonction de rappel (callback) de ce hook, nous pouvons utiliser… update_post_meta() La fonction stocke les valeurs des formulaires qui ont passé la validation dans l’ordre correspondant. wp_postmeta Dans la table de la base de données.

Après avoir enregistré les données, il est généralement nécessaire de les afficher à trois endroits : la page des détails de la commande dans l’interface d’administration, l’e-mail de confirmation de commande envoyé à l’utilisateur, et la vue de la commande dans le compte client. Cela implique la personnalisation de l’interface d’administration, des modèles d’e-mails et des pages de compte utilisateur.

Pratique : Ajout d'un champ pour les messages de cadeau

Ci-dessous, nous allons démontrer, à travers un exemple complet, comment ajouter une case de texte pour les “ messages de cadeau ” à une boutique en ligne de fleurs. Cette case apparaîtra dans la zone des informations de la commande ; elle est facultative, et son contenu sera enregistré ainsi que affiché en arrière-plan et dans les e-mails envoyés aux clients.

Étape 1 : Ajouter les champs à la page de paiement

Tout d’abord, nous devons utiliser… woocommerce_checkout_fields Nous allons utiliser un filtre pour enregistrer ce nouveau champ. Nous l’ajouterons après le champ “Remarques de la commande”. Voici le code à mettre en œuvre, qui doit être intégré dans le sous-thème concerné. functions.php Ajoutez-le dans le fichier ou à l’aide d’un plugin de fonctionnalité personnalisée.

add_filter( 'woocommerce_checkout_fields', 'add_custom_checkout_field' );
function add_custom_checkout_field( $fields ) {
    $fields['order']['gift_message'] = array(
        'type'        => 'textarea',
        'class'       => array('form-row-wide'),
        'label'       => __('礼品祝福留言', 'your-text-domain'),
        'placeholder' => __('请输入您想写在贺卡上的祝福语（可选）', 'your-text-domain'),
        'required'    => false,
        'priority'    => 25, // 显示在订单备注（priority 21）之后
    );
    return $fields;
}

Ce code crée… textarea Un champ de type “ texte ”, étiqueté « Message de félicitations et de cadeau », contient des place-holders appropriés ainsi que des classes CSS définies.priority Les paramètres contrôlent l’emplacement de leur affichage.

Étape 2 : Enregistrer les données des champs dans la commande

Ensuite, nous devons conserver les messages laissés par les utilisateurs lors de la création de la commande. Pour ce faire, nous allons utiliser… woocommerce_checkout_update_order_meta Cela est réalisé à l’aide de « crochets » (hooks).

hosting.com Hébergement partagé

Hautes performances avec les CPU AMD EPYC, stockage SSD NVMe et LiteSpeed, support interne expert 24h/24 et 7j/7, mesures de sécurité avancées, notamment SSL, protection contre la force brute, les logiciels malveillants et le DDoS, économies pouvant aller jusqu'à 73%.

page d'accès

add_action( 'woocommerce_checkout_update_order_meta', 'save_custom_checkout_field' );
function save_custom_checkout_field( $order_id ) {
    if ( ! empty( $_POST['gift_message'] ) ) {
        update_post_meta( $order_id, '_gift_message', sanitize_textarea_field( $_POST['gift_message'] ) );
    }
}

Ici, nous effectuons une vérification. $_POST['gift_message'] Y a-t-il une valeur ? Si oui, l'utilisez. sanitize_textarea_field() Après que la fonction a effectué le nettoyage de sécurité, elle peut alors être utilisée. update_post_meta() Sauvez cela en tant que métadonnées de commande, en utilisant pour la clé métadonnée le nom suivant : _gift_message。

Étape 3 : Afficher les données en arrière-plan et dans les e-mails.

Après l’enregistrement des données, il est nécessaire de les rendre visibles. Le code suivant montre comment afficher ce champ sur la page des détails de la commande dans l’administration et dans les e-mails des clients.

// 在管理员订单详情页显示
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_field_admin' );
function display_custom_field_admin( $order ) {
    $gift_message = get_post_meta( $order->get_id(), '_gift_message', true );
    if ( $gift_message ) {
        echo '<p><strong>' . __( '礼品留言:', 'your-text-domain' ) . '</strong><br />'`. esc_html($gift_message).`'</p>';
    }
}

// 在订单确认邮件中显示
add_filter( 'woocommerce_email_order_meta_fields', 'display_custom_field_in_email', 10, 3 );
function display_custom_field_in_email( $fields, $sent_to_admin, $order ) {
    $gift_message = get_post_meta( $order-&gt;get_id(), '_gift_message', true );
    if ( $gift_message ) {
        $fields['gift_message'] = array(
            'label' =&gt; __( '礼品留言', 'your-text-domain' ),
            'value' =&gt; wptexturize( $gift_message ),
        );
    }
    return $fields;
}

La première fonction affiche les messages sous l’adresse de facturation de la commande en arrière-plan. La seconde fonction ajoute les messages en tant que nouvelle ligne de données dans l’e-mail de confirmation de commande envoyé par WooCommerce.

Astuces avancées et précautions à prendre

Une fois que nous avons maîtrisé les méthodes de base, nous pouvons explorer des scénarios d’utilisation plus complexes ainsi que des solutions d’optimisation, afin de rendre les champs personnalisés encore plus puissants et faciles à utiliser.

Créer des conditions pour afficher des champs

Parfois, la visibilité d’un champ dépend de la valeur d’un autre champ. Par exemple, le champ “ Titre de l’facture ” n’apparaît que si l’utilisateur sélectionne l’option “ Facture requise ”. Cela nécessite l’utilisation du JavaScript pour mettre en œuvre l’interaction utilisateur sur le côté client (front-end). Nous pouvons ajouter un événement à un champ déclencheur (comme une case à cocher) pour que cette action provoque le changement de visibilité du champ souhaité. change Des écouteurs d'événements sont utilisés pour contrôler dynamiquement la visibilité (affichage ou masquage) des champs cibles. Des traitements correspondants doivent également être mis en œuvre du côté du serveur, dans la logique de validation.

Sécurité et nettoyage des données des champs

La sécurité est de la plus haute importance. Lors du traitement des données saisies par les utilisateurs, il est essentiel de procéder systématiquement à leur validation et à leur nettoyage. Pour les champs de texte, utilisez… sanitize_text_field() Ou sanitize_textarea_field()Pour les adresses e-mail, utilisez… sanitize_email()Lors de l’affichage des données sur l’interface utilisateur, il est essentiel d’utiliser… esc_html() Ou wp_kses_post() Il est nécessaire d’utiliser des fonctions de mise en échec (escape) pour éviter les attaques de type Cross-Site Scripting (XSS).

Hébergement partagé InterServer

Hébergement mutualisé $2.50 USD par mois, premier mois $0.1 USD code promo tryinterserver, 461 scripts cloud apps, installation en un clic.

page d'accès

Compatibilité avec des plugins et des thèmes tiers

Lors de l’ajout de champs personnalisés, il est possible que des conflits surviennent avec les styles ou les scripts de certains thèmes ou d’autres plugins (en particulier ceux d’optimisation de la phase de paiement). Il est conseillé de développer ces fonctionnalités uniquement dans des sous-thèmes et d’attribuer des noms de classe CSS uniques aux éléments qui contiennent ces champs personnalisés. Avant le déploiement officiel, assurez-vous de tester le fonctionnement du système dans diverses situations, y compris avec différents thèmes et avec les plugins les plus couramment utilisés. L’utilisation des outils de développement des navigateurs pour vérifier les erreurs liées aux éléments et aux scripts est un moyen essentiel pour déboguer les problèmes de compatibilité.

résumés

À travers la présente guide, nous avons commencé par comprendre les besoins des utilisateurs, puis nous sommes progressivement plongés dans le processus de développement de champs de paiement personnalisés pour WooCommerce. Nous avons appris comment utiliser… woocommerce_checkout_fields、woocommerce_checkout_process et woocommerce_checkout_update_order_meta Ces trois fonctionnalités clés permettent d’ajouter, de vérifier et de sauvegarder les champs de données. Un cas d’usage concret relatif aux “ messages de remerciement pour un cadeau ” démontre de manière complète le processus allant de la création des champs à l’affichage des données. Enfin, des sujets avancés tels que les champs conditionnels, le traitement de la sécurité et la compatibilité sont abordés.

En maîtrisant ces compétences, vous serez en mesure de répondre de manière flexible aux besoins spécifiques de collecte de données dans diverses activités commerciales en ligne, et de créer des magasins WooCommerce plus professionnels et personnalisés. Cela permettra d'améliorer les taux de conversion ainsi que la satisfaction de vos clients.

FAQ Foire aux questions

Où sont stockés les données des champs personnalisés ?

Les données des champs personnalisés sont généralement stockées en tant que “ métadonnées de commande ” dans la base de données de WordPress. wp_postmeta Dans le tableau, chaque enregistrement contient l’ID de la commande correspondante.post_idLes métacles que vous avez définis (comme…) _gift_messageVous pouvez accéder aux métadonnées et aux valeurs associées aux commandes via les méthodes disponibles dans l’objet commande de WooCommerce. $order->get_meta(‘_gift_message’) Ou une fonction de WordPress. get_post_meta() Pour obtenir ces données.

Comment ajouter une validation frontale (par exemple, une validation de format) pour des champs personnalisés ?

En plus d’utiliser… woocommerce_checkout_process En plus de l’authentification sur le serveur effectuée par les « hooks » (méthodes de traitement des données), vous pouvez également ajouter des attributs natifs HTML5 aux champs pour effectuer des vérifications de base. Par exemple… pattern Utilisé dans les expressions régulières.type=”email” Utilisé pour le format des adresses e-mail. Pour une validation en temps réel plus complexe, il est nécessaire d’écrire du code JavaScript/jQuery pour surveiller les changements dans les champs. blur Ou input L'événement vérifie si la valeur respecte les règles et fournit une réaction immédiate.

Est-il possible d'ajouter des champs personnalisés à la page de registration des utilisateurs ?

Oui, mais le processus est légèrement différent. Les hooks liés aux champs de paiement de WooCommerce sont conçus spécifiquement pour la page de paiement. Si vous souhaitez ajouter des champs sur la page de registration de “Mon compte”, vous devez utiliser d’autres hooks fournis par WordPress et WooCommerce. woocommerce_register_form Ajoutez des champs.woocommerce_created_customer Il s’agit de sauvegarder les données des champs dans les métadonnées de l’utilisateur. Le principe est similaire à celui des champs utilisés lors du processus de paiement, mais les éléments ciblés ainsi que l’emplacement de stockage des données (les métadonnées de l’utilisateur) diffèrent.

Pourquoi mes champs personnalisés ne s'affichent-ils pas ?

Tout d’abord, vérifiez si votre code a bien été ajouté correctement. functions.php De plus, il n’y a aucune erreur de syntaxe. Ensuite, vérifiez si les clés de l’array de champs sont correctes ; par exemple, assurez-vous qu’elles ont bien été ajoutées… $fields[‘order’] néanmoins $fields[‘billing’] Une partie du problème pourrait résider dans le fait que le code de certains plugins ou thèmes ait recouvert ou supprimé vos champs. Vérifiez à nouveau si cela est le cas. Enfin, essayez de vider les caches du site web et de votre navigateur, car des fichiers CSS/JS obsolètes peuvent affecter la manière dont le site s’affiche.