Comment modifier la page de paiement WooCommerce

Publié: 2020-08-15

La page de paiement est l'une des étapes les plus importantes du processus d'achat. Si vous avez une boutique en ligne, il est essentiel que vous la personnalisiez et l'optimisiez pour augmenter les taux de conversion. Il existe plusieurs façons de le faire. Dans ce guide, nous allons vous montrer 2 méthodes différentes pour modifier la page de paiement WooCommerce : avec des plugins et par programmation.

Pourquoi devriez-vous personnaliser la page de paiement dans WooCommerce ?

Si vous avez une boutique WooCommerce, la caisse est l'une des pages les plus cruciales. C'est là que le client paie et que vous concluez la vente. Compte tenu du nombre d'acheteurs qui abandonnent leur panier et de la concurrence actuelle, vous devez optimiser le paiement pour conclure autant de ventes que possible.

Même si WooCommerce inclut une bonne configuration par défaut, vous devrez peut-être modifier la page de paiement pour augmenter les taux de conversion sur votre boutique. Certaines des modifications que vous pouvez appliquer pour modifier votre page de paiement WooCommerce sont :

  • Créer une page de paiement
  • Changer le style et la conception de la caisse avec CSS
  • Ajouter, supprimer ou réorganiser les champs de paiement
  • Inclure le contenu
  • Rendre un champ obligatoire ou facultatif
  • Ajouter des champs conditionnels et créer une logique conditionnelle
  • Ajoutez des frais supplémentaires pour l'expédition, l'emballage, etc.
  • Et plein d'autres

Nous avons déjà vu comment personnaliser la page de la boutique et comment supprimer des champs de la caisse, et aujourd'hui nous allons vous montrer 2 façons différentes de personnaliser la page de caisse dans WooCommerce .

Modifier la page de paiement WooCommerce : 2 méthodes

Dans ce guide, vous apprendrez à modifier la page de paiement dans WooCommerce de 2 manières différentes :

  1. Avec un plugin
  2. Par programmation (codage)

Examinons de plus près chaque option.

1) Personnalisez la page de paiement avec un plugin

Si vous n'avez pas de compétences en codage, vous pouvez modifier la page de paiement WooCommerce avec un plugin. Il existe de nombreuses options, mais pour ce didacticiel, nous utiliserons WooCommerce Checkout Manager .

Ce plugin est sur le marché depuis quelques années et compte plus de 90 000 téléchargements actifs. Il a une version gratuite avec des fonctionnalités basiques mais puissantes que vous pouvez télécharger ici et 3 plans premium avec des fonctionnalités plus avancées qui commencent à 19 USD (paiement unique). Voyons ce que cet outil peut faire.

personnaliser la page de paiement WooCommerce - WooCommerce Checkout Manager main

Gestionnaire de paiement WooCommerce

Checkout Manager est l'un des meilleurs plugins pour gérer votre page de paiement. Il vous permet d' ajouter, de modifier et de supprimer des champs sur la page de paiement pour augmenter vos ventes. Et la meilleure partie est qu'il est très facile à utiliser. Par exemple, vous pouvez ajouter des champs d'expédition, de facturation et supplémentaires à la page de paiement en activant simplement les options du menu.

L'outil vous permet d'ajouter ou de masquer des champs tels que le prénom et le nom, le nom de l'entreprise, le pays, la ville, le code postal, l'adresse, le numéro de téléphone, l'e-mail et autres. Pour ce faire, sur votre tableau de bord WordPress, accédez à WooCommerce> Paiement , puis à l'onglet Facturation, Expédition ou Supplémentaire. Là, vous verrez une liste de tous les champs que vous souhaitez afficher ou masquer. personnaliser la page de paiement de woocommerce - plugin du gestionnaire de paiement

Créer un champ de fichier de téléchargement personnalisé

