Comment personnaliser la page de paiement de la vitrine

Publié: 2020-10-29

Storefront Personnaliser la page de paiement Le processus de paiement dans n'importe quelle boutique en ligne est le plus important dans le parcours de l'acheteur. C'est parce que c'est la dernière chance que vous avez de convaincre les acheteurs de faire un achat. De plus, il convient de mentionner que de nombreux paniers d'achat sont abandonnés lorsque les utilisateurs changent d'avis à la dernière étape.

Storefront Personnaliser la page de paiement

Des facteurs tels que les frais d'expédition et les options de paiement sont la principale cause d'abandon de panier. Cependant, la page de paiement joue également un rôle énorme. Si le formulaire de paiement est trop compliqué ou prend beaucoup de temps à remplir, les clients peuvent l'acheter ailleurs. De plus, je recommande de supprimer les champs de paiement qui demandent des informations sensibles.

La meilleure façon d'optimiser le formulaire de paiement est d'avoir les champs obligatoires. Ils doivent être basés sur les besoins de votre entreprise et le public cible.

Cet article vous expliquera comment personnaliser la page de paiement pour répondre à votre public cible et aux besoins de votre entreprise.

Personnalisation des champs de paiement

La page de paiement demande aux clients :

Détails de la facturation
Prénom
Nom de famille
Nom de la compagnie
Pays
Adresse
Ville/Ville
Quartier
Code postal/ZIP
Téléphoner
Adresse e-mail
Notes d'ordre

La meilleure façon de personnaliser les champs de paiement consiste à utiliser des extraits de code. Pour voir toutes les classes et tous les sélecteurs, utilisez l'inspecteur de votre navigateur sur votre site Web pour trouver l'élément exact que vous souhaitez personnaliser.

 <body class="woocommerce-checkout">

<div class="woocommerce">

<form class="woocommerce-checkout">

<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="paiement">

<ul class="wc_payment_methods méthodes de paiement_methods">

<div class="form-row place-order">

Étapes pour modifier la couleur d'arrière-plan et la disposition des zones de saisie de texte et leur donner des coins arrondis

Voici les étapes simples que vous devez suivre :

Connectez-vous à votre site WordPress et accédez au tableau de bord en tant qu'utilisateur administrateur.
Dans le menu Tableau de bord, cliquez sur Menu Apparence > Personnaliser .
Accédez à CSS supplémentaire dans la barre latérale gauche qui apparaît.
Ajouter le CSS

 entrée[type="texte"] {

border-radius : 10px !important ;

couleur d'arrière-plan : aqua !important ;

}

Voici le résultat :
Pour modifier la disposition des champs, ajoutez le code CSS suivant :

 /****************VÉRIFIER***************/

formulaire .woocommerce .form-ligne {

largeur : 100 % !important ;

}

.woocommerce-checkout #payment div.payment_box input.input-text, .woocommerce-checkout #payment div.payment_box textarea {

largeur : 100 % !important ;

rembourrage : 8px ;

}

.woocommerce #paiement .form-row select, .woocommerce-page #paiement .form-row select {

largeur : 100 % ;

hauteur : 30px ;

}

.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1, .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {

flotteur : gauche ;

largeur : 100 % ;

}

.custom-checkout h3 {

couleur de fond : #165f1c ; /**** CHANGEZ LA COULEUR QUE VOUS VOULEZ UTILISER POUR LE FOND DU TITRE ****/

largeur : 45 % ;

aligner le texte : centrer ;

rembourrage : 10px ;

rayon de bordure : 5 px ;

marge supérieure : 50px ;

couleur : #FFF ;

Flotter à droite;

}

.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {

rembourrage : .6180469716em ;

couleur de fond : #f2f2f2 ;

couleur : #43454b ;

contour : 0 ;

bordure : 0 ;

-apparence webkit : aucune ;

rayon de bordure : 2 px ;

dimensionnement de la boîte : border-box ;

poids de la police : 400 ;

bordure : solide 2px #e4e4e4 ;

}

#wc_checkout_add_ons {

largeur : 45 % ;

Flotter à droite;

aligner le texte : centrer ;

}

Écran @media et (min-width : 980px) {

.woocommerce-shipping-fields h3, .woocommerce-billing-fields h3 {largeur : 100 % ;}

.woocommerce .col2-set, .woocommerce-page .col2-set {

largeur : 45 % ;

flotteur : gauche ;

}

.woocommerce-checkout-revoir-commande{

largeur : 45 % ;

Flotter à droite;

}

}

Écran @media et (largeur maximale : 979px) {

.custom-checkout h3 {

largeur : 100 % ;

}

}

Voici le résultat :

Étapes pour supprimer un champ de paiement

Voici les étapes que vous devez suivre :

