Analyse approfondie des champs de paiement personnalisés de WooCommerce : une pratique complète allant de leur création au traitement des données.

Lors de la création d’un magasin en ligne, l’expérience de paiement des clients est d’une importance capitale. Le formulaire de paiement standard de WooCommerce ne peut pas toujours répondre à toutes les exigences commerciales, telles que la collecte des informations de l’entreprise émettrice de la facture, des messages de félicitations pour l’anniversaire des clients, ou des spécifications particulières concernant la livraison. C’est à ce moment-là que les champs de paiement personnalisés deviennent un outil d’extension très utile. Ils permettent non seulement d’améliorer le degré de personnalisation de l’expérience utilisateur, mais aussi de recueillir des données commerciales essentielles pour les commerçants, ce qui leur permet de perfectionner leurs services et leurs stratégies de marketing.

Grâce au système d’hooks de WordPress et à l’API richement évoluée de WooCommerce, les développeurs peuvent facilement ajouter différents types de champs (champs de texte, menus déroulants, cases à cocher, etc.) à divers endroits de la page de paiement (après les zones “ Adresse de facturation ” et “ Adresse de livraison ”, ou même créer de nouveaux blocs). Ce processus ne concerne pas seulement l’affichage sur le côté client, mais surtout le traitement des données sur le côté serveur : il s’agit de s’assurer que les informations saisies par les utilisateurs soient correctement et sûrement enregistrées dans la commande, et de les afficher de manière claire sur l’interface de gestion en back-office, sur la page de leur compte utilisateur, ainsi que dans les e-mails de notification de commande.

Méthode de mise en œuvre des champs de règlement personnalisés

WooCommerce propose deux grandes catégories de hooks pour gérer les champs de paiement :woocommerce_checkout_fields et woocommerce_checkout_update_order_metaLe premier est utilisé pour définir et afficher les champs, tandis que le second sert à enregistrer les données correspondantes.

Lectures recommandées Du débutant à l’expert en développement de plugins WordPress : apprenez pas à pas à créer vos propres fonctionnalités sur mesure。

Utiliser des crochets pour ajouter des champs

L'étape la plus essentielle est de… woocommerce_checkout_fields Filtre crochet : ajoutez les champs personnalisés à l’array des champs de paiement. Cette structure de l’array est claire et vous permet de placer les champs dans la section “Facture”.billing“ Livraison ”shipping“Commande” et “Remarques sur la commande”orderLes partitions existantes telles que celles mentionnées ci-dessus peuvent être utilisées, et il est également possible de créer des partitions personnalisées.custom）。

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

L'exemple de code ci-dessous montre comment ajouter un champ de texte pour le “ numéro de taxe d'entreprise ” et une case à cocher pour indiquer “ besoin d'une facture ” en bas de la zone d'affichage des informations de la “ facture ”.

/**
 * 在结账页面添加自定义字段
 */
add_filter( 'woocommerce_checkout_fields', 'custom_add_checkout_fields' );
function custom_add_checkout_fields( $fields ) {

// 在“账单”字段组中添加一个“公司税号”文本字段
    $fields['billing']['billing_vat_number'] = array(
        'label'        => __( '公司税号 / VAT Number', 'your-text-domain' ),
        'placeholder'  => _x( '请输入您的公司税号', 'placeholder', 'your-text-domain' ),
        'required'     => false, // 非必填
        'class'        => array( 'form-row-wide' ), // 宽度样式
        'clear'        => true, // 清除浮动
        'priority'     => 25, // 显示顺序，数字越小越靠前
    );

// 在“账单”字段组中添加一个“是否需要发票”单选框
    $fields['billing']['billing_invoice_needed'] = array(
        'type'         => 'radio',
        'label'        => __( '是否需要纸质发票？', 'your-text-domain' ),
        'required'     => true,
        'class'        => array( 'form-row-wide' ),
        'clear'        => true,
        'priority'     => 30,
        'options'      => array(
            'yes' => __( '是，需要纸质发票', 'your-text-domain' ),
            'no'  => __( '否，不需要', 'your-text-domain' )
        )
    );

return $fields;
}

