Analyse approfondie des champs de paiement personnalisés de WooCommerce : guide de développement complet.

Aperçu du système de champs de paiement de WooCommerce

La page de paiement de WooCommerce constitue un élément clé dans le processus d’achat en ligne, car elle permet de collecter les informations des clients. Sa flexibilité et son étendibilité sont largement dues à son système de champs modulaire. Ce système organise tous les éléments que l’utilisateur doit remplir (nom, adresse, contacts, etc.) sous la forme d’un tableau multidimensionnel structuré. Ce tableau définit non seulement les étiquettes et les types des champs, mais contrôle également leur ordre de présentation, leur caractère obligatoire, les règles de validation ainsi que les classes CSS qui leur sont appliquées.

Le noyau de tout le système est… class-wc-checkout.php Les fichiers, ainsi que leur contenu… WC_Checkout Les champs sont regroupés en plusieurs ensembles principaux en fonction de leur utilisation, et les plus couramment utilisés sont… billing(Champs de la facture)shipping(Domaine de la livraison) et order(Ces champs, tels que les notes relatives aux commandes, représentent des informations supplémentaires associées à chaque commande.) Chaque ensemble de champs est en soi un tableau contenant plusieurs définitions de champs. Comprendre cette structure hiérarchique est la première étape pour effectuer toute modification personnalisée, car toutes les modifications s’appliquent à cet ensemble global de champs. Les développeurs n’ont pas besoin de modifier directement les fichiers principaux ; ils peuvent intervenir dans le processus à l’aide d’une série d’actions et de fonctions de filtrage soigneusement conçues. Cela garantit la pérennité des fonctionnalités personnalisées ainsi que leur compatibilité avec les versions futures du système.

Utiliser les crochets intégrés pour ajouter et modifier des champs

WooCommerce propose un système de « hooks » puissant et facile à utiliser, qui permet aux développeurs d’ajouter, de supprimer, de modifier ou de consulter les champs liés au processus de paiement. C’est la méthode standard pour le développement personnalisé, car elle évite les problèmes de maintenance dus aux modifications directes des fichiers de templates principaux.

Lectures recommandées Guide pratique pour l'optimisation des performances des sites de commerce électronique WooCommerce et le développement d'extensions avancées.。

Comment ajouter de nouveaux champs à un formulaire de paiement ?

Pour ajouter un nouveau champ à la page de paiement, par exemple une case à cocher permettant aux clients de sélectionner le “ type de destinataire de la facture ”, vous devez utiliser… woocommerce_checkout_fields Filtre : Ce filtre transmet à la fonction développée un tableau complet des champs de règlementation, vous permettant d’accéder à n’importe quel ensemble de champs. billingAjoutez une nouvelle entrée dans le document.

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

function add_invoice_title_field( $checkout_fields ) {
    $checkout_fields['billing']['billing_invoice_type'] = array(
        'type' => 'select',
        'label' => '发票抬头',
        'required' => true,
        'options' => array(
            'personal' => '个人',
            'company' => '单位'
        ),
        'class' => array('form-row-wide'),
        'priority' => 21, // 紧跟在“公司名称”字段之后
    );
    return $checkout_fields;
}
add_filter( 'woocommerce_checkout_fields', 'add_invoice_title_field' );

Le code ci-dessus crée une boîte de sélection déroulante dans la zone des champs de facture. Chaque définition de champ est un tableau associé (array), qui contient… type, label, required Les paires clé-valeur déterminent le comportement et l’apparence des champs.priority Les paramètres sont cruciaux : ils déterminent l’ordre dans lequel ce champ est affiché dans le formulaire. Plus le nombre est petit, plus la position du champ est en avant dans la liste.

Modifier ou supprimer les attributs des champs existants.

Les besoins commerciaux peuvent nécessiter l’ajustement des champs par défaut. Par exemple, dans certaines régions, il peut être souhaitable de rendre le champ “ Code postal ” non obligatoire ou de cacher le champ “ État/Province ”. Ces modifications sont également transmises via des opérations appropriées. woocommerce_checkout_fields Cela est réalisé à l’aide d’un tableau de filtres.

