WooCommerce : comment personnaliser le paiement pour les conversions

Publié: 2020-06-06

J'ai eu l'honneur de prendre la parole au WCEU 2020 grâce à WooCommerce, qui m'a hébergé dans leur parcours Sponsor. Il s'agissait d'un bref et doux exposé éclair le premier jour (vendredi), intitulé " Personnalisation de la caisse WooCommerce pour améliorer les conversions ", suivi d'une session de codage en direct le samedi.

Voici l'enregistrement vidéo du discours éclair, ainsi que quelques extraits PHP et CSS que vous pouvez copier/coller pour améliorer votre WooCommerce Checkout et vous attendre immédiatement à une augmentation du taux de conversion. Alors, profitez de la vidéo, puis allez tester les extraits que vous trouverez ci-dessous !

Vidéo : Personnaliser le paiement WooCommerce pour améliorer les conversions

Le WooCommerce Checkout est la page la plus importante de votre site Web. Ce qui signifie que vous devez l'optimiser.

Dans cette présentation, je jette un coup d'œil sur les sites Web de commerce électronique B2C à succès et je vois ce qu'ils font. Peut-être pouvons-nous identifier les tendances et les faiblesses et nous mettre au travail là-dessus.

Attention, des sous- titres sont disponibles. Cliquez simplement sur le bouton "CC" en bas à droite du lecteur vidéo.

10 extraits d'optimisation du taux de conversion de paiement PHP et CSS WooCommerce

Lors de la session de suivi, j'ai partagé mon écran et j'ai commencé à coder en direct ce que nous avons appris lors de la conférence éclair. En un mot, nous avons décidé d'agir sur les points suivants :

  1. Supprimez l'en-tête, la barre latérale et le pied de page afin qu'il n'y ait aucune distraction et que le client se concentre entièrement sur le seul appel à l'action restant : le bouton "PAYER"
  2. Déplacez le récapitulatif de la commande, la livraison et la sélection du mode de paiement vers la droite pour qu'ils soient toujours visibles
  3. Divisez la longue mise en page composée de la facturation, de l'expédition, des notes de commande, du formulaire de coupon, etc. en étapes visuelles
  4. Déplacez le formulaire de coupon vers le bas pour éviter la fraude par coupon
  5. Gardez le formulaire d'expédition toujours "ouvert" car c'est la section la plus importante pour B2C
  6. Déplacer le formulaire de facturation sous le formulaire d'expédition
  7. Supprimez les champs de facturation/expédition inutiles ; plus il y a de champs, plus votre taux de conversion est bas !
  8. Faites en sorte que la sélection de la méthode d'expédition se démarque davantage, car la mise en page par défaut est assez médiocre
  9. Ajoutez un lien "modifier le panier" afin que les utilisateurs puissent revenir à la page Panier et modifier leur commande
  10. Ajoutez des badges de sécurité / téléphone / FAQ pour permettre au client de faire confiance à votre entreprise en ligne

Mais avant de coder, regardons la pile d'outils.

Thème : J'ai utilisé le thème officiel de WooCommerce, Storefront. Cela vient déjà avec une personnalisation CSS intégrée pour le paiement. Un autre de mes favoris aurait pu être Shoptimizer, un thème conçu pour la vitesse et les conversions WooCommerce. Quoi qu'il en soit, comme l'un des extraits concerne la suppression de l'en-tête et du pied de page de la page de paiement, j'ai donc utilisé mon guide de crochet visuel du thème Storefront, afin de savoir quels crochets utiliser.

Crochets : en plus d'utiliser mon guide visuel des crochets pour Storefront, nous avons également besoin de connaître tous les crochets WooCommerce Checkout. Mon guide de crochet visuel WooCommerce pour la page de paiement est parfait pour ce dont nous avons besoin.

Docs : WooCommerce a un joli document qui explique comment personnaliser les champs de paiement. Dans l'un des extraits, nous supprimerons certains des champs de facturation/livraison, il s'agit donc d'une référence incontournable.

1. Extrait PHP : Supprimer l'en-tête, la barre latérale et le pied de page @ WooCommerce Checkout Page