Vérifier et enregistrer les données des champs.

Après avoir ajouté les champs, il est essentiel de s’assurer que les données saisies par les utilisateurs soient enregistrées dans les métadonnées correspondantes de la commande. Cela nécessite d’utiliser des mécanismes appropriés pour la gestion des données et leur stockage dans la base de données. woocommerce_checkout_update_order_meta Cela est réalisé à l’aide de « hooks d’actions ». Lorsque l’utilisateur soumet une commande, WooCommerce déclenche ce hook, et nous pouvons alors récupérer et enregistrer les valeurs des champs personnalisés.

/**
 * 保存自定义结账字段的值到订单元数据
 */
add_action( 'woocommerce_checkout_update_order_meta', 'custom_save_checkout_fields' );
function custom_save_checkout_fields( $order_id ) {

if ( ! empty( $_POST['billing_vat_number'] ) ) {
        // 使用 sanitize_text_field 进行清洁处理，防止恶意代码
        update_post_meta( $order_id, '_billing_vat_number', sanitize_text_field( $_POST['billing_vat_number'] ) );
    }

if ( ! empty( $_POST['billing_invoice_needed'] ) ) {
        update_post_meta( $order_id, '_billing_invoice_needed', sanitize_text_field( $_POST['billing_invoice_needed'] ) );
    }
}

Afficher les données des champs en arrière-plan et dans les e-mails.

Il ne suffit pas de simplement sauvegarder les données. Les commerçants ont besoin de voir ces informations pour gérer les commandes en arrière-plan, et les clients devraient également pouvoir consulter les informations qu’ils ont saisies dans l’e-mail de confirmation de commande ainsi que sur la page “ Mon compte ”.

Afficher sur la page d'édition des commandes en arrière-plan.

Il est possible de le faire. woocommerce_admin_order_data_after_billing_address Comme pour les autres fonctions similaires, les valeurs des champs personnalisés sont affichées après les champs “Adresse de facturation” ou “Adresse de livraison” sur la page détaillée de la commande en back-office.

Lectures recommandées Guide d’introduction au développement de plugins WordPress : créez votre première extension fonctionnelle à partir de zéro.。

/**
 * 在后台订单详情页显示自定义字段
 */
add_action( 'woocommerce_admin_order_data_after_billing_address', 'custom_display_admin_order_meta', 10, 1 );
function custom_display_admin_order_meta( $order ) {
    $vat_number = $order->get_meta( '_billing_vat_number' );
    $invoice_needed = $order->get_meta( '_billing_invoice_needed' );

if ( $vat_number ) {
        echo '<p><strong>' . __( '公司税号:', 'your-text-domain' ) . '</strong> '`. esc_html($vat_number)`.'</p>';
    }
    if ( $invoice_needed ) {
        $display_text = ( $invoice_needed == 'yes' ) ? __( '是', 'your-text-domain' ) : __( '否', 'your-text-domain' );
        echo '<p><strong>' . __( '需要纸质发票:', 'your-text-domain' ) . '</strong> '`. esc_html($display_text)`.'</p>';
    }
}

Afficher dans l’e-mail de confirmation de commande et sur la page de remerciement.

Afin que les clients puissent également consulter ces informations, nous devons les inclure dans l'e-mail de confirmation de commande ainsi que sur la page de confirmation de commande (avec un remerciement). woocommerce_email_order_meta_keys Les filtres peuvent ajouter automatiquement les clés de métadonnées spécifiées à tous les e-mails de notification. En même temps, woocommerce_order_details_after_order_table Les crochets d’action peuvent être affichés dans les détails de la commande en ligne.

/**
 * 将自定义字段添加到订单邮件中
 */
add_filter( 'woocommerce_email_order_meta_keys', 'custom_add_order_meta_to_email' );
function custom_add_order_meta_to_email( $keys ) {
    $keys[] = '_billing_vat_number';
    $keys[] = '_billing_invoice_needed'; // 邮件中会以键的格式显示，通常需要进一步美化
    return $keys;
}

