Pourquoi est-il nécessaire de personnaliser les champs de paiement ?
Le processus de paiement standard de WooCommerce collecte par défaut des informations de base et universelles, telles que le nom, l’adresse, le téléphone et l’e-mail. Cependant, lorsque votre activité présente des besoins spécifiques, ces données ne suffisent plus. En ajoutant des champs personnalisés, vous pouvez offrir à vos clients une expérience d’achat plus personnalisée et plus précise.
Par exemple, une boutique qui vend des gâteaux sur mesure pourrait avoir besoin que les clients fournissent des messages de bonheur à inscrire sur les gâteaux, ou indiquent s’ils souhaitent ou non des bougies ; une entreprise B2B pourrait avoir besoin d’enregistrer le numéro de taxe d’entreprise du client ou le numéro de la commande ; une boutique de billets pour des événements pourrait avoir besoin de collecter les informations d’identité des participants afin de procéder à une vérification. Les champs personnalisés vous permettent de recueillir des données essentielles qui dépassent le cadre des processus standard, et ces données peuvent être utilisées pour le traitement des commandes, le segmentement des clients, le marketing personnalisé, ainsi que pour respecter les obligations légales.
Du point de vue technique, la page de paiement de WooCommerce est un formulaire composé d’une série de champs standard, dont la structure est définie par des “ hooks d’action ” (Action Hooks) et des « hooks de filtre » (Filter Hooks). Cela signifie que nous pouvons, à l’aide de plugins ou de fichiers de fonctions de thèmes, utiliser ces hooks pour intégrer des modifications au processus de paiement, afin d’ajouter, de supprimer ou de modifier des champs. Comprendre ce mécanisme fondamental est essentiel pour toute personnalisation que nous souhaitons effectuer.
Lectures recommandées Guide complet pour le développement de sites e-commerce avec WooCommerce : de la mise en place à la réalisation de fonctionnalités avancées。
Trois méthodes pour créer des champs de paiement personnalisés
WooCommerce offre des moyens flexibles d’ajouter des champs personnalisés, et vous pouvez choisir la méthode la plus adaptée à votre niveau de compétence technique et à vos besoins.
Utiliser des plugins pour effectuer des ajouts rapides et sans code.
Pour les administrateurs de sites web qui ne connaissent pas bien le code ou pour les projets qui nécessitent une mise en ligne rapide, l’utilisation de plugins spécialisés est la solution la plus pratique. Il existe sur le marché des plugins de haute qualité tels que “Checkout Field Editor for WooCommerce” ou “WooCommerce Checkout Manager”.
Ces plugins proposent généralement une interface de administration intuitive qui vous permet d’ajouter de nouveaux champs en cliquant et en faisant des choix. Vous pouvez définir le type de champ (champ de texte, menu déroulant, case à cocher, bouton radio), son étiquette, un indicateur indiquant s’il est obligatoire, ainsi que son emplacement précis sur la page de paiement (dans la section des factures ou dans la section des informations de livraison). L’utilisation de ces plugins ne nécessite pas de coder, ce qui réduit considérablement le niveau de complexité technique et les rend adaptés à la plupart des besoins standard. Cependant, il convient de noter que ces plugins peuvent augmenter la charge sur le site web et qu’ils peuvent manquer de flexibilité lorsque la logique personnalisée est très complexe.
Ajouter des champs personnalisés via du code
C’est la méthode la plus puissante et la plus flexible pour modifier le thème. functions.php Il est possible de créer un fichier ou un plugin personnalisé pour réaliser cela. L’essentiel consiste à utiliser… woocommerce_checkout_fields Les crochets de filtre.
Ce crochet vous permet de modifier l’arrêté des champs de paiement. Par exemple, si vous souhaitez ajouter un champ pour saisir le nom de l’entreprise dans la section “ Informations de la facture ”, vous pouvez écrire le code suivant :
Lectures recommandées Comment ajouter des champs personnalisés et des métadonnées à la page des produits sur WooCommerce ?。
add_filter( 'woocommerce_checkout_fields', 'custom_add_checkout_field' );
function custom_add_checkout_field( $fields ) {
$fields['billing']['billing_company_custom'] = array(
'label' => __('公司名称（自定义）', 'woocommerce'),
'placeholder' => _x('请输入您的完整公司名', 'placeholder', 'woocommerce'),
'required' => true,
'class' => array('form-row-wide'),
'clear' => true,
'priority' => 25, // 控制显示顺序，数字越小越靠前
);
return $fields;
}Ce code ajoute un champ de texte obligatoire dans le champ de la facture. L’élément clé est le nom de la clé dans l’arrêté de champs (par exemple…). billing_company_custom) et l'ensemble de champs dans lequel il se trouve (['billing'] Ou ['shipping']、['order']）。
Utiliser la fonctionnalité de logique conditionnelle de WooCommerce
Parfois, vous souhaitez que un champ ne soit affiché que dans certaines conditions. Par exemple, le champ “Message sur la carte de félicitations” ne doit être visible que lorsque le client choisit le service “Emballage cadeau”. Cela peut être réalisé en utilisant du JavaScript ou des plugins qui prennent en charge la logique conditionnelle.
La mise en œuvre pure en code nécessite généralement l’aide de… woocommerce_after_checkout_billing_form Ou woocommerce_after_checkout_shipping_form Il est possible d’utiliser des “crochets” pour générer la structure HTML des champs, puis d’écrire des scripts jQuery pour surveiller les changements dans d’autres champs (comme les cases à cocher) et ainsi contrôler l’affichage ou la dissimulation du champ cible. Cependant, cette approche nécessite une certaine maîtrise des capacités de JavaScript. Une méthode plus simple consiste à utiliser des plugins avancés pour la gestion des champs qui offrent une logique de conditionnement visuelle prédéfinie.
Vérifier et enregistrer les données des champs personnalisés.
Il ne suffit pas de simplement afficher les champs sur la page ; il est essentiel de vérifier la validité des données et de les sauvegarder en toute sécurité dans la base de données.
Validation des données sur le front-end et le back-end
Afin de prévenir l’envoi de données invalides ou malveillantes, il est nécessaire de procéder à une vérification du côté du serveur (back-end). Cela se fait en… woocommerce_checkout_process Cela a été réalisé grâce aux hooks d’action (action hooks).
Continuant avec l'exemple précédent, si nous ajoutons… billing_company_custom C’est un champ obligatoire ; nous devons nous assurer que le client n’a pas laissé cet espace vide.
Lectures recommandées Pratique du développement WooCommerce : créer un site de commerce électronique professionnel à partir de zéro.。
add_action('woocommerce_checkout_process', 'custom_validate_checkout_field');
function custom_validate_checkout_field() {
if ( isset($_POST['billing_company_custom']) && empty($_POST['billing_company_custom']) ) {
wc_add_notice( __( '请填写“公司名称（自定义）”。', 'woocommerce' ), 'error' );
}
}wc_add_notice() La fonction affiche un message d’erreur en haut de la page de paiement, empêchant la soumission de la commande tant que l’utilisateur n’a pas corrigé l’erreur. Vous pouvez y intégrer une logique de validation plus complexe, par exemple en vérifiant la forme de l’adresse e-mail, les plages de valeurs numériques ou en utilisant des expressions régulières.
Enregistrer les données des champs dans la commande.
Après la validation, nous devons enregistrer les valeurs des champs personnalisés dans les métadonnées de la commande (Order Meta) afin de pouvoir les consulter ultérieurement en arrière-plan et dans les e-mails. Pour ce faire, nous allons utiliser… woocommerce_checkout_update_order_meta Des déclencheurs d'action.
add_action('woocommerce_checkout_update_order_meta', 'custom_save_checkout_field');
function custom_save_checkout_field( $order_id ) {
if ( ! empty($_POST['billing_company_custom']) ) {
update_post_meta( $order_id, '_billing_company_custom', sanitize_text_field($_POST['billing_company_custom']) );
}
}update_post_meta() La fonction enregistre les valeurs des champs nettoyés sous forme de paires clé-valeur. wp_postmeta Dans le tableau, les noms des clés commencent généralement par un trait d’oblique (par exemple…). _billing_company_customCela permet de le considérer comme des métadonnées “ cachées ” dans certains interfaces de gestion en arrière-plan.
Afficher les données des champs à la fois sur le côté client (front-end) et sur le côté serveur (back-end).
Après avoir enregistré les données, il est essentiel de vous assurer qu’elles puissent être consultées et gérées depuis plusieurs points clés.
Afficher dans les détails de la commande et dans l’e-mail.
Afin que le propriétaire du magasin et les clients puissent tous consulter les informations enregistrées, il est nécessaire de les afficher sur la page des détails de la commande dans l'interface de gestion, ainsi que d'elles être incluses dans les e-mails de confirmation de commande envoyés aux clients et aux administrateurs.
Pour modifier les détails des commandes dans l'interface d administration, vous pouvez utiliser… woocommerce_admin_order_data_after_billing_address Crochet :
add_action('woocommerce_admin_order_data_after_billing_address', 'custom_display_field_in_admin', 10, 1);
function custom_display_field_in_admin($order){
$company_custom = get_post_meta( $order->get_id(), '_billing_company_custom', true );
if ( $company_custom ) {
echo '<p><strong>'.__('自定义公司名').':</strong> '. $company_custom '.'</p>';
}
}De même, en utilisant… woocommerce_email_order_meta_fields Le filtre peut ajouter ce champ au contenu de l’e-mail de commande.
Afficher dans la vue des commandes de “ Mon compte ”.
Lorsque les clients consultent les détails de leurs commandes passées sur leur page de compte, ils devraient également pouvoir voir les informations qu’ils ont saisies à l’époque. Cela est possible grâce à… woocommerce_order_details_after_order_table Implementation des hooks d'action :
add_action('woocommerce_order_details_after_order_table', 'custom_display_field_in_order_view', 10, 1);
function custom_display_field_in_order_view( $order ) {
$company_custom = get_post_meta( $order->get_id(), '_billing_company_custom', true );
if ( $company_custom ) {
echo '<h2>'.__('额外信息').'</h2>';
echo '<table class="woocommerce-table shop_table extra_info"><tbody>';
echo '<tr><th>'.__('自定义公司名').':</th><td>'. $company_custom '.'</td></tr>';
echo '</tbody></table>';
}
}résumés
Ajouter des champs personnalisés au processus de paiement de WooCommerce représente une étape qui va de l’analyse des besoins, à la mise en œuvre du développement, jusqu’à la gestion des données. L’essentiel réside dans la compréhension et l’utilisation du système de hooks de WooCommerce : il s’agit d’exploiter ces mécanismes pour intégrer les nouveaux champs dans le processus de paiement. woocommerce_checkout_fields Ajout de champs aux filtres, à utiliser… woocommerce_checkout_process L'action a été vérifiée et a été acceptée. woocommerce_checkout_update_order_meta Les données sont sauvegardées suite à l’exécution des actions, puis présentées en arrière-plan, par e-mail, ainsi que sur l’interface utilisateur finale, grâce à plusieurs mécanismes de visualisation. Pour les débutants, il est conseillé de commencer par des plugins fiables ; pour les développeurs qui recherchent une personnalisation avancée et de meilleures performances, la rédaction de code est la meilleure option. Quelle que soit la méthode choisie, un design clair du flux de données et des vérifications rigoureuses sont essentiels pour assurer la stabilité des fonctionnalités et améliorer l’expérience utilisateur.
FAQ Foire aux questions
Pourquoi les champs personnalisés que j’ai ajoutés ne s’affichent-ils pas sur la page de paiement ?
Veuillez suivre les étapes suivantes pour effectuer le diagnostic : premièrement, assurez-vous que votre code a bien été intégré dans le thème. functions.php Le problème se trouve dans un fichier ou un plugin personnalisé, et il n’y a aucune erreur de syntaxe. Ensuite, vérifiez si les clés de l’array de champs sont correctement imbriquées. $fields['billing']、$fields['shipping'] Ou $fields['order'] 之中。然后，查看浏览器控制台是否有 JavaScript 错误，这可能与字段的 class 或优先级设置冲突。最后，清空网站和浏览器的缓存后再次尝试。
Comment rendre un champ personnalisé facultatif ou obligatoire ?
Lorsque vous ajoutez des champs via du code, vous pouvez les définir dans l’arrêté de champs (field array). 'required' => true Ou 'required' => falseSi un champ est déjà obligatoire et que vous souhaitez le rendre facultatif, il suffit de modifier les propriétés associées à ce champ. woocommerce_checkout_fields Dans la fonction de filtrage, ce champ est… required Il suffit de modifier la valeur du paramètre en `false`. Veuillez noter qu’après cette modification, il sera également nécessaire d’ajuster ou de supprimer les éléments correspondants. woocommerce_checkout_process La logique de validation qui se trouve à l’intérieur.
Où sont stockés les données des champs personnalisés dans la base de données ?
Les valeurs des champs personnalisés sont principalement stockées dans WordPress. wp_postmeta Dans les tables de la base de données (le préfixe de la table peut varier), chaque enregistrement est identifié par… post_id(Dépendant de l'ID de la commande) et wp_posts Les enregistrements de commande dans le tableau sont liés entre eux. meta_key(C’est-à-dire le nom de la clé que vous avez utilisée pour enregistrer le fichier, par exemple…) _billing_company_custom) pour les identifier.meta_value Les valeurs réelles des champs de stockage sont alors mises en œuvre. Vous pouvez le faire à l’aide d’outils de gestion de base de données ou de fonctionnalités intégrées à WordPress. get_post_meta() La fonction interroge ces données.
Est-il possible d'afficher différents champs personnalisés en fonction du produit sélectionné ?
Oui, mais cela nécessite une logique plus complexe. Une méthode courante consiste à ajouter d’abord une catégorie personnalisée ou un champ métadonnées au produit pour indiquer son type. Ensuite, sur la page de paiement, on utilise ces informations pour… woocommerce_after_checkout_form Affichez l’HTML de tous les champs personnalisés possibles de manière à ce qu’ils soient visibles, mais cachez-les par défaut à l’aide du CSS. Ensuite, rédigez un script JavaScript qui surveille les modifications du contenu du panier d’achat ou le choix d’un produit spécifique, et qui affiche ou cache dynamiquement les groupes de champs correspondants en fonction du type de produit présent dans le panier. Enfin, lors de la validation et de l’enregistrement des données en back-end, il est également nécessaire de traiter ces données de manière conditionnelle en fonction du type de produit.
Quelle est la suite, quelle est la suite ?
Lecture approfondie et connaissances pratiques
Les articles suivants sont liés au sujet de cet article et peuvent faire l'objet d'une lecture plus approfondie. Il est souvent préférable de commencer par l'article qui se rapproche le plus de votre problème actuel, puis d'étendre progressivement la lecture aux sujets environnants.
- Comment utiliser WooCommerce pour construire un site e-commerce WordPress puissant et fonctionnel ?
- Analyse approfondie de WooCommerce : Construire un site e-commerce WordPress puissant à partir de zéro
- Comment configurer des catégories et des attributs personnalisés pour les produits dans WooCommerce afin d'améliorer l'efficacité de la gestion de la boutique ?
- Guide complet pour WooCommerce : 10 astuces pratiques et solutions d’optimisation pour augmenter le taux de conversion des sites e-commerce
- Guide d’optimisation de la cache pour tout le site avec WooCommerce : améliorer la vitesse et le taux de conversion des sites e-commerce WordPress
Français