Comment éditer et personnaliser les pages de paiement de WooCommerce

Pourquoi créer des pages de paiement WooCommerce personnalisées ?

Il est essentiel de veiller à ce que le processus de paiement soit fluide et sans tracas pour améliorer l'expérience d'achat. Un moyen simple et direct d'y parvenir est de rationaliser le processus de paiement afin que les acheteurs puissent terminer leur commande rapidement.

Non seulement cela, mais la personnalisation de votre page de paiement WooCommerce peut être une stratégie marketing intelligente. Par exemple, vous pouvez améliorer vos produits en recueillant des informations détaillées sur vos clients afin de mieux les connaître.

Profitez également de l'occasion pour faire de la vente incitative et de la vente croisée, c'est-à-dire recommander aux clients d'acheter d'autres articles ou d'autres produits liés à l'article en cours, ce qui peut contribuer à augmenter le montant moyen par commande. Vous pouvez également recommander des produits connexes ou proposer des services supplémentaires tels qu'une assurance ou un emballage cadeau.

Comment modifier les champs de la caisse de WooCommerce

Un moyen efficace de définir la page de paiement est de modifier les champs de paiement de WooCommerce. Cela permettra de rationaliser le processus pour les acheteurs et de faciliter la finalisation de leurs commandes.

Par défaut, la page de paiement de WooCommerce propose un ensemble de champs utiles. Il s'agit des champs suivantsPrénom, nom, adresse électronique, numéro de téléphone, nom de l'entreprise, ville.etc.

Pas tant que cela s'il s'agit principalement de commerce de détail"Nom de l'entrepriseChamps. De même, si un cadeau ou une réduction est offert à un client le jour de son anniversaire, ajoutez le champla date de naissanceChamps. Il existe d'autres façons de personnaliser les champs de WooCommerce. Vous pouvez appliquer de nouvelles couleurs, redimensionner les champs ou modifier le texte des espaces réservés. En supprimant les champs inutiles et en configurant des champs obligatoires qui doivent être remplis avant que le client ne poursuive sa commande, vous pouvez accélérer le passage à la caisse et réduire le nombre de commandes perdues.

Modifier les extensions de champs de caisse de WooCommerce

La manière la plus simple de modifier les champs de paiement de WooCommerce est d'utiliser une extension. De nombreux outils sont disponibles.

Éditeur de champs de caisseest une extension WooCommerce avancée qui optimise la page de paiement en ajoutant, supprimant ou modifiant des champs.

Vous ne pouvez pas supprimer les champs essentiels, mais vous pouvez les déplacer. Cela vous permettra de mieux contrôler le processus de paiement.

Si vous gérez un grand magasin, un plugin plus complexe est nécessaire, par exempleWooCommerce Checkout Add-Ons.

Cet outil permet d'insérer des compléments gratuits (ou payants) à l'étape de la commande. Par exemple, les clients peuvent ajouter des informations à leurs commandes. Il peut également proposer des services d'emballage de cadeaux et d'assurance. Il peut même donner aux clients la possibilité de laisser un pourboire.

Le module complémentaire offre une flexibilité totale dans la gestion des champs de WooCommerce. Il est possible de créer des compléments conditionnels, d'ajouter des coûts fixes ou basés sur des pourcentages et de mettre à jour dynamiquement les totaux des commandes. En outre, l'outil prend en charge les commandes d'abonnement et de renouvellement WooCommerce.

Comment personnaliser la page de paiement de WooCommerce

Avec une certaine compréhension des champs de paiement de WooCommerce, nous allons examiner trois façons de personnaliser la page de paiement.

1) Utilisation du panier d'achat WooCommerce et du bloc de paiement

La première façon de personnaliser la page de paiement de WooCommerce est d'utiliser l'optionBlocs Woo Cart et CheckoutExtension. Cet outil est entièrement gratuit.

localiserBlocs WooCommerceet cliquez surTéléchargement gratuitPrêt à partir.

Le système vous guide ensuite tout au long de la procédure de paiement (bien qu'il n'y ait pas de frais à payer).

Ces blocs permettent de personnaliser l'expérience de paiement de différentes manières. Vous pouvez configurer des modules complémentaires pour les produits, accepter plusieurs méthodes de paiement, proposer des options de paiement rapide, etc.

prenez noteLes blocs panier et caisse ne sont disponibles que pour les sites WordPress 6.9 ou ultérieurs. Il est également nécessaire de remplacer les shortcodes existants sur les pages du panier d'achat et de la caisse.

Tout d'abord, accédez au tableau de bord dans l'applicationPage et ouvrir la caissePage. Ici, le shortcode de la caisse peut être supprimé

.

Ensuite, recherchezbloc caisseet l'ajouter à la page. Vous devriez maintenant voir un aperçu du panier basé sur des blocs, qui peut être personnalisé à l'aide des paramètres de la barre latérale.

La page de paiement peut désormais être personnalisée. Vous pouvez afficher/masquer les numéros des étapes de paiement, afficher/masquer certains champs, et utiliser les paramètres du bloc pour définir le format de la page de paiement.Le champ téléphone est rendu obligatoire.

En outre, des modules complémentaires payants peuvent être configurés pour permettre aux acheteurs d'appliquer des coupons ou des notes aux commandes, d'activer plusieurs options de livraison, etc.

2. personnaliser la page de paiement avec les extensions WooCommerce

WooCommerce Blocks offre un moyen facile de personnaliser votre page de paiement, ou vous pouvez utiliser diverses extensions WooCommerce pour commencer. Jetons un coup d'œil à quelques options.

Faire des recommandations sur les produits

