Comment personnaliser les pages de paiement de WooCommerce : un guide complet pour booster les conversions

dépense ou frais WooCommercerépondre en chantantWordPressS'agissant d'un site de commerce électronique, sa page de paiement par défaut affecte toujours vos conversions maximales. Vous pouvez donc la remplacer par une page de paiement personnalisée qui contribuera grandement à augmenter les conversions.

L'ajout de champs personnalisés à la page de paiement de WooCommerce peut être un peu compliqué. Nous allons donc vous montrer étape par étape comment ajouter ces champs personnalisés dans la page de paiement de WooCommerce.

Il existe plusieurs options pour modifier la page de paiement de WooCommerce. Vous pouvez utiliser un plugin d'extension WooCommerce tiers ou écrire vous-même un code personnalisé.

Pourquoi les champs de vérification de WooCommerce sont-ils importants ?

Selon une étude de l'Institut Baymard, le taux moyen d'abandon des paniers d'achat s'élève à 69.99%. C'est désormais la norme pour les achats en ligne.

Il faut donc tout mettre en œuvre pour pousser le client à terminer la transaction (emails de rappel, etc.). Cependant, le problème est que la page de paiement par défaut de WooCommerce n'est pas optimisée pour des taux de conversion élevés.

La page de paiement par défaut de WooCommerce ressemble à ceci :

(Exemple : page très basique)

N'est-ce pas un peu monotone ?

Ne vous inquiétez pas !

Pour augmenter les conversions, remplacez la page par défaut par une page de paiement WooCommerce personnalisée.

Par exemple, des éléments de confiance peuvent être ajoutés, tels que des avis de clients et des évaluations cinq étoiles. La première impression d'un acheteur est importante et renforce sa confiance.

Vous souhaitez maintenant personnaliser la page de paiement ? Dans cet article, je vais vous expliquer en détail comment personnaliser dynamiquement les champs supplémentaires, notamment en supprimant l'adresse de facturation, en ajoutant ou en modifiant l'adresse de facturation.Caisse personnaliséeet enregistrer ces champs dans la base de données.

Champs personnalisés de la page de paiement de WooCommerce

Méthode 1 : Personnaliser la page de paiement de WooCommerce à l'aide d'un plugin

1) Tout d'abord, téléchargez et installez WooCommerce Checkout Manager et activez-le.

2) Ensuite, allez à Backend de l'administration de WordPressNaviguez jusqu'à WooCommerce → Checkout Tab.

3. différents sous-onglets peuvent être affichés, tels que FacturationetExpéditionetSupplémentaire ou d'autres onglets, sélectionnez la section dans laquelle vous souhaitez ajouter des champs personnalisés.

4. cliquez sur Ajouter un nouveau champ comme indiqué ci-dessous.

5. lorsque vous avez terminé, cliquez sur Enregistrer les modifications Bouton.

Et c'est ainsi que le champ personnalisé a été ajouté avec succès à la page de paiement de WooCommerce !

Méthode 2 : Personnaliser la page de paiement de WooCommerce à l'aide d'un code

Cette méthode utilise du code pour ajouter des champs personnalisés à la page de paiement. Vous pouvez suivre les étapes ci-dessous :

Étape 1 : Dans la fenêtre `functions.php` Ajoutez le code au fichier

Ajoutez le code suivant à la section functions.php Documentation :

<?php/** * Add the field to the checkout page */add_action('woocommerce_after_order_notes', 'customise_checkout_field');

function customise_checkout_field($checkout){echo '<div id="customise_checkout_field"><h2>' . __('Heading') .

'</h2>';woocommerce_form_field('customised_field_name', array('type' =&gt; 'text','class' =&gt; array('my-field-class form-row-wide') ,'label' =&gt; __(' Customise Additional Field') ,'placeholder' =&gt; __('Guidence') ,'required' =&gt; true,) , $checkout-&gt;get_value('customised_field_name')).

echo '</div>';}