Cet extrait est valable uniquement pour le thème Storefront . Vous devrez ajuster le code pour votre thème personnalisé. 

/**
 * @snippet       Storefront Theme Remove Header Footer @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'wp', 'bbloomer_unhook_storefront_functions' );

function bbloomer_unhook_storefront_functions() {
	if ( is_checkout() ) {
		remove_all_actions( 'storefront_header' );
		remove_action( 'storefront_before_content', 'woocommerce_breadcrumb', 10 );
		remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
		remove_action( 'storefront_footer', 'storefront_footer_widgets', 10 );
	}
}

Sur Storefront, une fois que vous avez supprimé la barre latérale avec l'appel remove_action ci-dessus, la mise en page ne s'ajustera pas automatiquement à la pleine largeur. La barre latérale disparaîtra mais son "espace" restera là et poussera le formulaire de paiement vers la gauche.

Cela signifie que nous avons également besoin d'un peu de CSS pour résoudre ce problème : 

@media (min-width: 768px) {
	.woocommerce-checkout.right-sidebar .content-area {
		width: 100%;
		float: none;
		margin-right: 0;
	}
}

Besoin d'une preuve visuelle ? Cliquez ici pour voir les captures d'écran de personnalisation de la page de paiement WooCommerce "avant" et "après".

2. Extrait CSS : Déplacer l'examen de la commande en haut à droite sur la page de paiement de WooCommerce

Le thème Storefront le fait déjà prêt à l'emploi ! Il semble donc qu'ils aient également étudié les tendances du commerce électronique et aient décidé que c'était le bon choix.

Bien sûr, la plupart des thèmes ne le font pas par défaut. Pour vous inspirer, vous pouvez essayer de copier le CSS de Storefront (vous devrez peut-être modifier certains sélecteurs) : 

@media (min-width: 768px) {

	/* Billing & Shipping @ Left */

	.col2-set {
		width: 52.9411764706%;
		float: left;
		margin-right: 5.8823529412%;
	}

	/* Order Review @ Right */

	#order_review_heading, #order_review {
		width: 41.1764705882%;
		float: right;
		margin-right: 0;
		clear: right;
	}

}

Maintenant, j'aimerais aussi faire en sorte que toute la révision de la commande soit "collante". Ce qui signifie qu'une fois qu'un utilisateur fait défiler vers le bas pour remplir les champs de paiement par exemple, la boîte de révision de la commande (maintenant en haut à droite) doit rester visible et "fixe" en haut du navigateur.

J'ai essayé le CSS suivant mais malheureusement cela ne semble pas fonctionner (thème Storefront). Pouvez-vous aider peut-être? 

#order_review {
    position: sticky;
    top: 0;
}

Besoin d'une preuve visuelle ? Cliquez ici pour voir les captures d'écran de personnalisation de la page de paiement WooCommerce "avant" et "après".

3. Extrait PHP : Déplacer le formulaire de coupon vers le bas @ Page de paiement WooCommerce

Nous pouvons utiliser le guide de crochet visuel pour la caisse pour cela. Tout d'abord, nous le supprimons, puis nous le lisons tout en bas. 