function adjust_default_fields( $fields ) {
    // 将账单邮编字段设为非必填
    $fields['billing']['billing_postcode']['required'] = false;

// 完全移除账单州/省字段
    unset( $fields['billing']['billing_state'] );

// 更改邮箱字段的占位符文本
    $fields['billing']['billing_email']['placeholder'] = '用于接收订单确认信';

return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'adjust_default_fields' );

Par l’intermédiaire de… unset() Une fonction peut supprimer complètement un champ. Dans la plupart des cas, vous modifiez directement la valeur d’une propriété dans un tableau (array). required, label, class) pour modifier le comportement des champs.

Validation des champs et persistance des données

Afficher les champs sur le côté client n’est que la première étape. Pour garantir la qualité des données, il est nécessaire de valider les informations saisies par l’utilisateur et de sauvegarder de manière fiable ces données validées dans la commande. Ce processus se décompose en deux phases : la validation en temps réel sur le côté client (optionnelle, mais elle améliore l’expérience utilisateur) et la validation lors de l’envoi des données depuis le côté serveur (obligatoire).

Lectures recommandées Guide ultime pour l’optimisation des performances des sites e-commerce WooCommerce : de la configuration à la gestion des caches。

Implementer la logique de validation au niveau du backend.

Lorsque l'utilisateur clique sur le bouton “ Passer la commande ”, WooCommerce exécute la procédure de validation pour le paiement. Les développeurs peuvent en tirer parti pour mettre en œuvre des fonctionnalités supplémentaires ou ajuster le processus de paiement selon leurs besoins. woocommerce_checkout_process Utilisez des « hooks d’action » pour insérer des règles de validation personnalisées. En cas d’échec de la validation, il faut effectuer une action appropriée. wc_add_notice() La fonction affiche un message d'erreur à l'utilisateur et empêche la création de la commande.

function validate_custom_fields_during_checkout() {
    // 检查自定义的“发票抬头”字段
    if ( isset( $_POST['billing_invoice_type'] ) && $_POST['billing_invoice_type'] == 'company' ) {
        // 如果选择了“单位”发票，则检查是否填写了公司名称
        if ( empty( $_POST['billing_company'] ) ) {
            wc_add_notice( '选择“单位”发票抬头时，必须填写公司名称。', 'error' );
        }
    }

// 验证一个自定义的文本字段，确保其格式
    if ( ! empty( $_POST['billing_custom_id'] ) && ! preg_match( '/^CUSTd{6}$/', $_POST['billing_custom_id'] ) ) {
        wc_add_notice( '客户编号格式错误，应为 CUST 后接6位数字。', 'error' );
    }
}
add_action( 'woocommerce_checkout_process', 'validate_custom_fields_during_checkout' );

Enregistrer la valeur du champ dans les métadonnées de la commande.

Après une vérification réussie, l'étape suivante consiste à enregistrer définitivement les valeurs des champs personnalisés lors de la création de la commande. Cela se fait en… woocommerce_checkout_update_order_meta L’action hook a été exécutée. Ce hook est déclenché après la création d’une commande et transmet l’ID de cette commande. Vous devriez utiliser cette fonctionnalité intégrée à WordPress. update_post_meta() La fonction permet de stocker les données du formulaire en tant que données de commande.

function save_custom_checkout_field_data( $order_id ) {
    // 保存发票类型
    if ( ! empty( $_POST['billing_invoice_type'] ) ) {
        update_post_meta( $order_id, '_billing_invoice_type', sanitize_text_field( $_POST['billing_invoice_type'] ) );
    }

// 保存客户编号
    if ( ! empty( $_POST['billing_custom_id'] ) ) {
        update_post_meta( $order_id, '_billing_custom_id', sanitize_text_field( $_POST['billing_custom_id'] ) );
    }
}
add_action( 'woocommerce_checkout_update_order_meta', 'save_custom_checkout_field_data' );