Après avoir ajouté ces codes, la page de paiement sera la suivanteAfficher un nouveau champ personnalisé.

Étape 2 : Valider les données du champ personnalisé

Ajoutez une logique de validation des données au processus de paiement pour vous assurer que les champs sont remplis correctement. Ajoutez le code suivant à l'élément functions.php Documentation :

<?php
/**
 * Checkout Process
 */
add_action('woocommerce_checkout_process', 'customise_checkout_field_process') ;

function customise_checkout_field_process() {
    // Vérifiez si le champ est défini, si ce n'est pas le cas, affichez un message d'erreur. if ( !
    if (!$_POST['customised_field_name']) {
        wc_add_notice(__('Veuillez entrer une valeur.'), 'error') ; }
    }
}

Étape 3 : Enregistrer les données pour les champs personnalisés

Enregistrez ce que le client remplit dans les champs personnalisés dans les métadonnées de la commande. Ajoutez ensuite le code suivant au fichier functions.php Documentation :

<?php
/**
 * Mise à jour de la valeur du champ
 */
add_action('woocommerce_checkout_update_order_meta', 'customise_checkout_field_update_order_meta') ;

function customise_checkout_field_update_order_meta($order_id) {
    if (!empty($_POST['customised_field_name'])) {
        update_post_meta($order_id, 'Some Field', sanitize_text_field($_POST['customised_field_name'])) ;
    }
}

Si vous ne voulez pas utiliser de code, vous pouvez également utiliser Editeur de champs de caisse personnalisés pour WooCommerce pour modifier les champs de la caisse de WooCommerce.

Cela permet de personnaliser facilement les champs de la page de paiement de WooCommerce sans avoir à se soucier du code !

Modifier les champs de la page de paiement de WooCommerce

Ajouter les champs de la page de paiement de WooCommerce

Vous trouverez ci-dessous une capture d'écran de l'état initial de la page de paiement :

