Comment ajouter des champs personnalisés à la page de paiement WooCommerce

Publié: 2020-07-21

Vous souhaitez personnaliser votre caisse ? Dans ce guide, nous vous montrerons comment ajouter des champs personnalisés à la page de paiement dans WooCommerce pour faire passer votre boutique au niveau supérieur.

Pourquoi personnaliser la caisse WooCommerce ?

Dans QuadLayers, nous avons vu précédemment comment personnaliser la page de la boutique dans WooCommerce. Aujourd'hui, nous verrons comment faire de même et inclure des champs personnalisés lors du paiement. La caisse est l'une des pages les plus importantes pour toute boutique en ligne . C'est là que vous souhaitez emmener vos clients afin qu'ils finalisent l'achat et que vous concluiez la vente. Ainsi, pour améliorer vos taux de conversion et vos revenus, optimiser le paiement avec des champs personnalisés est indispensable.

Comment est la page de paiement parfaite ? Cela dépend beaucoup de votre entreprise. Par exemple, la caisse des produits physiques est différente de celle des produits numériques. Vous choisissez un paiement d'une page ou de plusieurs pages, affichez ou masquez des champs, utilisez différentes couleurs, etc. Cependant, le plus important est que votre paiement génère la confiance de l'utilisateur, qu'il n'y ait aucune distraction et qu'il soit optimisé pour que l'acheteur passe le moins de temps possible.

Comment ajouter des champs personnalisés à la page de paiement WooCommerce ?

Il existe deux manières principales d'ajouter ou de masquer des champs personnalisés sur la page de paiement dans WooCommerce :

Avec des plugins
Par programmation

Si vous n'avez pas de compétences en codage, nous vous recommandons de consulter ces plugins :

WooCommerce Direct Checkout : C'est un excellent outil pour simplifier le processus de paiement et rediriger les utilisateurs de la page produit vers le paiement. Il a une version gratuite et des plans premium qui commencent à 19 USD.
WooCommerce Checkout Manager : Avec plus de 90 000 installations actives, Checkout Manager est un excellent plugin pour augmenter vos taux de conversion. Il vous permet d'ajouter, de personnaliser et de supprimer des champs sur la page de paiement. C'est un outil freemium avec une version gratuite et des plans pro à partir de 19 USD.

Ces plugins de paiement sont d'excellents choix et feront le travail en douceur. Cependant, si vous ne souhaitez pas installer de plugins, vous pouvez coder votre solution. Dans ce guide, nous allons nous concentrer sur la façon dont vous pouvez ajouter des champs personnalisés à la page de paiement WooCommerce avec un peu de codage .

Ajouter des champs personnalisés à la caisse WooCommerce par programme

Dans cette section, vous apprendrez à ajouter par programme des champs personnalisés à la page de paiement WooCommerce . Nous allons vous montrer comment inclure :

Texte
Case à cocher
Types d'entrée radio

Vous pouvez ajouter d'autres champs personnalisés, mais sachez qu'ils peuvent nécessiter un certain type de validation. Ainsi, dans ce didacticiel, nous allons nous concentrer sur ces 3 types et ignorer les champs qui nécessitent la validation des valeurs saisies. De plus, nous allons afficher des champs personnalisés dans la liste des commandes backend et les modèles d'e-mail.

NOTE : N'oubliez pas que si vous souhaitez ajouter d'autres champs à vos projets, vous devez implémenter une validation de sécurité.

Ainsi, pour ajouter des champs personnalisés à la page de paiement WooCommerce, il existe deux options :

Vous pouvez coder vos scripts dans un thème enfant
Créer un plug-in personnalisé

Pour créer une solution plus évolutive et mieux organisée, nous allons créer un plugin personnalisé . De plus, contrairement à l'approche du thème enfant, un plugin personnalisé peut également être le point de départ d'un développement ultérieur. Cependant, si vous préférez utiliser un thème enfant, nous vous recommandons de consulter ce guide.

Ajoutez des champs personnalisés à la caisse WooCommerce avec un plugin personnalisé

Le plugin personnalisé que nous allons construire aura trois fichiers.

Principale
L'extrémité avant
Backend