L'une des fonctionnalités les plus intéressantes du plugin WooCommerce Checkout Manager est la possibilité de permettre aux acheteurs de télécharger n'importe quel type de fichier pendant le processus d'achat . Ceci est très utile lorsque vous réservez un hôtel ou louez une voiture en ligne et que vous devez télécharger votre carte d'identité ou votre permis de conduire. Vous pouvez également modifier ces fichiers et laisser les utilisateurs gérer leurs fichiers au cas où ils auraient besoin de fournir des documents supplémentaires. De plus, vous pouvez ajouter des frais fixes ou en pourcentage à n'importe quel champ principal ou conditionnel.

Ajouter des frais à la caisse

Une autre option intéressante pour modifier la page de paiement WooCommerce consiste à ajouter des frais. Cela peut être très utile si vous souhaitez inclure des frais supplémentaires dans des situations telles que :

  • livraison express
  • Traitement spécial
  • Supplément pour l'expédition vers certains pays ou endroits
  • Frais liés aux cartes de crédit ou aux passerelles de paiement

Même si WooCommerce offre certaines options pour ajouter ces frais supplémentaires, Checkout Manager vous offre plus de contrôle et de flexibilité. Pour ajouter des frais avec Checkout Manager, allez dans WooCommerce > Checkout > Billing .

Vous verrez différents champs de facturation que vous pouvez activer. Pour cette démonstration, nous ajouterons des frais pour la livraison express et nous devrons créer un nouveau champ, nous appuyons donc sur le bouton Ajouter un nouveau champ . Nous allons sélectionner radio comme type de bouton et donner un nom au nouveau champ.

Ensuite, allez dans l'onglet Options et nous ajouterons deux étiquettes : Oui et Non . Lorsque l'acheteur sélectionne la livraison express, nous ajouterons des frais supplémentaires de 10 $.

Ajouter des frais à la caisse - Options Enregistrez les modifications et c'est tout ! Désormais, lorsque l'utilisateur sélectionne l'option de livraison express au moment du paiement, des frais supplémentaires de 10 $ seront ajoutés à son panier.

Créer des champs conditionnels

Outre l'ajout de champs et de frais, vous pouvez également personnaliser la page de paiement WooCommerce en créant des champs conditionnels pour améliorer l'expérience utilisateur. Il vous suffit de sélectionner le champ parent conditionnel et sa valeur. Voyons le processus étape par étape :

  1. Dans votre tableau de bord WordPress, accédez à WooCommerce > Paiement > Facturation et cliquez sur Ajouter un nouveau champ
  2. Sélectionnez le type de champ que vous souhaitez créer et remplissez l'étiquette, l'espace réservé/le type et la description. Cela dépendra du type de conditionnel que vous créez
  3. Après cela, cochez la case conditionnelle à droite. Sélectionnez le champ parent et la valeur que le champ parent doit prendre pour afficher le champ conditionnel
  4. Appuyez sur Enregistrer et vous avez terminé !

La bonne chose est que Checkout Manager vous permet de créer des champs personnalisés illimités et d'appliquer autant de conditions que vous le souhaitez pour modifier votre page de paiement et offrir aux utilisateurs une expérience unique.

Pour plus d'informations sur la création de champs conditionnels dans WooCommerce, consultez ce guide complet qui contient plusieurs exemples de ce que vous pouvez faire pour personnaliser votre paiement.

Ceci n'est qu'un exemple simple, mais vous pouvez faire beaucoup plus. Pour plus d'informations, consultez notre guide complet sur la façon d'ajouter des frais à la caisse WooCommerce.

Dans l'ensemble, si vous souhaitez modifier facilement la page de paiement, WooCommerce Checkout Manager est un excellent choix. La version gratuite est un bon début, mais si vous souhaitez des fonctionnalités plus avancées, nous vous recommandons l'un des plans premium.

2) Modifier la page de paiement par programmation (codage)

Dans cette section, nous allons vous montrer comment modifier la page de paiement WooCommerce via le codage . Ainsi, à la fin, vous saurez comment :

  1. Ajouter des champs personnalisés à la page de paiement WooCommerce
  2. Enregistrer les champs personnalisés dans la base de données
  3. Rendre un champ obligatoire facultatif
  4. Ajouter du contenu à la page de paiement
  5. Utilisez des codes abrégés dans la page de paiement WooCommerce
  6. Donnez du style à la page de paiement avec du CSS personnalisé