(Exemple d'image : page de paiement par défaut)

Exemple : Suppression des champs "Prénom" et "Nom".

Dans cet exemple, nous allons supprimer les champs Prénom et Nom de la page de paiement. Vous trouverez ci-dessous l'extrait de code :

add_filter( 'woocommerce_checkout_fields' , 'custom_fields_woocommerce' ) ;

function custom_fields_woocommerce( $fields ) {
    unset($fields['shipping']['shipping_first_name']) ;
    unset($fields['shipping']['shipping_last_name']) ;
    retournez $fields ;
}

Code Description

Filtre (machine) woocommerce_checkout_fields
Les filtres sont utilisés pour modifier les champs de la page de paiement de WooCommerce.
fonction personnalisée champs_personnalisés_woocommerce
Cette fonction reçoit $fields qui représente le champ de caisse actuel.
Supprimer l'opération de terrain :non paramétré
dépense ou frais non paramétré supprime les champs spécifiés. Dans l'exemple, nous avons supprimé les champs Prénom et Nom pour l'adresse de livraison.

Modification de l'effet de la page de paiement

Avec le code ci-dessus, les champs Prénom et Nom seront supprimés de la page de paiement.

De cette façon, vous avez la possibilité de modifier les champs de la page de paiement de WooCommerce, en ajoutant ou en supprimant des champs en fonction des besoins réels de l'activité de votre site web.

Supprimer les champs de la page de paiement de WooCommerce

Comme pour la suppression de champs, l'ajout de champs à la page de paiement de WooCommerce est très simple. Vous trouverez ci-dessous l'extrait de code permettant d'ajouter un nouveau champ :

add_filter( 'woocommerce_checkout_fields' , 'woocommerce_checkout_field_editor' ) ; // Notre fonction accrochée - $fields est passée par le filtre !
// Notre fonction accrochée - $fields est passée par le filtre !
function woocommerce_checkout_field_editor( $fields ) {
    $fields['shipping']['shipping_field_value'] = array(
        'label' => __('Field Value', 'woocommerce'),
        'placeholder' => _x('Valeur du champ', 'placeholder', 'woocommerce'),
        'required' => true
    ) ;
    return $fields.
}

Code Description

1. Ajouter un nouveau champ

valeur_du_champ_d'expédition est le nom du nouveau champ, qui peut être remplacé par un nom personnalisé si vous le souhaitez.
Le champ sera ajouté au expédition(Distribution).

2. Propriétés du champ

étiquetteNom du champ : Définit le nom du champ, qui s'affiche au-dessus du champ.
espace réservéDéfinissez des espaces réservés et demandez à l'utilisateur de les remplir.
requis: Indique si le champ est obligatoire. Réglé sur vrai Lorsqu'un champ est obligatoire, il affiche un astérisque rouge (*) pour indiquer qu'il est obligatoire.

Les champs sont obligatoires ou non

1. Champs obligatoires

au cas où requis Les paramètres sont fixés à vraiLes champs de la rubrique "Informations", seront marqués comme obligatoires et un astérisque rouge (*) apparaîtra à la fin du nom du champ.

2. Champs facultatifs

au cas où requis Les paramètres sont fixés à fauxLe champ devient alors facultatif et l'utilisateur peut choisir de le remplir ou non.

Afficher les valeurs des champs sur la page de commande de WooCommerce

L'extrait de code suivant affiche la valeur du champ personnalisé dans la page de commande du backend de WooCommerce :

add_action('woocommerce_admin_order_data_after_shipping_address', 'edit_woocommerce_checkout_page', 10, 1 ) ;
function edit_woocommerce_checkout_page($order){
    global $post_id ; $order = new WikiLeaks.com
    $order = new WC_Order( $post_id ) ; echo '
    echo '<p><strong>'. __('Field Value').' :</strong> ' . get_post_meta($order-&gt;get_id(), '_shipping_field_value', true ) . '</p>';
}

L'extrait de code affiche le champ sur la page de commande de WooCommerce.

Code Description

1. Monter à woocommerce_admin_order_data_after_shipping_address

Ce crochet est utilisé pour ajouter du contenu après l'information "Adresse de livraison" dans la page de commande du backend de WooCommerce.

2. fonction personnalisée edit_woocommerce_checkout_page

La fonction accepte 1TP4Commande pour obtenir les informations relatives à la commande.
utiliser get_post_ meta extrait les valeurs des champs personnalisés des métadonnées de la commande.

3. Affichage des valeurs des champs personnalisés

get_post_meta($order->get_id(), '_shipping_field_value', true) Obtenir la commande sauvegardée Valeur du champ d'expédition Valeur.
utiliser écho Sortie vers la page de commande.

Modifier les champs de la page de paiement de WooCommerce

L'expérience d'achat des clients peut être considérablement améliorée en modifiant les champs de paiement de WooCommerce, et le processus peut être rendu encore plus facile avec des extensions.

1. l'éditeur de champs de caisse pour WooCommerce

WooCommerce Checkout Field Editor Le plugin permet de personnaliser facilement le processus de paiement de la boutique grâce à la possibilité d'ajouter, de modifier ou de supprimer des champs.

Cet outil permet de rationaliser le processus de paiement, de collecter des données importantes sur les clients et d'augmenter les conversions en réduisant les taux d'abandon.

Cette extension améliore également la satisfaction des utilisateurs et permet un meilleur contrôle, notamment en déplaçant les champs principaux et en maintenant la cohérence de la marque.

fonction des touches

Ajoutez, modifiez et supprimez facilement les champs de la caisse.
Prise en charge d'un grand nombre de types de champs tels que les zones de texte, les sélecteurs de date, les menus déroulants, les cases à cocher, etc.
Réarrangez ou supprimez les champs de la caisse principale de WooCommerce
Réorganisez les champs ou supprimez les champs inutiles si nécessaire.
Réglage des conditions d'affichage des champs
Affichez dynamiquement des champs spécifiques en fonction du contenu du produit, de la catégorie ou du panier.
Collecte d'informations supplémentaires sur les clients
Obtenez davantage d'informations sur les clients et optimisez les processus de gestion des commandes.
Validation intégrée des champs
Assurez-vous que l'utilisateur saisit les données correctes.

2) Compléments WooCommerce Checkout