Le fichier principal agit comme une passerelle vers le fichier frontal, que nous allons utiliser pour nos scripts frontaux. De plus, nous inclurons le troisième fichier, où se trouvent les scripts backend. Il convient de noter que ce fichier frontal sera le fichier de base principal et devrait être déplacé vers un fichier hiérarchique de bas niveau (tout comme notre fichier principal) si vous ajoutez plus de classes. Alors maintenant, voyons comment ajouter des champs personnalisés à la page de paiement WooCommerce à l'aide d'un plugin personnalisé .

1. Ouvrez votre IDE préféré et créez un dossier avec trois fichiers :

QuadLayers_checkout_fields /__Classes /__/__class_qlccf_base.php (Fichier frontal) /__/__class_qlccf_back.php (Fichier principal) /__QuadLayers_checkout_fields.php (Fichier principal)

2. Fichier principal

Le fichier principal est QuadLayers_checkout_fields.php :

 <?php
/**
 * @lien https://quadlayers.com/
 * @depuis la 1.0.0
 * Nom du plugin : Champs personnalisés QuadLayers Checkout 
 * URI du plugin : https://quadlayers.com/
 * Description : Plugin pour créer des champs personnalisés dans la page de paiement WooCommerce, imprimer dans les commandes backend et les modèles d'e-mail
 *Version : 1.0.0
 * Auteur : Sébastopolys
 * URI de l'auteur : https://quadlayers.com/
 * Domaine de texte : qlccf
 */
if(!defined('ABSPATH')){die('-1');}
elseif(!class_exists('run_init')){
	classe finale run_init{	
		fonction statique publique run(){
			return include_once plugin_dir_path( __FILE__ ).'classes/class_qlccf_base.php';
		}
	}
	run_init::run();
}
autre{
	echo "<h3>ERREUR - Classe run_init existante dans QuadLayers_checkout_fields.php !</h3>" ;
}

Vous pouvez modifier les informations du plug-in, la fonction et les noms de fichiers et mettre les vôtres. Mais nous vous suggérons d'abord de copier et coller les scripts sans rien modifier afin de mieux comprendre leur fonctionnement.

3. Fichier de classe frontal

Le fichier frontal est class_qlccf_base.php . C'est là que vit la classe principale et où vous pouvez inclure un nombre illimité de classes et de fonctions. Une classe abstraite ne peut pas être instanciée, elle doit donc être héritée par une autre classe. Voici le fichier frontal et une explication détaillée après le code :

 <?php
if(!defined('ABSPATH')){die('-1');}
elseif(!class_exists('base_class')){

classe abstraite base_class{   

    public const VERS = '1.1.0';// <-- Version du plugin
    public const PREFIX = 'qlccf';// <-- Préfixe du plugin
    public const PLDIR = __DIR__ ;// <-- Chemin du répertoire du plugin
    public const PLPAT = __FILE__ ;// <-- Chemin du fichier  

    fonction publique add_base_hooks(){    
       add_action( 'woocommerce_after_order_notes', array($this,'quadlayers_subscribe_checkout' ));       
       add_action('woocommerce_after_checkout_billing_form',array($this,'quadlayers_email_checkout'));
       add_action('woocommerce_before_order_notes', array($this,'quadlayers_radio_checkout'));
       add_action( 'woocommerce_checkout_update_order_meta',array($this, 'quadlayers_save_function' ));
    }
    // insérer une case à cocher dans le paiement woocommerce - crochet : after_order_notes
    fonction publique quadlayers_subscribe_checkout( $checkout ) {
            woocommerce_form_field( 'abonné', tableau(
                'type' => 'case à cocher',
                //'required' => vrai,
                'class' => array('form-row-wide'),
                'label' => 'Abonnez-vous à notre newsletter.'                   
            ), $checkout->get_value( 'abonné' ) );              
    }
    // Insérer du texte dans le woocommerce de la caisse - crochet : after_billing_form
    fonction publique quadlayers_email_checkout($checkout2){
        woocommerce_form_field( 'altmail', tableau(
            'type' => 'courriel',
            //'required' => vrai,
            'class' => array('form-row-wide'),
            'label' => ' Adresse e-mail alternative.'                             
        ), $checkout2->get_value( 'altmail' ) );  
    }
    // Insérer un champ personnalisé radio dans le woocommerce de la caisse - crochet : before_order_notes
    fonction publique quadlayers_radio_checkout($checkout3){
        woocommerce_form_field( 'flux', tableau(
            'type' => 'radio',
            //'required' => vrai,
            'class' => array('form-row-wide'),
            'label' => 'Comment nous avez-vous trouvé ?.',            
                'options' => tableau(
                    'Google' => 'Google',                  
                    'Ami' => 'Ami',
                    'Facebook' => 'Facebook',
                    'YouTube' => 'YouTube',
                    'Autre' => 'Autre'            
                )
        ));
    }
    // enregistre toutes les valeurs des champs personnalisés
    fonction publique quadlayers_save_function( $order_id ){ 
        if ( ! empty( $_POST['abonné'] ) ) {
            update_post_meta( $order_id, 'suscriptor', sanitize_text_field( $_POST['suscriptor'] ) );
        }
        si ( ! vide( $_POST['altmail'] ) ) {
            update_post_meta( $order_id, 'altmail',sanitize_text_field( $_POST['altmail'] ) );
        }
        if ( ! empty( $_POST['feed'] ) ) {
            update_post_meta( $order_id, 'feed',sanitize_text_field( $_POST['feed'] ) );
        }      
    }
}// Inclure la classe backend
    include_once(plugin_dir_path( __FILE__ ).'class_qlccf_back.php');
}
autre{
	echo "<h3>ERREUR D'INITIALISATION - Classe base_class existante !</h3>" ;
}