Pour réaliser toutes ces personnalisations, vous utiliserez des hooks de paiement WooCommerce. Si vous n'êtes pas familier avec les crochets, nous vous recommandons de consulter notre guide de démarrage sur l'utilisation des crochets WooCommerce. Comme nous allons appliquer certaines modifications au fichier functions.php , nous vous recommandons d'utiliser un thème enfant. Vous pouvez soit utiliser l'un des nombreux plugins de thème enfant, soit en créer un en suivant ce guide.

2.1) Ajouter des champs personnalisés à la page de paiement WooCommerce

La première chose que nous allons vous montrer est comment ajouter des champs personnalisés à la page de paiement. Pour cela, collez le script suivant dans le fichier functions.php du thème enfant :

 // champ de case à cocher
add_action( 'woocommerce_after_order_notes', 'quadlayers_subscribe_checkout' );

fonction 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é' ) );
}

Cela ajoutera un champ de case à cocher personnalisé à la fin de la page de paiement pour donner aux utilisateurs la possibilité de s'abonner à votre newsletter. De la même manière, vous pouvez ajouter n'importe quel type de champ. Par exemple, ajoutons un type de champ de saisie radio avec le script suivant :

 // Champ de saisie radio
add_action('woocommerce_before_order_notes', 'quadlayers_radio_checkout');
fonction 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'
)
));
}

Cela ajoutera un type d'entrée radio afin que vous puissiez demander à vos clients où ils ont entendu parler de vous. Ajouter des champs personnalisés à la page de paiement de woocommerce Pour plus d'informations sur la façon d'ajouter des champs personnalisés à la page de paiement WooCommerce, consultez ce guide complet avec plusieurs exemples.

2.2) Enregistrer les valeurs des champs personnalisés dans la base de données

Voyons maintenant comment vous pouvez utiliser ces champs personnalisés pour modifier le paiement et collecter des informations sur les commandes WooCommerce. Pour ce faire, vous devez être en mesure de récupérer les valeurs des champs personnalisés chaque fois que vous en avez besoin. De plus, vous devez enregistrer les valeurs des champs personnalisés dans la base de données une fois que les clients ont rempli le formulaire et cliqué sur le bouton Passer la commande .

Pour ce faire, vous devez utiliser le crochet 'woocommerce_checkout_update_order_meta' . Pour mettre à jour les deux champs personnalisés que vous avez ajoutés à l'étape 2.1, copiez et collez le code suivant dans le fichier funcitons.php du thème enfant :

 add_action( 'woocommerce_checkout_update_order_meta','quadlayers_save_function' );
fonction quadlayers_save_function( $order_id ){
si ( ! vide( $_POST['abonné'] ) ) {
update_post_meta( $order_id, 'subscriber', sanitize_text_field( $_POST['subscriber'] ) );
}
if ( ! empty( $_POST['feed'] ) ) {
update_post_meta( $order_id, 'feed',sanitize_text_field( $_POST['feed'] ) );
}
}

Ce script vérifie si le champ personnalisé est vide ou non avec une if() avant de l'enregistrer dans la base de données. Après avoir ajouté ce script, vous pouvez récupérer les données enregistrées dans la base de données à l'aide d'un objet WP global “$post” . Dans le script suivant, nous obtenons les métadonnées de l' abonné de la commande en cours. Vous pouvez l'utiliser dans le backend de la liste des commandes WooCommerce.

 global $post ;
$order = wc_get_order( $post->ID );
$c_meta = $order->get_meta('abonné');

Il convient de noter qu'il s'agit d'un script brut, vous devrez donc l'adapter à vos besoins spécifiques.

2.3) Rendre un champ obligatoire facultatif