/**
 * @snippet       Move Coupon @ Checkout Bottom
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );

add_action( 'woocommerce_after_checkout_form', 'woocommerce_checkout_coupon_form', 10 );

Besoin d'une preuve visuelle ? Cliquez ici pour voir les captures d'écran de personnalisation de la page de paiement WooCommerce "avant" et "après".

4. Extrait PHP : Gardez le formulaire d'expédition toujours "ouvert" @ WooCommerce Checkout Page

Heureusement, si vous regardez le fichier de modèle form-shipping.php, WooCommerce nous donne un filtre ici : 

apply_filters( 'woocommerce_ship_to_different_address_checked', 'shipping' === get_option( 'woocommerce_ship_to_destination' ) ? 1 : 0 )

Ce qui signifie que je peux maintenant coder un simple extrait de code PHP pour remplacer ce comportement : 

/**
 * @snippet       Shipping Always Open @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_filter( 'woocommerce_ship_to_different_address_checked', 'bbloomer_open_shipping_checkout' );

function bbloomer_open_shipping_checkout() {
	return 1;
}

Besoin d'une preuve visuelle ? Cliquez ici pour voir les captures d'écran de personnalisation de la page de paiement WooCommerce "avant" et "après".

5. Extrait CSS : Déplacez le formulaire de facturation sous le formulaire d'expédition @ WooCommerce Checkout Page

Tout d'abord, les formulaires de facturation et d'expédition doivent être en pleine largeur. Le thème Storefront le fait déjà, donc si vous utilisez un autre thème, essayez ceci : 

.col2-set .col-1, .col2-set .col-2 {
	float:none;
	width: 100%
	margin: 0;
}

Une fois que vous avez la facturation et l'expédition l'une au-dessus de l'autre, nous voulons maintenant présenter le formulaire d'expédition en premier (en haut) et le formulaire de facturation après (en bas). Faire cela avec PHP est possible, mais il existe un moyen beaucoup plus simple de le faire : CSS flex . 

.col2-set {
    display: flex;
    flex-direction: column;
}

.col2-set > .col-1 {
	order: 2; 
}

.col2-set > .col-2 {
	order: 1; 
}

En un mot, je déclare que les détails du client (emballage des formulaires de facturation et d'expédition) s'affichent comme "flex". De cette façon, je peux utiliser la propriété "order" et changer l'ordre vertical des divs Billing et Shipping.

Besoin d'une preuve visuelle ? Cliquez ici pour voir les captures d'écran de personnalisation de la page de paiement WooCommerce "avant" et "après".

6. PHP Snippet: Divisez la longue mise en page composée de la facturation, de l'expédition et de la révision des commandes en étapes visuelles @ WooCommerce Checkout Page

Ici, nous utilisons à nouveau le guide visuel du crochet et imprimons 3 nouvelles divs dans des positions spécifiques (au-dessus de l'expédition, au-dessus de la facturation, au-dessus de l'examen de la commande). 

/**
 * @snippet       Add Visual Steps @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'woocommerce_checkout_shipping', 'bbloomer_checkout_step1' );

function bbloomer_checkout_step1() {
	echo '<p class="steps">STEP1</p>';
}

add_action( 'woocommerce_checkout_billing', 'bbloomer_checkout_step2' );

function bbloomer_checkout_step2() {
	echo '<p class="steps">STEP2</p>';
}

add_action( 'woocommerce_checkout_before_order_review_heading', 'bbloomer_checkout_step3' );

function bbloomer_checkout_step3() {
	echo '<p class="steps">STEP3</p>';
}

Bien sûr, nous avons également besoin de CSS : 

.steps {
	background: black;
	color: white;
	display: inline-block;
	padding: 0.5em 2em;
}

Besoin d'une preuve visuelle ? Cliquez ici pour voir les captures d'écran de personnalisation de la page de paiement WooCommerce "avant" et "après".

7. Extrait PHP : Supprimez les champs de facturation/expédition inutiles sur la page de paiement WooCommerce

Ici, la référence de documentation que j'ai partagée ci-dessus vient à la rescousse. Le filtre « woocommerce_checkout_fields » nous permet de « désactiver » les champs dont nous n'avons pas besoin. 

/**
 * @snippet       Remove Ship/Bill Fields @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

function custom_override_checkout_fields( $fields ) {
	
     unset( 
		 $fields['order']['order_comments'], 
		 $fields['shipping']['shipping_company'],
		 $fields['shipping']['shipping_address_2'],
		 $fields['billing']['billing_company'],
		 $fields['billing']['billing_address_2'],
		 $fields['billing']['billing_postcode'],
		 $fields['billing']['billing_phone']
     );

     return $fields;
}

Besoin d'une preuve visuelle ? Cliquez ici pour voir les captures d'écran de personnalisation de la page de paiement WooCommerce "avant" et "après".

8. PHP Snippet (Idea): Faites en sorte que la sélection de la méthode d'expédition se démarque davantage @ WooCommerce Checkout Page

C'est l'extrait le plus difficile, et c'est parce que WooCommerce n'est pas vraiment flexible à cet égard. Pour le démontrer, nous devons d'abord savoir comment le formulaire de méthode d'expédition est généré.

Dans le modèle de « révision de commande » de la caisse, nous trouvons ce PHP : 

<?php if ( WC()->cart->needs_shipping() && WC()->cart->show_shipping() ) : ?>

   <?php do_action( 'woocommerce_review_order_before_shipping' ); ?>

   <?php wc_cart_totals_shipping_html(); ?>

   <?php do_action( 'woocommerce_review_order_after_shipping' ); ?>

<?php endif; ?>

Il est évident que nous devons étudier le fonctionnement de la fonction wc_cart_totals_shipping_html() , pour voir s'il existe des filtres qui nous permettent de personnaliser la sortie.

Malheureusement, cette fonction appelle simplement le fichier modèle cart-shipping.php grâce à la fonction wc_get_template() ; Je dis malheureusement parce que ce même modèle est également utilisé sur la page Panier.

Maintenant, cela devient plus compliqué que moi, mais si nous souhaitons retirer le formulaire de méthode d'expédition de cette table de révision des commandes, nous devons essentiellement écrire ou posséder un modèle personnalisé (par exemple checkout-shipping.php), placez-le dans le / dossier woocommerce de notre thème enfant, puis utilisez le filtre wc_get_template pour charger notre modèle alternatif sur la page de paiement uniquement. Un peu complexe, mais faisable - je vous laisse le soin de le faire

Besoin d'une preuve visuelle ? Cliquez ici pour voir les captures d'écran de personnalisation de la page de paiement WooCommerce "avant" et "après".

9. Extrait PHP : Ajoutez un lien "Modifier le panier" @ WooCommerce Checkout Page

Étant donné que nous avons supprimé tous les liens de la page de paiement, il est juste de donner à l'utilisateur la possibilité de revenir à la page du panier au cas où il souhaite modifier les quantités ou supprimer des produits.

Vous pouvez choisir n'importe quel crochet WooCommerce Checkout, mais dans ce cas, j'ai sélectionné celui "woocommerce_checkout_before_order_review", qui est positionné juste en dessous de l'en-tête "Votre commande". 

/**
 * @snippet       Add edit cart link @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'woocommerce_checkout_before_order_review', 'bbloomer_edit_cart_checkout' );

function bbloomer_edit_cart_checkout() {
	echo '<a href="' . wc_get_cart_url() . '">Edit Cart</a>';
}

Avec un peu de CSS, vous pouvez également le positionner sur la même ligne que "Votre commande" et économiser de l'espace.

Besoin d'une preuve visuelle ? Cliquez ici pour voir les captures d'écran de personnalisation de la page de paiement WooCommerce "avant" et "après".

10. Extrait PHP : Ajoutez un numéro de téléphone à la page de paiement WooCommerce

Vous pouvez ajouter le contenu de votre choix à la page de paiement, principalement si cela aide les clients potentiels à faire confiance à votre entreprise.

Habituellement, vous ajouterez des badges de paiement sécurisés, une FAQ ou des liens de contact, ainsi qu'un moyen immédiat d'entrer en contact avec vous (chat en direct et numéro de téléphone).

Voici donc comment ajouter un numéro de téléphone juste en dessous du bouton "PASSER COMMANDE" sur la page de paiement. 

/**
 * @snippet       Phone Number @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'woocommerce_review_order_after_submit', 'bloomer_phone_checkout_page' );

function bloomer_phone_checkout_page() {
	?>
	<p>Need help? Give us a call at <a href="tel:1123456789">+1 123456789</a></p>
	<?php
}

Besoin d'une preuve visuelle ? Cliquez ici pour voir les captures d'écran de personnalisation de la page de paiement WooCommerce "avant" et "après".

Personnalisation de la page de paiement WooCommerce : captures d'écran « avant » et « après »

Avant de

La page de paiement WooCommerce (thème Storefront) AVANT d'appliquer les extraits 1-> 10.

Après

Ceci est la page de paiement WooCommerce APRÈS avoir appliqué les extraits 1-> 10. Comme vous pouvez le voir, nous avons réalisé une disposition de paiement sécurisée, axée sur le B2C, orientée vers l'expédition et sans distraction.