Après avoir déclaré la classe, nous définissons quelques constantes que nous pourrons utiliser plus tard. Ensuite, nous incluons tous les crochets WooCommerce que nous allons utiliser dans une seule méthode, que nous appelons add_base_hooks() .

Puisqu'une classe abstraite ne peut pas être instanciée, nous exécutons cette méthode à partir de notre fichier backend afin qu'elle exécute tous les crochets déclarés ici. Nous utilisons chacun des crochets pour une tâche différente, en attribuant l'une des méthodes suivantes à chacun d'eux. woocommerce_after_order_notes dans notre méthode add_base_hooks() exécute la méthode quadlayers_subscribe_checkout() , toutes deux définies dans la classe base_class .

Notez comment nous utilisons certaines des fonctions WordPress et WooCommerce : woocommerce_form_field() Il génère un champ personnalisé dans le formulaire de paiement WooCommerce. update_post_meta() Cette fonction native de WordPress est largement utilisée pour mettre à jour les métadonnées de la base de données des publications, des produits et d'autres types de publication personnalisés. De plus, les types de champs de saisie disponibles sont :

texte	sélectionner	radio
le mot de passe	date-heure	datetime-local
Date	mois	temps
la semaine	numéro	e-mail
URL	tél

4.Le fichier principal, `class_qlccf_back.php`

C'est là que la classe qlccf_back_class hérite de base_class précédemment défini dans class_qlccf_base.php file :

 <?php