Un autre moyen simple mais efficace de modifier la page de paiement dans WooCommerce consiste à rendre facultatifs les champs obligatoires ou obligatoires. De cette façon, vous laissez les acheteurs remplir uniquement les champs nécessaires à la transaction et améliorez leur expérience d'achat.

Par exemple, supposons que vous vendiez des produits téléchargeables ou virtuels et que vous souhaitiez rendre le champ Adresse de la section Facturation facultatif. Ajoutez simplement le code suivant au fichier functions.php de votre thème enfant.

 add_filter( 'woocommerce_billing_fields', 'wc_address_field_optional');
function wc_address_field_optional( $champs ) {
$fields['billing']['billing_address_1']['required'] = false ; 
renvoie $champs ; 
}

En utilisant cet extrait comme base, vous pouvez rendre plus de champs facultatifs en un rien de temps.

Champs conditionnels

Si vous souhaitez aller plus loin dans votre page de paiement WooCommerce, vous pouvez la personnaliser en ajoutant des champs conditionnels. Les champs conditionnels ont une logique conditionnelle afin qu'il y ait des champs qui apparaissent ou disparaissent en fonction des valeurs d'un autre champ. Par exemple, vous pouvez créer une logique conditionnelle pour que les champs de carte de crédit n'apparaissent que si l'utilisateur sélectionne Carte de crédit comme option de paiement.

Pour en savoir plus sur les champs conditionnels et comment les utiliser pour modifier votre page de paiement, consultez ce guide complet .

2.4) Ajouter du contenu à la page de paiement

Une autre façon de modifier la page de paiement WooCommerce consiste à ajouter du contenu. Avec une solide connaissance des crochets de paiement WC, vous pouvez facilement insérer tout type de contenu tel que des images, des titres, du texte, etc., où vous le souhaitez. Par exemple, vous pouvez utiliser ce script pour ajouter une image de badge de confiance avant le bouton Passer une commande sur la page de paiement :

 add_action('woocommerce_review_order_before_submit','quadlayers_checkout_content');
fonction quadlayers_checkout_content(){
echo '<img src="https://www.heresylab.com/wp-content/uploads/2019/01/paypal-1.png" /> ;
}

ajouter des badges de confiance à la page de paiement de woocommerce Outre les images, vous pouvez également ajouter un texte d'en-tête simple en haut de la caisse :

 add_action(woocommerce_checkout_before_customer_details
,'quadlayers_checkout_header');
fonction quadlayers_checkout_header(){
echo "<h2>Ceci est un en-tête personnalisé<h2>
" ;
}

Une autre alternative intéressante consiste à ajouter un message à votre page de paiement. En règle générale, les magasins mentionnent des éléments liés à l'expédition, à la livraison, etc. Par exemple, supposons que vous souhaitiez rappeler aux clients qu'ils devront peut-être attendre 5 jours ouvrables pour recevoir leurs produits. Dans le fichier functions.php de votre thème de fichier, ajoutez :

 add_action( 'woocommerce_after_order_notes', 'wc_add_message' );
fonction wc_add_message () {
echo 'N'oubliez pas que la livraison peut prendre jusqu'à 5 jours ouvrables.';
}

2.5) Ajouter des frais à la page de paiement

Voyons comment modifier la page de paiement WooCommerce et ajouter des frais supplémentaires. La plupart du temps, il existe deux types de frais supplémentaires :

  • Fixé
  • Pourcentage

Dans cette section, nous vous montrerons comment ajouter les deux à votre paiement.

Ajouter un forfait

Un exemple typique de frais fixes est la livraison express. Supposons que vous souhaitiez inclure des frais fixes de 10 $ pour la livraison express.

Utilisez simplement le script ci-dessous et modifiez le texte du nom du champ. Dans cet exemple, nous appellerons les « frais supplémentaires » et cela ajoutera 10 $ à la commande.

 add_action ( 'woocommerce_cart_calculate_fees' , function () {
 si ( is_admin () && ! défini ( 'DOING_AJAX' )) {
 retour ;
 }
 WC ()-> panier -> add_fee ( __ ( 'Supplémentaire' , 'txtdomain' ), 10 );
 });