WooCommerce Checkout Add-Ons Les extensions peuvent optimiser le processus de paiement en proposant des produits, des services ou des options supplémentaires avant que les clients ne finalisent leur achat.

L'outil permet d'ajouter des options gratuites ou payantes, ce qui permet une adaptation souple à différents modèles d'entreprise. L'interface conviviale facilite la configuration d'options telles que la personnalisation des produits ou l'assurance des biens de grande valeur.

fonction des touches

Ajouter des options complémentaires gratuites ou payantes
Offrez aux clients la possibilité de personnaliser leur expérience d'achat sur la page de paiement.
Augmenter les ventes
Proposez des éléments supplémentaires directement sur la page de paiement, de la personnalisation des produits à l'assurance des biens de grande valeur, afin d'inciter les clients à augmenter leurs achats.
Gestion et configuration simples
Gérez et configurez facilement des options supplémentaires à l'aide d'une interface simple, afin de garantir un processus de paiement fluide sans interrompre l'expérience du client.
Augmenter la valeur de la commande
Proposez des options supplémentaires en fonction des besoins du client afin d'augmenter la valeur de la commande et d'améliorer la satisfaction du client à la dernière étape du processus d'achat.

Personnalisation de la page de paiement de WooCommerce

1. utiliser les blocs panier et caisse de WooCommerce

Blocs panier et caisse de WooCommerce Les extensions sont l'un des moyens préférés pour personnaliser la page de paiement de WooCommerce.

Pour commencer

1. se rendre à Blocs WooCommerce cliquez sur "Téléchargement gratuit"Bouton.

2. suivez le guide pour compléter le processus de paiement (aucun frais n'est requis).

Points forts de la fonction

L'expérience de paiement peut être améliorée grâce à cette extension, qui comprend les fonctionnalités ci-dessous :

Configurez des options supplémentaires pour le produit.
Plusieurs méthodes de paiement sont prises en charge.
Proposer des options de paiement rapide, etc.

Marche à suivre pour remplacer les numéros abrégés

1) Allez dans l'interface d'administration de WordPress et ouvrez "page web"Partie.

2) Localisez et ouvrez la page de paiement du site web.

3. supprimer le code court de la caisse actuelle

4. rechercher "Bloc de caisse"ajoutez-la à la page.

Personnalisation des pages

1) Après avoir ajouté le bloc de paiement, vous pouvez prévisualiser la page de paiement basée sur le bloc sur la page.

2. utilisation du côté droitune barre latérale (dans un logiciel)Les options de réglage sont personnalisées :

Affichez ou masquez le numéro de l'étape de paiement.
Gérez la visibilité de champs spécifiques.

Configuration avancée des fonctionnalités

Configurez les options complémentaires payantes.
Permettez aux clients d'utiliser des bons de réduction ou d'ajouter des notes de commande.
Permettre plusieurs options de livraison.

2. personnaliser manuellement la page de paiement de WooCommerce

Pour personnaliser manuellement la page de paiement de WooCommerce, il faut modifier le code afin qu'il corresponde à la conception du site et aux exigences en matière de fonctionnalité.

Vous trouverez ci-dessous un guide étape par étape pour personnaliser manuellement la page de paiement de WooCommerce :

Étape 1 : Créer un thème enfant

Utilisez toujours un thème enfant avant d'effectuer des modifications. Modifier directement le noyau de WooCommerce ou les fichiers du thème est risqué car les mises à jour écrasent le code. La création d'un thème enfant préserve les paramètres personnalisés.

entrer dans wp-content/themes Catalogue.
Créez un nouveau dossier pour le thème enfant.
Ajouter un style.css et remplissez les informations nécessaires.
Ajouter un functions.php qui est utilisé pour appeler la feuille de style du thème parent.
Copiez depuis le répertoire du plugin WooCommerce form-checkout.php Fichiers de modèle dans le chemin du thème enfant du site woocommerce/templates/checkout/.

