Accueil » Snippets WordPress » Ajouter un bouton « Continuer le shopping » sur la page Panier

Ajouter un bouton « Continuer le shopping » sur la page Panier

woocommerce snippet

De nombreux sites proposent à leurs clients de continuer leurs achats lorsqu’ils s’apprêtent à valider leur commande. On ne sait jamais, ils ont peut-être oublié quelque chose 😉 .

Et bien vous pouvez faire de meme sur votre boutique WooCommerce.

La page Panier ressemble à ça:

page panier woocommerce snippet

Nous allons donc rajouter un bouton « Continuer le shopping » renvoyant vers votre page boutique sous le bouton « Procéder à la commande »

Copiez-collez le code suivant dans le fichier functions.php de votre thème enfant :

/* Ajouter un bouton "Continuer le shopping" sur la page panier */

add_action( 'woocommerce_after_cart_totals', 'wpm_continue_shopping_button' );

function wpm_continue_shopping_button() {

	 // On récupère le lien de votre page boutique   
	 $shop_page_url = get_permalink( woocommerce_get_page_id( 'shop' ) );
 
	 // On ajoute notre bouton 
	echo '<div class="wpm-continue-shopping">';
	echo ' <a href="'.$shop_page_url.'" class="button wpm-shopping-button">Continuer le shopping</a>';
	echo '</div>';
}

Bien entendu, vous pouvez modifier le texte « Continuer le shopping » par celui que vous préférez.

Le bouton est maintenant présent sur la page panier :

bouton shopping woocommerce snippet

Vous avez par contre surement remarqué qu’il n’est pas de la même taille que celui du dessus. Qu’à cela ne tienne, on va rajouter un peu de CSS en ciblant la classe du bouton.

Copiez-collez le code suivant dans le fichier style.css de votre thème enfant:

/*CSS du bouton Continuer le Shopping */

.wpm-shopping-button{
	width:100%;
	text-align: center;
}

Et voila:

bouton final panier woocommerce

C’est quand même plus propre non ?

Source: Theme Location

Vous débutez ? Procurez-vous le Kit du Freelance WordPress

Trouver les bons clients, leur vendre des prestations et bien communiquer avec eux n'est pas inné. Évitez les galères et gagnez du temps en vous formant aux côtés de 7 professionnels aguerris.

Commencer maintenant

14 commentaires Ajoutez le vôtre

  1. Super merci Alex pour ce snippet !
    Par contre de mon coté le css ne fonctionne pas, j’ai beau chercher je n’ai pas encore trouvé de solution.

    Répondre
    • Salut. Ou as-tu collé le CSS?

  2. Salut Julien. Dans le fichier css du thème enfant.

    Répondre
  3. Merci pour ça, il y par contre un petit oubli dans le code que tu donnes. Tu as oublié le « e » à la class de div wpm-continu-shopping au lieu de wpm-continue-shopping

    Merci en tout cas !

    Répondre
    • Merci Charlotte je viens de corriger.

  4. Bonjour !
    Merci beaucoup pour ce tutoriel très efficace ! 🙂
    On trouve vraiment tout sur la Marmite !!

    Par contre, je n’arrive pas à mettre le bouton à la même taille que l’autre… J’ai essayé avec 100%, 80%, 85%, 90%, rien y fait, il est toujours soit trop grand, soit trop petit… 🙁
    Je l’ai bien copié dans le style.css de mon child.

    Avez-vous une astuce ? Merci !
    Noémie.

    Répondre
    • Bonjour, regarde le CSS de tes autres boutons avec l’inspecteur pour mettre le même à celui que tu dois styliser.

  5. Bonjour !
    Merci beaucoup pour ce tutoriel efficace !!
    On trouve tout sur la marmite ! 😉

    Par contre, je n’ai pas réussi à mettre le bouton à la même taille que l’autre…
    J’ai bien copié le code dans le style.css de mon child, j’ai essayé avec 100%, 80%, 90%, toujours trop grand ou trop petit… Je l’ai mis à 87%, ça passe à peu près…
    Une astuce ?

    Merci, Noémie.

    Répondre
  6. Bonjour

    Merci beaucoup pour cette astuce !
    Par contre, chez moi ça ne l’affiche pas sous forme de bouton (alors que « Passer commande est bien un bouton »). Il est juste en format texte.
    J’utilise le thème Shop Isle. Une idée de comment faire svp?

    De la même façon, le « Chechout with paypal », j’aimerai le mettre en français. Si vous le savez, je prends 🙂

    Merci encore

    Répondre
    • Salut, il faut simplement styliser le bouton avec un peu de CSS pour l’integrer Parfaitement à ton thème 😉

  7. Bonjour
    Encore moi, pour info pour supprimer le « paypal express check out » il suffit d’aller dans les réglages woocommerce et désactiver cette option 🙂
    Bon par contre, je ne comprends toujours pas pourquoi le continuer ne s’affiche pas en format bouton mais en format texte. Je crois que j’ai un problème de nom de class qui ne semble pas reconnue mais je ne sais pas où chercher…

    Merci pour votre aide !

    Répondre
  8. Merci Julien, je vais regarder ça !

    Répondre
  9. Merci les gars pour ces tutos !!!! vous faites vraiment du bien !!!
    j’ai une petite question, j’ai remarqué que tous vos boutons sont en francais  » proceder à la commande ,… » il y a pas mal de pluggins pour changer le texte mais je me demande s’il existe une méthode plus propre pour le faire ?
    comment avez vous procédé? des modifs dans le code ?
    Merci
    Cdlt,
    Ussa

    Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

La Marmite ne peut malheureusement pas fournir de support. Merci d'en tenir compte dans votre commentaire 😉

Si vous ne lui en voulez pas, donnez-lui un j'aime sur Facebook :



venenatis Aenean fringilla adipiscing id, ut venenatis, ut sed neque. risus leo.
Partagez
Tweetez
Partagez