L'un des meilleurs moyens d'augmenter le nombre moyen de commandes est de recommander des produits sur la page de paiement.Recommandation de produitLes extensions facilitent grandement les choses.

La vente croisée peut se faire sous des titres accrocheurs tels que "Achetez souvent ensemble" ou "Vous aimerez peut-être aussi".

On peut égalementVente incitative de produits pour augmenter la valeur des commandes. Des recommandations de produits peuvent être affichées dans l'ensemble du magasin, notammentpage de produit uniqueet la page de confirmation de la commande. 

Activer les adresses de livraison multiples

Une autre façon de personnaliser la page de paiement de WooCommerce est d'activer les adresses de livraison multiples. Parfois, les clients commandent plusieurs produits qui doivent être expédiés à des adresses différentes (par exemple, l'adresse du domicile et celle du lieu de travail).

En outre, certains clients préfèrent acheter des cadeaux et les envoyer directement à leurs amis et à leur famille. Sans cette option, les clients devraient passer des commandes distinctes pour chaque adresse de livraison, ce qui peut prendre beaucoup de temps.

Vous pouvez utiliser le"Envois à des adresses multiples"pour fournir cette fonctionnalité.

Les clients peuvent demander l'envoi d'un nombre illimité de produits à un nombre illimité d'adresses. En outre, ils peuvent enregistrer toutes ces adresses d'expédition dans leur compte. Après avoir acheté cette extension, il vous suffit de l'installer sur votre site WordPress et d'activer les méthodes d'expédition multiples.

Laisser le client choisir la date de livraison

Un bon moyen pour les magasins de gagner en compétitivité est de permettre aux clients de choisir la date de livraison de leur commande. Cela peut accroître la satisfaction globale des clients, car vous êtes prêt à faire un effort supplémentaire.

utiliserWooCommerce Order DeliveryExtension pour limiter le nombre d'ordres par jour afin de s'assurer que tous les ordres peuvent être traités dans un délai déterminé.

Les clients peuvent se voir proposer une liste de dates de livraison possibles en fonction des jours fériés, des méthodes de livraison et d'autres facteurs.

Après avoir acheté et installé cette extension dans WooCommerce, il est possible d'afficher le sélecteur de date de livraison dans le formulaire de paiement. Il est possible de déterminer la période de temps, de définir la plage de livraison et de facturer des frais supplémentaires si le client sélectionne une date/heure spécifique.

3. la personnalisation manuelle de la page de paiement

Il est également possible de modifier manuellement la page de paiement. C'est la meilleure option si vous êtes familier avec le fonctionnement du code. 

Si vous modifiez directement les fichiers du site, il est préférable de créer un thème enfant. Sinon, toutes les modifications apportées seront perdues lors du changement de thème ou même de la mise à jour du thème parent actuel. Remarque : n'oubliez pas de sauvegarder vos données!

Le plugin crée automatiquement des sauvegardes en direct qui sont stockées en toute sécurité dans le Jetpack Cloud. Mieux encore, VaultPress Backup est conçu pour les sites WordPress et WooCommerce, ce qui signifie qu'il peut sauvegarder des fichiers, des bases de données et des données clients.

Modifier le design visuel des pages de paiement de WooCommerce avec CSS

Pour modifier manuellement un champ WooCommerce, utilisez d'abord l'outil Inspecter dans votre navigateur pour déterminer la zone spécifique à personnaliser. Ensuite, il est temps d'appliquer les modifications au thème.

Vous trouverez ci-dessous une liste des principales balises (classe et ID) pour les pages de paiement modifiables :

<body class="woocommerce-checkout">
<div class="woocommerce">
<form class="woocommerce-checkout" action="">
<div id="customer_details" class="col2-set">
<div class="woocommerce-billing-fields">
<p class="form-row">
<div class="woocommerce-shipping-fields">
<p class="form-row">
<div class="woocommerce-additional-fields">
<div id="order_review" class="woocommerce-checkout-review-order">
<table class="woocommerce-checkout-review-order-table">
<div id="payment">
<ul class="wc_payment_methods payment_methods methods">
<div class="form-row place-order"><input type="hidden" name="trp-form-language" value="fr"/>

Supposons que vous souhaitiez modifier la couleur d'arrière-plan de la boîte de saisie. Dans ce cas, l'extrait de code suivant peut être utilisé :

.woocommerce-checkout input[type="text"] {
     couleur de fond : #222 ;
}

Si vous souhaitez supprimer un champ de la page de paiement, par exemple"Factures".en partie"Nom de l'entreprise. Dans ce cas, l'extrait de code suivant doit être ajouté au fichierfunctions.phppapiersAu milieu.

function wc_remove_checkout_fields( $fields ) {
    unset( $fields['billing']['billing_company'] ) ; }
    return $fields.
}

add_filter('woocommerce_checkout_fields', 'wc_remove_checkout_fields' ) ;

N'oubliez pas d'enregistrer les modifications lorsque vous êtes prêt.

résumés

Bien que WooCommerce fournisse une page de paiement intégrée, il y a encore de nombreuses façons d'améliorer la page pour augmenter les ventes et configurer des options de paiement utiles. Par exemple, il est possible d'activer plusieurs adresses de livraison, de rendre certains champs obligatoires ou de proposer un emballage cadeau. Il existe trois façons d'éditer et de personnaliser les pages de WooCommerce Checkout : en utilisant la fonctionPanier d'achat et caisse WooCommerceEn cas de blocage, utilisez l'extension WooCommerce pour personnaliser manuellement la page de paiement à l'aide d'un code.

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.