/**
 * 在前台订单详情（感谢页面、我的账户-订单详情）中显示自定义字段
 */
add_action( 'woocommerce_order_details_after_order_table', 'custom_display_order_data_frontend', 10, 1 );
function custom_display_order_data_frontend( $order ) {
    $vat_number = $order->get_meta( '_billing_vat_number' );
    if ( $vat_number ) {
        echo '<h2>' . __( '附加信息', 'your-text-domain' ) . '</h2>';
        echo '<table class="shop_table shop_table_responsive additional_info">';
        echo '<tr><th>' . __( '公司税号:', 'your-text-domain' ) . '</th><td>'`. esc_html($vat_number)`.'</td></tr>';
        echo '</table>';
    }
}

Applications avancées et logique de conditions sur les champs

En plus de l’ajout de champs de base, des interactions plus complexes peuvent considérablement améliorer l’expérience utilisateur, telles que l’affichage conditionnel des champs et la validation basée sur les valeurs existantes.

Réaliser l'affichage conditionnel des champs

Avec JavaScript/jQuery, vous pouvez afficher ou cacher dynamiquement un champ en fonction de la valeur d’un autre champ (comme le nom d’un pays, d’un État, ou d’une option déroulante). Par exemple, une zone de texte contenant des instructions pour l’envoi de la facture n’apparaîtra que lorsque l’utilisateur sélectionne l’option “Nécessité d’une facture papier”.

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

Pour mettre en œuvre cette fonctionnalité, il est nécessaire d'ajouter de la logique dans le fichier JavaScript du thème, ou bien de procéder par d'autres moyens. wp_enqueue_script Insérer le script dans une file d’attente, et surveiller les changements dans les champs sur la page de paiement pour contrôler l’état d'affichage des champs cibles.

Ajouter une validation personnalisée à un champ

Bien que WooCommerce intègre la fonctionnalité des champs “ obligatoires ”,required => true）验证，但有时你需要更复杂的验证规则，比如税号的特定格式。可以通过 woocommerce_checkout_process Utilisez des « hooks d’action » pour ajouter de la logique de validation personnalisée.

/**
 * 在结账过程中验证自定义字段
 */
add_action( 'woocommerce_checkout_process', 'custom_validate_checkout_fields' );
function custom_validate_checkout_fields() {
    // 如果“公司税号”字段不为空，则检查其格式（示例：假设是15位数字）
    if ( ! empty( $_POST['billing_vat_number'] ) && ! preg_match( '/^d{15}$/', $_POST['billing_vat_number'] ) ) {
        wc_add_notice( __( '错误：公司税号格式不正确，应为15位数字。', 'your-text-domain' ), 'error' );
    }
}

Optimisation des performances et bonnes pratiques

L'ajout de trop de champs personnalisés sur un site web, ou leur mauvaise gestion, peut affecter la vitesse de chargement de la page de paiement et l'expérience utilisateur.

Lectures recommandées Maîtriser les champs personnalisés de WooCommerce : Guide avancé de développement, de la création à l'affichage。

Optimiser le chargement et le rendu des champs

• Chargement sélectif des scripts : Seuls les scripts JavaScript nécessaires aux champs affichés en fonction des conditions sont chargés sur la page de paiement.
• Définir des priorités de manière rationnelle : utilisation priority Les paramètres doivent être organisés de manière à respecter une logique claire, afin d'éviter tout réarrangement inutile de la structure de l'affichage.
• Rationaliser. class Array : Ajoutez uniquement les classes de style nécessaires, par exemple… form-row-wide Ou form-row-first。

Sécurité et nettoyage des données

• Vérifiez et nettoyez toujours les données avant de les enregistrer.update_post_meta) et l'affichage (echoAvant de travailler avec les données des utilisateurs, il est essentiel d’utiliser… sanitize_text_field(), esc_html(), wp_kses_post() Ces fonctions sont utilisées pour effectuer le traitement des données, ce qui est essentiel pour prévenir les attaques de type Cross-Site Scripting (XSS).
• Utilisez les types de données appropriés : pour les nombres ou les données ayant un format spécifique, pensez à utiliser les types de données correspondants. sanitize_key() Ou utilisez des expressions régulières personnalisées pour effectuer la validation et le nettoyage des données.

