Home » WooCommerce » Comment ajouter les liens Modifier le panier et Poursuivre les achats à la page de paiement de WooCommerce ?

Comment ajouter les liens Modifier le panier et Poursuivre les achats à la page de paiement de WooCommerce ?

Si vous avez un site de commerce électronique, vous savez probablement que le fait d’amener le client à la page de paiement n’est qu’à un clic de la mission accomplie – la vente du produit.

Mais il est toujours possible d’améliorer les choses, même si vous avez amené le client sur la bonne page. Que se passe-t-il si le client veut faire une modification dans son panier ? Et si vous pouviez lui donner un moyen facile de retourner dans la boutique et d’ajouter des articles ?

Aujourd’hui, je vais vous montrer deux façons super simples de rendre votre page de paiement WooCommerce plus facile à utiliser. Et cela pourrait même encourager vos clients à faire un autre achat. Voici ce que nous allons faire :

C’est parti !

Comment ajouter le lien Continuer les achats à la page de paiement de WooCommerce ?

C’est génial lorsque le client arrive sur la page de paiement. Mais vous savez ce qui est encore mieux ? Quand les clients font des commandes plus importantes. C’est pourquoi nous ajouterons le bouton Continuer les achats à la page de paiement de WooCommerce, pour nous assurer que le client a un moyen facile de voir tous vos produits dans un magasin. Comme ici :

woocommerce add continue shopping button in checkout page

Pour ajouter le bouton Continuer les achats, allez dans Apparence >> Editeur de fichier de thème ou Outils >> Editeur de fichier de thème dans votre panneau d’administration WordPress, et ouvrez le fichier functions.php sur la droite.

Une fois que vous êtes au bon endroit, ajoutez ce code au bas du fichier functions.php.

add_action( 'woocommerce_checkout_before_customer_details', 'continue_shopping_before_billing', 20 );
function continue_shopping_before_billing(){
    echo '<div class="checkout-continue-shopping">
		    <a href="'.get_home_url().'">Continue Shopping →</a>
	     </div>';
}

Ce code ajoute le lien Continuer les achats juste au-dessus de la section Détails de facturation dans la page de paiement WooCommerce. Exactement comme vous le voyez dans la capture d’écran ci-dessus. Le lien ramène le visiteur à la page d’accueil de votre boutique.

Si vous souhaitez créer un lien vers une autre page, vous pouvez remplacer l’attribut href du lien par n’importe quelle autre page de votre boutique WooCommerce. Par exemple :

<a href="https://yourstore.com/any-other-page">Continue Shopping →</a>

La seule chose qui reste à faire est de styliser le lien correctement – pour s’assurer qu’il s’intègre joliment à votre site Web. C’est pourquoi j’ai ajouté <div> et la classe .checkout-continue-shopping afin que vous puissiez le styliser comme vous le souhaitez. Par exemple :

.checkout-continue-shopping {
text-align: right; // to add button to right side of the page
}

.checkout-continue-shopping a { // add styling to the link
background: pink;
color: white;
padding: 6px 10px;
border-radius: 20px;
}

.checkout-continue-shopping a:hover { // change color of the text when customer hovers / puts mouse on the button
color: black;
}

Vous pouvez avoir besoin de changer les couleurs, ou d’ajouter votre propre style pour vous assurer qu’il s’intègre mieux à votre site Web.

P.S. Pour ajouter un CSS personnalisé à votre site WordPress, vous devez utiliser l’onglet Apparence >> Personnaliser >> CSS supplémentaire.

Il n’y a rien de plus ennuyeux dans une boutique en ligne que d’arriver à la page de paiement et de s’apercevoir que vous avez ajouté un mauvais produit ou une quantité incorrecte de produits. Dans ces situations, vous, en tant que propriétaire de magasin, devez permettre à votre client de résoudre le problème sans effort.

C’est pourquoi nous ajoutons un lien Modifier le panier à la page de paiement. Comme ici :

woocommerce edit cart link in checkout

Comme précédemment, allez dans Apparence >> Editeur de fichier de thème ou Outils >> Editeur de fichier de thème dans votre panneau d’administration WordPress, et ouvrez le fichier functions.php sur la droite. Ensuite, ajoutez ce code à la fin du fichier, et n’oubliez pas d’enregistrer les modifications :

add_action('woocommerce_checkout_before_order_review', 'checkout_cart_link');
function checkout_cart_link(){
    ?><div class="checkout-cart-link">
        <a href="<?php echo wc_get_cart_url(); ?>">Edit cart content →</a>
      </div>
    <?php
}

Encore une fois, comme dans l’exemple précédent, vous devrez peut-être ajouter un style CSS personnalisé dans le Customizer. Par exemple :

.checkout-cart-link {
   padding-buttom: 10px; // make some whitespace between product table and our link
}

.checkout-cart-link a {
   color: pink;
   font-size: 15px;
}

Voilà – ces deux liens dans la page de paiement devraient générer des commandes légèrement plus importantes dans votre boutique en ligne WooCommerce, et devraient améliorer l’expérience client de votre site de commerce électronique à long terme.

Best WordPress hosting 2024

Vous cherchez d’autres façons d’améliorer la page de paiement de WooCommerce ? Consultez également ces articles :

Fathom analytics - privacy focused cookie-free website analytics

Most popular tutorials


Get our latest WordPress news and special offers from RockSolidWP!

Only useful WordPress and WooCommerce tips and tricks and exclusive offers for our readers once a month. No marketing nonsense.

Looking for reliable yet affordable WordPress hosting?
Hostinger is the way to go!

Get 10% OFF by using code IMAKEITWORK