Gardez à l'esprit que ce code ajoutera automatiquement des frais fixes de 10 $ au total de la commande des clients lors du paiement.

Ajouter des frais basés sur un pourcentage

Une autre alternative consiste à facturer des frais basés sur un pourcentage. Cela peut être utile s'il y a des taxes supplémentaires ou si vous souhaitez ajouter un coût supplémentaire pour certains frais de passerelles de paiement. Disons que nous voulons ajouter des frais de 3% au prix total de la commande (produits + expédition).

 add_action ( 'woocommerce_cart_calculate_fees' , function () {
 si ( is_admin () && ! défini ( 'DOING_AJAX' )) {
 retour ;
 }
 $pourcentage = 0,03 ;
 $percentage_fee = ( WC ()-> panier -> get_cart_contents_total () + WC ()-> panier -> get_shipping_total ()) * $percentage ;
 WC ()-> panier -> add_fee ( __ ( 'Tax' , 'txtdomain' ), $percentage_fee );
 });

Ce script ajoutera des frais de 3 % au total de la commande de l'acheteur lors du paiement.

Pour plus d'informations et d'exemples pour ajouter des frais à votre boutique, consultez notre guide sur la façon d'ajouter des frais à la caisse WooCommerce.

2.6) Utiliser des shortcodes dans la page de paiement WooCommerce

Les shortcodes WooCommerce vous offrent une grande flexibilité et vous permettent d'ajouter tout type de contenu à l'aide de crochets de paiement. Cependant, si vous imprimez simplement le shortcode, cela ne fonctionnera pas. Au lieu de cela, vous devez les inclure comme suit :

 echo do_shortcode('[ woocommerce_cart ]');

Ainsi, en utilisant un crochet de la même manière que dans les exemples précédents, vous pouvez vous retrouver avec quelque chose comme ceci :

 add_action('woocommerce_after_checkout_form','quadlayers_checkout_shortcode');
fonction quadlayers_checkout_shortcode(){
echo do_shortcode('[ woocommerce_cart ]'); }

Ce script apportera le

 [ woocommerce_cart ]

shortcode en action, affichant le panier WooCommerce au bas de la page de paiement. Ajouter la prise en charge des codes abrégés à la page de paiement WC Veuillez noter que vous pouvez utiliser n'importe quel code court WordPress, WooCommerce ou personnalisé. Cependant, certains shortcodes peuvent ne pas être compatibles ou pris en charge par WooCommerce, alors vérifiez cela avant de les utiliser. Pour en savoir plus sur les shortcodes, vous pouvez consulter notre guide complet des shortcodes WooCommerce.

2.7) Modifier la page de paiement WooCommerce avec un CSS personnalisé

Enfin, vous pouvez également personnaliser la page de paiement de votre boutique WooCommerce en modifiant le style CSS. Cela ne signifie pas que vous devez passer des heures à reconstruire toute la page de paiement. Même quelques modifications simples peuvent vous aider à optimiser le paiement. Par exemple, en modifiant les couleurs, les polices, les marges ou les bordures, vous pouvez voir de grandes améliorations dans les taux de conversion.

Il n'y a pas de formule magique qui fonctionne pour toutes les entreprises ici et vous devrez tester différents styles, mais ajuster quelques éléments peut vous aider à augmenter vos ventes. Par exemple, vous pouvez utiliser ce script simple pour appliquer un style CSS personnalisé et modifier la couleur d'arrière-plan sur la page de paiement :

 add_action('wp_head','quadlayers_checkout_style');

fonction quadlayers_checkout_style(){
         if(is_checkout()==true){

                 echo '<style> body{background:#dfdfff!important;}<style>' ;
         }
}