Connectez-vous à votre site WordPress et accédez au tableau de bord en tant qu'utilisateur administrateur.
Dans le menu Dashboard, cliquez sur Appearance Menu > Theme Editor Menu . Lorsque la page de l'éditeur de thème est ouverte, recherchez le fichier de fonctions de thème pour supprimer le champ de paiement.
Ajoutez le code suivant au fichier php . Cependant, le fait de coller l' intégralité du code supprimera tous les champs de la page de paiement. Veillez donc à n'inclure que les champs que vous souhaitez supprimer .

 /**

Supprimer tous les champs possibles

**/

function wc_remove_checkout_fields( $fields ) {

// Champs de facturation

unset( $fields['billing']['billing_company'] );

unset( $fields['billing']['billing_email'] );

unset( $fields['billing']['billing_phone'] );

unset( $fields['billing']['billing_state'] );

unset( $fields['billing']['billing_first_name'] );

unset( $fields['billing']['billing_last_name'] );

unset( $fields['billing']['billing_address_1'] );

unset( $fields['billing']['billing_address_2'] );

unset( $fields['billing']['billing_city'] );

unset( $fields['billing']['billing_postcode'] );
// Champs d'expédition

unset( $fields['shipping']['shipping_company'] );

unset( $fields['shipping']['shipping_phone'] );

unset( $fields['shipping']['shipping_state'] );

unset( $fields['shipping']['shipping_first_name'] );

unset( $fields['shipping']['shipping_last_name'] );

unset( $fields['shipping']['shipping_address_1'] );

unset( $fields['shipping']['shipping_address_2'] );

unset( $fields['shipping']['shipping_city'] );

unset( $fields['shipping']['shipping_postcode'] );

// Ordonner les champs

unset( $fields['order']['order_comments'] );

renvoie $champs ;

}

add_filter( 'woocommerce_checkout_fields', 'wc_remove_checkout_fields' );

Il convient de mentionner que le champ du pays est obligatoire. Si vous supprimez ce champ, les commandes des clients ne pourront pas être exécutées. En effet, vous obtiendrez une erreur indiquant "Veuillez entrer une adresse pour continuer".

Étapes pour rendre un champ obligatoire non obligatoire

Dans cet exemple, je vais modifier le champ Billing Phone. Voici les étapes que vous devez suivre :

Connectez-vous à votre site WordPress et accédez au tableau de bord en tant qu'utilisateur administrateur.
Dans le menu Dashboard, cliquez sur Appearance Menu > Theme Editor Menu . Lorsque la page de l'éditeur de thème est ouverte, recherchez le fichier de fonctions de thème pour rendre un champ obligatoire non obligatoire.
Ajoutez le code suivant à la fonction. fichier php

 add_filter( 'woocommerce_billing_fields', 'wc_unrequire_wc_phone_field');

function wc_unrequire_wc_phone_field( $fields ) {

$fields['billing_phone']['required'] = false ;

renvoie $champs ;

}

Voici le résultat :

Étapes pour modifier les étiquettes et les espaces réservés des champs de saisie

Voici les étapes simples que vous devez suivre :

Connectez-vous à votre site WordPress et accédez au tableau de bord en tant qu'utilisateur administrateur.
Dans le menu Dashboard, cliquez sur Appearance Menu > Theme Editor Menu . Lorsque la page de l'éditeur de thème est ouverte, recherchez le fichier de fonctions de thème pour modifier les étiquettes et les espaces réservés des champs de saisie.
Ajoutez le code suivant au fichier php

 add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields');

fonction custom_override_checkout_fields($fields)

{

unset($fields['billing']['billing_address_2']);

$fields['billing']['billing_company']['placeholder'] = 'Nom de l'entreprise' ;

$fields['billing']['billing_company']['label'] = 'Nom de l'entreprise' ;

$fields['billing']['billing_first_name']['placeholder'] = 'Prénom' ;

$fields['shipping']['shipping_first_name']['placeholder'] = 'Prénom' ;

$fields['shipping']['shipping_last_name']['placeholder'] = 'Last Name';

$fields['shipping']['shipping_company']['placeholder'] = 'Nom de l'entreprise' ;

$fields['billing']['billing_last_name']['placeholder'] = 'Last Name';

$fields['billing']['billing_email']['placeholder'] = 'Adresse e-mail ';

$fields['billing']['billing_phone']['placeholder'] = 'Téléphone ';

renvoie $champs ;

}

Ce sera le résultat :

Conclusion

En résumé, j'ai partagé comment vous pouvez personnaliser les champs de paiement sur la page de paiement. L'optimisation de cette page est importante, car c'est la dernière chance que vous avez de convaincre les acheteurs de faire un achat.

De plus, vous devez collecter les informations dont vous avez besoin en fonction des besoins de l'entreprise et du public cible. Cela vous aidera à réduire les abandons de panier et à améliorer considérablement les ventes dans votre magasin.

Cependant, si vous ne pouvez pas modifier les extraits de code que j'ai partagés, veuillez engager un développeur afin de ne pas décomposer votre site.