if(!defined('ABSPATH')){die('-1');}
if(!class_exists('qlccf_back_class')):
    la classe qlccf_back_class étend base_class{

        fonction publique __construct(){       
            parent :: add_base_hooks(); 
            if(is_admin()):
                add_filter( 'manage_edit-shop_order_columns', array($this,'qlccf_checkbox'));
                add_filter( 'manage_edit-shop_order_columns', array($this,'qlccf_email'));
                add_action( 'manage_shop_order_posts_custom_column',array($this, 'qlccf_column_content'));
                add_action( 'woocommerce_email_order_meta',array($this,'qlccf_email_template'));
            fin si;
        }             
        # afficher la valeur des champs personnalisés dans la liste des commandes backend 
        fonction publique qlccf_column_content($column){
                global $post ; 
                if ( 'suscriptor' === $column ) { # Case à cocher
                    $order = wc_get_order( $post->ID );     
                    $c_meta = $order->get_meta('suscriptor');       
                    if($c_meta==1):$img_url='https://www.sebastopolys.com/wp-content/uploads/2020/07/true-icon.png' ;
                    sinon :$img_url='https://www.sebastopolys.com/wp-content/uploads/2020/07/false-icon.png' ;
                    fin si;                       
                    echo '<img src="'.$img_url.'"/>' ;
                } 
                elseif('altmail' === $column ){ # Courrier alternatif
                    $order = wc_get_order( $post->ID );     
                    $e_meta = $order->get_meta('altmail');
                    echo $e_meta;
                }   
                autre{}     
        }    
        # Définir la colonne de la case à cocher
        fonction publique qlccf_checkbox($columns){
                $columns['abonné'] = __( 'abonné');            
                retourne $colonnes ;
        }
        # Définir la colonne du courrier alternatif
        fonction publique qlccf_email($columns1){
                $columns1['altmail'] = __( 'Courrier alternatif');            
                retourne $colonnes1 ;
        }
        # Inclure le champ Alt Mail dans le tampon d'e-mail WC
        fonction publique qlccf_email_template($order_obj){
            $is_set = get_post_meta( $order_obj->get_order_number());           
                // retourne si aucun champ personnalisé n'est défini
            if( vide( $is_set ) )
		    retourner; 
	        // ok, nous allons de l'avant et faisons écho au champ personnalisé
            $alt_email = get_post_meta( $order_obj->get_order_number(), 'altmail', true );            
            echo '<h2>Mon champ personnalisé</h2><p>E-mail alternatif :'.$alt_email.'</p>' ;            
        }              
    }    
  $run=new qlccf_back_class ;    
fin si;

Dans ce fichier, nous définissons un constructeur pour exécuter les crochets frontaux que nous avons indiqués dans notre autre fichier. Ensuite, nous ajoutons les crochets nécessaires pour afficher les champs personnalisés dans la liste des commandes backend et les modèles d'e-mail WooCommerce en utilisant un conditionnel if() et la fonction WordPress is_admin() pour l'appliquer uniquement si l'utilisateur est dans l'écran admin backend. Le crochet manage_shop_order_posts_custom_column() insère une colonne dans la liste des commandes, afin que nous puissions afficher les champs dans notre fonction qlccf_column_content() .

Une fois que nous sommes accrochés à la boucle WooCommerce, nous vérifions si le nom du champ appartient à l'un de nos champs personnalisés et si c'est le cas, nous l'imprimons. En utilisant un conditionnel if()else, nous pouvons vérifier tous nos champs personnalisés dans la même fonction.

Après cela, nous créons une case à cocher et des colonnes de champs personnalisés dans la liste des commandes backend. Nous devons définir nos colonnes personnalisées pour afficher nos champs WooCommerce personnalisés une fois qu'un client a terminé le processus de paiement et que la commande est créée.

Enfin, dans la dernière méthode, nous utilisons le crochet woocommerce_email_order_meta pour afficher notre champ de texte personnalisé dans le modèle d'e-mail d'administration. Fonctions WordPress & WooCommerce utilisées :

wc_get_order() : Obtient l'objet de la commande actuelle avec toutes les données qui lui sont attachées

get_meta() : Pour récupérer les métadonnées de la commande

get_post_meta() : Obtient les valeurs de nos champs personnalisés enregistrés dans la base de données

get_order_number() : Pour obtenir le numéro d'identification de la commande en cours

Emballer

Dans l'ensemble, la personnalisation de la page de paiement est un must pour toute boutique en ligne. Dans ce guide, nous vous avons montré comment ajouter des champs personnalisés à la page de paiement WooCommerce par programmation avec un peu de codage. Vous avez appris à créer un plugin personnalisé étape par étape pour optimiser le paiement.

De plus, si vous souhaitez personnaliser la page de paiement et passer au niveau supérieur, nous vous recommandons de consulter ce guide étape par étape.

Avez-vous essayé cette méthode? Pouvez-vous penser à des façons de l'améliorer? S'il vous plaît partagez vos expériences avec nous dans la section des commentaires ci-dessous!

Si vous souhaitez améliorer vos conversions dans WooCommerce, nous vous recommandons de consulter ces guides :

Meilleurs boutons d'achat rapide pour WooCommerce
Comment optimiser le paiement dans WooCommerce
Comment modifier la page de la boutique dans WooCommerce via le codage ?