# Recréer un tunnel de commande en une page pour WooCommerce, sans extension > Le client perdait des clients entre la page panier et la page commande. Plutôt qu'une extension premium supplémentaire, quelques hooks ont suffi à fusionner les deux étapes. - Auteur : Clément Hadrot - Publié le : 2023-05-18 - Mis à jour le : 2023-05-18 - Catégorie : E-commerce - URL : https://wpmoderne.dev.wordpress-developpement.fr/ecommerce/recreer-tunnel-commande-une-page-sans-extension/ ## L’essentiel - L'ajout au panier redirige directement vers la page de commande - Le tableau du panier s'affiche modifiable en haut du formulaire - Aucune extension tierce, uniquement des hooks du cœur WooCommerce Les statistiques d'entonnoir du client, une boutique de compléments sportifs vendue essentiellement en achat impulsif, montraient une chute nette entre la page panier et la page de commande : près d'un visiteur sur trois abandonnait à cette étape précise. L'hypothèse retenue après quelques entretiens utilisateurs informels : le passage d'une page à l'autre, avec son propre temps de chargement, cassait l'élan d'achat sur des paniers souvent constitués d'un seul produit. La demande était claire : un parcours en une seule page, du panier jusqu'à la validation, sans passer par une extension de tunnel de commande premium dont le tarif mensuel ne se justifiait pas pour ce besoin précis, qui ne concernait que la fusion de deux écrans déjà fournis nativement par WooCommerce. ## Le problème posé simplement WooCommerce sépare par défaut la page panier (`[woocommerce_cart]`) et la page de commande (`[woocommerce_checkout]`), chacune sur son propre gabarit. Rien n'empêche techniquement de n'en garder qu'une, à condition de reproduire, sur la page de commande, l'essentiel de ce que propose la page panier : un tableau modifiable des articles, avec mise à jour des quantités sans rechargement complet de la page. ## Snippet commenté : rediriger et fusionner les deux étapes > L'essentiel à retenir : L'ajout au panier redirige directement vers la page de commande ; Le tableau du panier s'affiche modifiable en haut du formulaire ; Aucune extension tierce, uniquement des hooks du cœur WooCommerce La première partie consiste à rediriger tout ajout au panier directement vers la page de commande, plutôt que vers la page panier par défaut : ``` add_filter( 'woocommerce_add_to_cart_redirect', 'otc_rediriger_vers_commande' ); function otc_rediriger_vers_commande( $url ) { return wc_get_checkout_url(); } ``` Ensuite, il faut afficher le contenu du panier, modifiable, en tête du formulaire de commande. Le hook `woocommerce_before_checkout_form` est le bon endroit pour cela, en réutilisant le gabarit natif `cart/cart.php` plutôt qu'en le reconstruisant à la main : ``` add_action( 'woocommerce_before_checkout_form', 'otc_afficher_panier_modifiable', 5 ); function otc_afficher_panier_modifiable() { if ( WC()->cart->is_empty() ) { return; } echo '
'; wc_get_template( 'cart/cart.php' ); echo '
'; } ``` Ce gabarit intègre déjà, nativement, le formulaire de mise à jour des quantités et le lien de suppression d'un article, tous deux gérés en AJAX par WooCommerce dès lors que le script `wc-cart` reste chargé sur la page. Il suffit de s'assurer que ce script n'est pas retiré par erreur sur la page de commande, ce que fait par défaut un thème mal configuré qui limite l'enregistrement des scripts panier à la seule page panier détectée via `is_cart()`. ## Forcer le rechargement des totaux de commande après modification du panier Sans ajustement supplémentaire, la mise à jour d'une quantité dans le tableau panier ne rafraîchit pas automatiquement le récapitulatif de commande affiché plus bas sur la même page. Un petit script JavaScript, écouteur de l'événement `updated_cart_totals` déjà déclenché par WooCommerce, résout ce point : ``` jQuery( document.body ).on( 'updated_cart_totals', function () { jQuery( document.body ).trigger( 'update_checkout' ); } ); ``` L'événement `update_checkout`, lui, est écouté nativement par le script de commande de WooCommerce et déclenche un rafraîchissement AJAX du récapitulatif, sans recharger la page entière. ## Variante : masquer complètement l'ancienne page panier Une fois la fusion en place, la page panier historique devient inutile pour le parcours d'achat, mais certains liens internes ou externes peuvent encore y pointer. Plutôt que de la supprimer, une redirection permanente vers la page de commande évite de casser ces liens tout en simplifiant définitivement le parcours : ``` add_action( 'template_redirect', 'otc_rediriger_ancienne_page_panier' ); function otc_rediriger_ancienne_page_panier() { if ( is_cart() ) { wp_safe_redirect( wc_get_checkout_url(), 301 ); exit; } } ``` ## Variante : conserver un mini-récapitulatif discret pour les gros paniers Pour les commandes comportant de nombreuses références, certains clients ont exprimé le besoin de garder un aperçu synthétique du panier visible en permanence, sans repasser par le tableau complet. Une variante consiste à n'afficher le tableau intégral qu'en dessous d'un seuil de trois articles, et à basculer au-delà vers un résumé condensé (nombre d'articles, montant total), avec un lien d'ouverture d'une fenêtre modale reprenant le tableau complet uniquement sur demande. > Fusionner deux pages ne consiste presque jamais à tout réécrire : la plupart du temps, il s'agit de réutiliser les gabarits existants au bon endroit, avec les bons événements JavaScript déjà fournis par WooCommerce pour les faire parler entre eux. ## Résultat mesuré après un mois Le taux d'abandon entre l'ajout au panier et la validation de commande a diminué de façon nette dès les premières semaines suivant la mise en production de ce parcours fusionné, sans qu'aucune extension supplémentaire n'ait été nécessaire. Le coût de développement s'est limité à une demi-journée, gabarits existants réutilisés et scripts natifs de WooCommerce exploités plutôt que reconstruits, ce qui a évidemment pesé dans la décision de ne pas investir dans une extension de tunnel de commande premium pour ce besoin précis.