Le chemin devrait être :

votre-thème-enfant/woocommerce/checkout/

Modifiez les fichiers modèles copiés si nécessaire.

Voir l'article pour plus de détailsComment créer un thème enfant WordPress : un guide détaillé.

Étape 2 : Ajouter/supprimer des champs

L'ajout, la suppression ou la modification de champs dans le formulaire de caisse nécessite l'utilisation de la fonction functions.php en utilisant le fichier woocommerce_checkout_fields Le filtre fonctionne.

add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields') ;

function custom_override_checkout_fields($fields) {
    // Ajoutez un champ personnalisé
    $fields['billing']['billing_custom_field'] = array(
        'type' => 'text', 'label' => __(()
        'label' => __('Custom Field', 'woocommerce'),
        'placeholder' => _x('Entrez quelque chose ici...' , 'placeholder', 'woocommerce'), 'placeholder' => _x('Entrez quelque chose ici...'),
        
        'class' => array('form-row-wide'),
        'clear' => true, .
    ).

    // Supprimez un champ (par exemple, société de facturation)
    unset($fields['billing']['billing_company']) ; // Supprimez un champ (par exemple, la société de facturation).

    return $fields.
}

Étape 3 : Réorganiser les champs de fermeture

Si vous souhaitez réorganiser les champs de la page de paiement, vous pouvez le faire dans la section woocommerce_checkout_fields La priorité du champ est définie dans le filtre.

add_filter('woocommerce_checkout_fields', 'custom_reorder_checkout_fields') ;

function custom_reorder_checkout_fields($fields) {
    $fields['billing']['billing_phone']['priority'] = 10 ; // Déplace le champ téléphone vers le haut
    $fields['billing']['billing_email']['priority'] = 20 ; // Déplace le champ email vers le bas
    return $fields.
}

Étape 4 : Personnalisation du bouton de paiement

Cela peut être fait dans le functions.php Le fichier utilise le format woocommerce_order_button_html Filtre permettant de personnaliser le bouton de paiement :

add_filter('woocommerce_order_button_html', 'custom_woocommerce_order_button_html') ;

function custom_woocommerce_order_button_html() {
    $button_text = 'Place Order Now' ; // Texte du bouton personnalisé
    return '' ;
}

Cela modifiera le "passer une commande"Le texte du bouton est même stylisé.

Étape 5 : Personnaliser la mise en page de la page de paiement

Il est possible d'effectuer des opérations de démontage et de remontage dans le modèle de caisse de WooCommerce. Ajoutez le code suivant au site web functions.php Documentation :

remove_action('woocommerce_checkout_order_review', 'woocommerce_order_review', 10) ;
add_action('woocommerce_checkout_billing', 'woocommerce_order_review', 20) ;

En personnalisant le code ci-dessus, vous pouvez créer une page de paiement WooCommerce qui répond aux exigences de votre boutique.

Création d'une page unique de caisse pour WooCommerce

CartFlows est un plugin payant qui transforme le processus de paiement de WooCommerce en une expérience fluide d'une seule page.

CartFlows simplifie le processus d'achat en éliminant la nécessité pour les clients de passer par plusieurs pages pour finaliser leur achat. Cela réduit les taux d'abandon et incite les clients à passer rapidement à la caisse.

La beauté de CartFlows réside dans son interface conviviale de type "glisser-déposer" qui ne nécessite aucune compétence en matière de codage. Les pages de paiement peuvent être créées et gérées rapidement et intuitivement, ce qui rend l'utilisation facile pour les utilisateurs, quel que soit leur niveau de compétence.

Etapes pour créer une page unique de paiement WooCommerce

Étape 1 : Sélectionnez le modèle de caisse à page unique

Choisissez votre constructeur de pages préféré dans le menu des paramètres de CartFlows.

Étape 2 : Créer le processus

Naviguez jusqu'à CartFlows > Flux.

Étape 3 : Ajouter le constructeur de pages

Appuyez en haut de l'écran sur la touche Ajouter un nouveauPour afficher les modèles fournis par le constructeur de pages que vous avez sélectionné à l'étape 1.

Étape 4 : Ajouter le modèle à votre boutique WooCommerce

Parcourez la bibliothèque de modèles affichée à l'écran.
Filtrez ou recherchez des modèles à l'aide de mots-clés pertinents, ou créez un nouveau processus de paiement à partir de zéro.
Une fois que vous avez trouvé le modèle que vous souhaitez importer, passez la souris sur le modèle et cliquez sur le bouton Voir toutes les étapes.

Étape 5 : Importation de processus à partir de thèmes

frappe (sur le clavier) Flux d'importationLe processus d'importation dans CartFlows va commencer.
Une fois l'importation terminée, la page d'atterrissage est prête à être personnalisée !

Liez les produits directement à la page de paiement

Étape 1 : Installer le plugin Direct Checkout

Connectez-vous à l'interface d'administration de WordPress et naviguez jusqu'à Plugins > Installer des plugins.
Dans la barre de recherche située dans le coin supérieur droit, tapez Direct Checkout pour WooCommerce.
Une fois que vous avez trouvé le plugin, cliquez sur montage et activez le plug-in.

Étape 2 : Ouvrez les paramètres du plugin

Naviguez jusqu'à WooCommerce > Direct Checkout.

Étape 3 : Activez l'option "Redirection après l'ajout au panier".

commutateur à Général Tab.
activer Redirection de l'ajout au panier Options.
Dans le menu déroulant, sélectionnez Passer à la caisse.
frappe (sur le clavier) Enregistrer les modifications.

Étape 4 : Paramétrage de l'option "Rediriger vers le panier après l'ajout".

commutateur à Produits Tab.
commencer à utiliser Redirection vers la page du panier après un ajout réussi (成功添加后重定向到购物车页面) Options.
frappe (sur le clavier) Enregistrer les modifications.

Effets fonctionnels

Une fois l'installation terminée, les clients sauteront la page du panier et passeront directement de la page du produit à la page de paiement.

résumés

En personnalisant la page de paiement de WooCommerce et en ajoutant/supprimant des champs personnalisés, vous pouvez rendre l'ensemble du processus d'achat plus fluide et plus efficace, en offrant aux clients une meilleure expérience d'achat et en augmentant ainsi les chances de les amener à payer.

Questions fréquemment posées

Q : Comment activer les adresses de livraison dans WooCommerce ?

R : Allez sur WooCommerce → Paramètres → Distribution → Ajouter une zone de distribution. Plusieurs modes de livraison peuvent être ajoutés à la zone et seuls les clients situés dans cette zone verront ces options.

Q : Comment désactiver la livraison dans WooCommerce ?

R : Allez sur WooCommerce → Paramètres → Distribution → Sélectionnez votre zone de distributionet cliquez sur Entrée. Sous cette zone de distribution, vous pouvez voir l'option Activer/Désactiver.

Q : Quels sont les plugins disponibles pour personnaliser la page de paiement de WooCommerce ?

Réponse :WooCommerce Checkout Manager est un plugin de personnalisation et d'édition de formulaires de paiement conçu spécifiquement pour WooCommerce. Avec ce plugin, il est facile de supprimer, modifier ou réorganiser les champs de paiement de WooCommerce, ainsi que d'ajouter plus de 20 champs personnalisés à vos formulaires de facturation ou de livraison.

Q : Où puis-je trouver un modèle de caisse pour WooCommerce ?

R : Les modèles de pages de paiement de WooCommerce se trouvent dans le répertoire suivant :
\wp-content\plugins\woocommerce\templates\checkout
Ce modèle est le point d'entrée pour la personnalisation de la page de paiement de la boutique WooCommerce.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.