résumés

Les champs de paiement personnalisés dans WooCommerce constituent une fonctionnalité puissante qui permet de faciliter la circulation des informations entre les commerçants et les clients aux moments clés de la transaction. woocommerce_checkout_fields Les hooks permettent de définir les champs de l’interface utilisateur, afin de les utiliser ensuite dans les applications. woocommerce_checkout_update_order_meta Les « hooks » assurent la sauvegarde sécurisée des données, qui sont ensuite présentées en arrière-plan, par e-mail, et sur l’interface utilisateur via plusieurs outils de gestion et des filtres de courriers électroniques. Ce processus constitue un cycle complet de traitement des données. En maîtrisant ces méthodes fondamentales et en combinant des techniques avancées telles que l’affichage conditionnel et la validation personnalisée, les développeurs peuvent créer des processus de paiement hautement personnalisés, faciles à utiliser et sécurisés, répondant ainsi aux diverses exigences du e-commerce. Cela contribue à améliorer le professionnalisme du magasin et la satisfaction des clients.

FAQ Foire aux questions

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

Les données des champs personnalisés sont sauvegardées en tant que “ métadonnées de commande ”. Lorsque vous les utilisez… update_post_meta( $order_id, ‘_field_key’, $value ); Lors de l’enregistrement, les données sont stockées dans WordPress. wp_postmeta Dans la base de données, les tables sont liées aux commandes (un type d’article personnalisé) via… post_id Corrélation. Les noms de clés commencent généralement par un trait d’underline, ce qui indique qu’il s’agit de métadonnées cachées.

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

Comment faire en sorte que les champs personnalisés soient également sauvegardés dans le compte de l'utilisateur lors de son enregistrement ?

Si vous permettez la création d’un compte lors du paiement et souhaitez que des champs tels que le “ nom de l’entreprise ” soient également enregistrés dans les informations de l’utilisateur, il est nécessaire d’actualiser les métadonnées de l’utilisateur en même temps que celles de la commande. Vous pouvez utiliser une approche basée sur des événements ou des traitements asynchrones pour garantir que ces modifications soient effectuées de manière cohérente et fiable. update_user_meta( $customer_id, ‘billing_company’, $value );Notez que l’ID de l’utilisateur doit généralement être obtenu dans le contexte de l’enregistrement ou de la connexion de l’utilisateur.

Pourquoi mes champs personnalisés ne s'affichent-ils pas correctement dans l'e-mail ?

Si la valeur d’un champ n’apparaît pas dans l’e-mail, la raison la plus fréquente est l’oubli de l’inclure dans le contenu de l’e-mail lui-même. woocommerce_email_order_meta_keys Le filtre ajoute les noms de ses clés aux variables de l’e-mail. De plus, le modèle d’e-mail ne contient peut-être pas la partie permettant d’afficher les métadonnées personnalisées. Vérifiez que les noms de vos champs ont bien été ajoutés à l’arrêté de ce filtre, et que le modèle d’e-mail (comme…) email-order-details.phpIl est possible d'afficher des métadonnées générales.

Est-il possible d’ajouter des blocs de champs à des emplacements différents sur la page de paiement ?

Oui. En plus de la configuration par défaut… billing、shipping、order Pour le regroupement, vous pouvez… woocommerce_checkout_fields Créez un nouveau groupe dans le filtre, par exemple… custom_sectionEnsuite, utilisez… woocommerce_checkout_after_customer_details Ou woocommerce_before_order_notes Des hooks d’action tels que ceux-ci, combinés… do_action(‘woocommerce_checkout_’ . $section); Vous pouvez afficher les champs de ce nouveau groupe n’importe où sur la page, selon vos besoins. Cela nécessite cependant de bien comprendre la structure du modèle de paiement de WooCommerce.