Utilisez des noms de clés avec un préfixe contenant un trait d’oblique lors du stockage (par exemple…) _billing_invoice_typeIl s’agit d’une convention qui empêche ce champ d’apparaître dans la case de métadonnées des “ champs personnalisés ” de la page d’édition des commandes en arrière-plan, afin de prévenir d’éventuelles erreurs de la part de l’administrateur. Veuillez absolument l’utiliser. sanitize_text_field() Des fonctions telles que celles-ci sont utilisées pour nettoyer les données afin de prévenir les risques de sécurité.

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

Afficher des données personnalisées sur l'interface relative aux commandes.

Après avoir enregistré les données, il est généralement nécessaire de les afficher à nouveau à plusieurs endroits, notamment : 1) l'interface d'administration des commandes de WordPress ; 2) la page de détails de la commande dans la section “ Mon compte ” accessible par les utilisateurs ; 3) les e-mails de confirmation de la commande envoyés aux clients et aux administrateurs. Cela garantit l’intégrité et la transparence des informations relatives à la transaction.

Intégrer des champs personnalisés sur la page des détails de la commande en arrière-plan.

Afin que les administrateurs puissent facilement consulter les informations saisies par les clients en arrière-plan, vous devez exporter les métadonnées des commandes enregistrées sur la page d’édition des commandes. Pour ce faire, utilisez… woocommerce_admin_order_data_after_billing_address et woocommerce_admin_order_data_after_shipping_address Les crochets d’attente permettent d’insérer du contenu après les informations existantes.

function display_custom_order_meta_in_admin( $order ) {
    $invoice_type = get_post_meta( $order->get_id(), '_billing_invoice_type', true );
    if ( $invoice_type ) {
        $display_type = ( $invoice_type == 'company' ) ? '单位' : '个人';
        echo '<p><strong>Type de destinataire de la facture :</strong> '`. esc_html($display_type)`.'</p>';
    }

$custom_id = get_post_meta( $order-&gt;get_id(), '_billing_custom_id', true );
    if ( $custom_id ) {
        echo '<p><strong>Numéro de client :</strong> '`. esc_html($custom_id)`.'</p>';
    }
}
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_order_meta_in_admin' );

Afficher les données sur l'interface utilisateur et dans les e-mails.

Afin que les clients puissent également voir les informations qu’ils fournissent, vous devez également modifier le modèle de la vue des commandes sur l’interface utilisateur ainsi que le contenu des e-mails. Pour la page des détails de la commande, vous pouvez utiliser… woocommerce_order_details_after_order_table Crochets. Pour les e-mails, il est nécessaire d’en utiliser. woocommerce_email_order_meta_keys Le filtre informe le système de messagerie des clés de métadonnées personnalisées, afin que celles-ci soient automatiquement incluses dans le contenu des e-mails.

Lectures recommandées Maîtriser le développement de plugins WordPress : créer des modules de fonctionnalités personnalisées et efficaces à partir de zéro.。

// 在前台“查看订单”页面显示
function display_custom_data_in_order_view( $order ) {
    $custom_id = get_post_meta( $order->get_id(), '_billing_custom_id', true );
    if ( $custom_id ) {
        echo '<h2>Informations supplémentaires</h2><table class="shop_table custom-info"><tbody><tr><th>Numéro de client :</th><td>'`. esc_html($custom_id)`.'</td></tr></tbody></table>';
    }
}
add_action( 'woocommerce_order_details_after_order_table', 'display_custom_data_in_order_view' );

// 将自定义字段加入订单邮件
function add_custom_field_to_emails( $keys ) {
    $keys[] = '_billing_custom_id'; // 这个键对应的值会被加入到邮件中
    $keys[] = '_billing_invoice_type';
    return $keys;
}
add_filter( 'woocommerce_email_order_meta_keys', 'add_custom_field_to_emails' );

résumés

