Comment mettre le panier WooCommerce et le paiement sur une seule page

Publié: 2020-09-21

Mettez le panier WooCommerce et le paiement sur une seule page

Dans ce bref tutoriel, je partagerai une solution sur la façon dont vous pouvez mettre le panier WooCommerce et le paiement sur une seule page. Cela optimiserait grandement le processus de paiement et ferait gagner beaucoup de temps aux clients, car ils n'attendent pas qu'une autre page se charge. Cette solution peut être utilisée si vous souhaitez économiser une étape supplémentaire, notamment sur les produits à prix fort qui sont vendus environ un produit par commande.

Panier WooCommerce et paiement sur une seule page

Les clients qui achètent régulièrement en ligne ont toujours besoin d'un processus de paiement rapide. Ils peuvent opter pour une autre boutique si la vitesse de chargement est faible ou s'ils sont redirigés vers d'autres pages avant d'effectuer un paiement. La principale raison pour laquelle de nombreuses personnes utilisent WooCommerce pour leur boutique en ligne est qu'il vous permet de la modifier.

Le processus de paiement par défaut dans WooCommerce comporte deux pages distinctes pour le panier et le paiement. Je veux illustrer comment vous pouvez mettre le panier et le paiement WooCommerce sur une seule page pour améliorer l'expérience utilisateur et augmenter vos conversions.

Ce sera votre guide ultime, car il existe un mélange de codes abrégés, de paramètres et d'extraits PHP, que vous pouvez utiliser pour que cela fonctionne. Cela peut sembler un peu compliqué, mais si vous suivez scrupuleusement les étapes que je suis sur le point de partager, vous trouverez cela plus facile que vous ne le pensez.

La raison principale en est qu'un processus de paiement en plusieurs étapes est plus susceptible d'avoir des problèmes d'abandon de panier, améliorant ainsi les ventes dans votre boutique WooCommerce.

Cela dit, voici un guide étape par étape facile pour mettre le panier et le paiement sur la même page. De plus, vous pouvez décider de faire des tests et un suivi WooCommerce, pour voir si le taux de conversion est meilleur.

Étapes pour mettre le panier WooCommerce et le paiement sur une seule page

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 où nous ajouterons la fonction qui mettra le panier et la caisse sur une seule page.
Ajoutez le code suivant à la fin du fichier php . Cela signifie que nous devons ajouter le shortcode "woocommerce_cart" à la page de paiement. N'oubliez pas de sauvegarder les modifications :

 /**

 * Afficher le panier sur la page de paiement uniquement - WooCommerce

*/

add_action( 'woocommerce_before_checkout_form', 'njengah_cart_on_checkout_page_only', 5 );

function njengah_cart_on_checkout_page_only() {

if ( is_wc_endpoint_url( 'order-received' ) ) return;

echo do_shortcode('[woocommerce_cart]');

}

Pour voir le résultat, actualisez simplement la page de paiement et vous devriez voir ceci :

Il convient de mentionner que si vous êtes familier avec la mise en page du panier, vous connaissez peut-être la section Totaux du panier . Ce morceau de code soigné que j'ai partagé masque automatiquement les totaux à cause des deux codes abrégés sur la même page. C'est une fonctionnalité intéressante.

Le shortcode seul fait l'affaire mais si vous faites un peu d'examen minutieux, vous constaterez que la page du panier apparaît toujours comme un fichier . De plus, le panier est vidé sur la page de paiement et WooCommerce redirigera les utilisateurs vers la page du panier et affichera le message de panier vide. Cela signifie que quelques ajustements doivent être faits pour changer cela. Vous devez vous débarrasser complètement de la page Panier afin que les utilisateurs ne la voient jamais.

Sur votre tableau de bord WordPress, cliquez sur WooCommerce > Paramètres. Sur la page des paramètres, cliquez sur l' onglet Avancé , puis cliquez simplement sur le petit « x » et sur Enregistrer les modifications comme indiqué :

Après cela, vous devez supprimer la page Panier . Ceci parce qu'il n'est plus utile et que les redirections sont déjà en place et que votre tableau de panier est déjà sur la page de paiement.
Cependant, si vous souhaitez rediriger une page de paiement vide si les utilisateurs y accèdent directement ou lorsque la table du panier est vidée , voici un petit extrait pour vous. Cela vous aidera à rediriger la page de paiement vide vers la page d'accueil.

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 du thème où nous ajouterons la fonction qui redirigera la page de paiement vide vers la page d'accueil.

Ajoutez le code suivant à la fin du fichier php .

 /**

* Rediriger le panier vide/la caisse - WooCommerce

*/




add_action( 'template_redirect', 'njengah_redirect_empty_cart_checkout_to_home' );

function njengah_redirect_empty_cart_checkout_to_home() {

if ( is_cart() && is_checkout() && 0 == WC()->cart->get_cart_contents_count() && ! is_wc_endpoint_url( 'order-pay' ) && ! is_wc_endpoint_url( 'order-received' ) ) {

wp_safe_redirect( home_url() );

sortir;

}

}

Pour voir le résultat, supprimez tous les produits du panier et vous serez redirigé vers la page d'accueil comme indiqué :

Conclusion

C'est ça! Vous disposez maintenant d'un processus de paiement optimisé et vous n'avez plus à vous soucier des problèmes d'abandon de panier dans votre boutique WooCommerce. Dans le premier extrait, j'ai ajouté le shortcode "woocommerce_cart" à la page de paiement, pour ajouter le tableau du panier en haut et le formulaire de paiement en dessous. Cependant, il est important de noter que vous devez vous débarrasser complètement de la page Panier afin que les utilisateurs ne la voient jamais.

De plus, j'ai ajouté un extrait de code PHP bonus qui vous aidera à rediriger une caisse vide. J'espère que ce bref article a fourni une solution sur la façon dont vous pouvez mettre un panier WooCommerce et un paiement sur une seule page.

Comment mettre le panier WooCommerce et le paiement sur une seule page

Panier WooCommerce et paiement sur une seule page

Étapes pour mettre le panier WooCommerce et le paiement sur une seule page

Conclusion

Articles similaires