En plus de cela, vous pouvez prendre ce script comme base et ajouter vos propres règles CSS à l'intérieur de la balise HTML pour lui donner l'apparence parfaite pour votre site. Il s'agit d'un hack rapide pour appliquer le CSS à la page de paiement. C'est très pratique pour ajouter de petits morceaux de CSS. Mais si vous voulez des scripts de style plus étendus, vous devez mettre en file d'attente le style CSS à la manière de WordPress, en utilisant le hook WP natif wp_enqueue_style() comme suit :

 add_action( 'wp_enqueue_scripts', 'quadlayers_enqueue_css' );

fonction quadlayers_enqueue_css(){    
    wp_enqueue_style( 'checkout_style',
        get_stylesheet_directory_uri() . '/style-checkout.css'
    );
}

De cette façon, vous pouvez avoir tous vos CSS personnalisés dans un fichier séparé ( checkout-style.css dans cet exemple) qui sera stocké dans votre dossier de thème enfant au même niveau que le fichier principal style.css .

Ce ne sont que quelques exemples de la façon dont vous pouvez personnaliser la page de paiement dans WooCommerce avec quelques scripts simples. Nous vous recommandons de les prendre comme base et de jouer pour ajouter ou modifier tout autre aspect de votre paiement. De plus, si vous souhaitez modifier la page de la boutique via le codage, nous vous recommandons de consulter notre guide sur la façon de personnaliser la page de la boutique WooCommerce par programme.

Bonus : crochets de paiement

Il existe de nombreux crochets de paiement que vous pouvez utiliser pour modifier la page de paiement dans WooCommerce. Voici quelques-uns des principaux :

  • woocommerce_before_checkout_form
  • woocommerce_checkout_before_customer_details
  • woocommerce_checkout_billing
  • woocommerce_before_checkout_billing_form
  • woocommerce_checkout_shipping
  • woocommerce_before_order_notes
  • woocommerce_checkout_after_order_review
  • woocommerce_checkout_after_customer_details
  • woocommerce_review_order_before_cart_contents
  • woocommerce_review_order_before_shipping
  • woocommerce_review_order_after_order_total
  • woocommerce_checkout_order_review
  • woocommerce_review_order_before_submit
  • woocommerce_review_order_before_payment
  • woocommerce_review_order_after_submit
  • woocommerce_after_checkout_form

Pour plus d'informations sur les crochets et leur fonctionnement, consultez les guides suivants :

  • Comment utiliser les crochets de paiement WooCommerce
  • Comment utiliser les hooks WooCommerce – Le guide complet

Enfin, pour la liste complète des crochets que vous pouvez utiliser, consultez cette page de documentation.

Conclusion

Dans l'ensemble, la modification de la page de paiement peut faire une grande différence et vous aider à faire passer votre boutique WooCommerce au niveau supérieur. Même avec quelques modifications, vous pouvez augmenter les taux de conversion et augmenter vos ventes. Dans ce guide, nous vous avons montré deux manières de modifier le paiement :

  • Avec un plugin
  • Par programmation (via le codage)

Si vous n'avez pas de compétences en codage mais que vous souhaitez une solution simple mais solide, WooCommerce Checkout Manager est votre meilleur choix. Ce plugin freemium possède de puissantes fonctionnalités pour éditer la page de paiement, et il est facile à utiliser.

D'autre part, si vous souhaitez créer votre propre solution via du codage et que vous ne souhaitez pas installer de plug-ins, vous pouvez modifier la page de paiement par programme. Nous vous avons montré cinq exemples différents pour modifier différents aspects du paiement, mais les options sont infinies. Jouez avec les scripts et libérez votre créativité pour optimiser votre paiement.

Si vous souhaitez raccourcir le processus de paiement pour améliorer les taux de conversion, nous vous recommandons d'utiliser un plugin d'achat rapide pour WooCommerce ou des liens de paiement directs.

Enfin, si vous souhaitez découvrir différentes options pour modifier la page de la boutique sur votre boutique, nous vous recommandons de consulter ce guide étape par étape .

Avez-vous des questions ou souhaitez-vous partager avec nous les personnalisations de paiement que vous avez appliquées à votre site ? Faites-nous savoir dans la section commentaires ci-dessous! Nous serons heureux de vous entendre!