Définir des champs de paiement personnalisés dans WooCommerce représente un processus de développement complet allant de l'affichage sur l'interface utilisateur à l'enregistrement des données dans la base de données. L'essentiel réside dans la compréhension et l'utilisation flexible du système de hooks proposé par WooCommerce : il s'agit d'utiliser ces mécanismes pour modifier le comportement du site web selon les besoins spécifiques de l'utilisateur. woocommerce_checkout_fields Les filtres permettent de définir et de modifier la structure des champs. woocommerce_checkout_process L’action implémente la logique de validation nécessaire ; avec l’aide de… woocommerce_checkout_update_order_meta L’action permet de persister les données valides dans un fichier ou une base de données. Enfin, diverses fonctions de présentation (hooks) sont utilisées pour afficher ces données de manière appropriée. woocommerce_admin_order_data_after_billing_address et woocommerce_email_order_meta_keysLes données doivent être affichées en arrière-plan, en interface utilisateur et dans les e-mails. En suivant ce modèle, les développeurs peuvent créer une expérience de paiement puissante, fiable et parfaitement adaptée aux besoins de l’entreprise, tout en garantissant la maintenance du code ainsi que sa sécurité lors des mises à jour.

FAQ Foire aux questions

Les champs personnalisés permettent-ils d'ajouter des règles de validation ? Par exemple, pour ne permettre que l'entrée de chiffres ?

Oui, comme indiqué dans la section “ Validation des champs et persistance des données ” de cet article, vous pouvez… woocommerce_checkout_process Vous pouvez écrire toute logique de validation PHP dans la fonction de rappel (callback) du crochet. Par exemple, en utilisant… is_numeric() Fonction ou expression régulière preg_match() Vérifiez si la valeur du champ est un nombre entier pur. Si la validation échoue, appelez… wc_add_notice() Il suffit d'afficher l'erreur.

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 qu’un champ personnalisé ne soit affiché que pour certaines méthodes de livraison ?

Cela nécessite de combiner des logiques de jugement conditionnel. Vous pouvez vérifier le mode de livraison actuel dans le panier d’achat ou la session en fonction de certaines conditions, dans la fonction qui ajoute ou modifie les champs. Par exemple, en utilisant… WC()->session->get('chosen_shipping_methods') Obtenir l’ID du mode de livraison sélectionné. Si les conditions ne sont pas remplies, un autre mode de livraison peut être utilisé. unset() Supprimez ce champ de l’arrêté de champs, ou ajoutez une classe CSS spécifique (par exemple…) hiddenCela est utilisé en conjonction avec JavaScript pour afficher ou cacher des éléments dynamiquement.

J’ai modifié les champs, mais la page de paiement n’a pas changé. Quelle pourrait en être la raison ?

Tout d’abord, veillez à ce que votre code personnalisé soit exécuté correctement (par exemple, que les modifications apportées au thème soient bien appliquées). functions.php Le fichier ne contient aucune erreur de syntaxe. Ensuite, vérifiez la logique du code pour vous assurer que vous modifiez bien les noms des clés de l’array de champs concernés (par exemple…). billing néanmoins shippingEnsuite, effacez tout le cache qui pourrait exister, y compris le cache des objets, le cache des pages et le cache du navigateur. Finalement, essayez de passer au thème par défaut (par exemple, Storefront) et désactivez les autres plugins afin d’éliminer d’éventuels conflits.

Les données des champs personnalisés sauvegardées peuvent-elles être utilisées pour des recherches d’ordres ultérieures ou des analyses de rapports ?

Oui, mais cela peut nécessiter des étapes supplémentaires. Comme les données sont stockées sous forme de métadonnées (Post Meta) associées aux commandes, vous pouvez les récupérer à l’aide des fonctionnalités de recherche de métadonnées intégrées à WordPress. Pour effectuer des recherches dans la liste des commandes depuis l’administration de WooCommerce, vous devrez soit utiliser un plugin prenant en charge la recherche de champs personnalisés, soit écrire du code pour étendre les fonctionnalités de recherche par défaut. Concernant la génération de rapports, les plugins spécialisés dans les rapports avancés proposent généralement des options permettant d’inclure les métadonnées des commandes dans les critères de filtrage et les éléments affichés. L’exportation des données des champs sous forme de fichier CSV dépend également du fait que l’outil d’exportation prenne en charge la sélection de colonnes de métadonnées personnalisées.