click and collect
Icons made by Freepik from www.flaticon.com

Avec le retour du confinement et l’obligation de fermer boutique, beaucoup de commerçants se retrouvent dans une situation très délicate financièrement. Il existe toutefois un moyen très simple à mettre en œuvre pour ceux qui ont déjà un site web réalisé sous WordPress et qui utilisent WooCommerce, l’extension e-commerce mise en place par près de 4 millions de sites dans le monde [1].

WooCommerce permet de présenter un catalogue de produits que l’on peut ou non proposer à la vente en ligne. Et je vais vous montrer comment ajouter simplement la possibilité de faire du “click and collect”, c’est-à-dire de la vente à emporter, depuis ce catalogue, soit comme méthode supplémentaire, soit comme seule méthode de vente.

La partie spécifiquement WooCommerce

Si vous n’avez pas encore configuré WooCommerce pour vendre en ligne, commençons par définir une zone géographique [2] dans “WooCommerce > Réglages > Général” :

Configurer “Où vendre” dans les réglages généraux de WooCommerce

Il faut ensuite configurer un mode de paiement. Il est tout à fait possible d’utiliser un mode de paiement en ligne mais, pour faire simple, nous allons proposer un règlement au comptant lors du retrait de la commande en magasin [3] dans “WooCommerce > Réglages > Paiements” :

Choix du mode de paiement

Cliquez sur le bouton “Configuration” à droite pour modifier les informations que le client verra figurer sur son panier d’achat :

Configurer le mode de paiement “à la livraison”

Il nous reste encore à configurer la méthode “d’expédition” [4], qui sera un retrait en boutique, dans “WooCommerce > Réglages > Expédition” :

Ajout d’une zone de livraison

Nous ajoutons une “zone de livraison” qui correspondra au point de vente, c’est-à-dire notre magasin :

Création de la zone “Point de vente”

Nous ajoutons ensuite une “méthode de livraison”, c’est à dire le retrait sur le “point de vente” :

Une nouvelle méthode de livraison

Le mode d’expédition est maintenant créé :

Édition du mode d’expédition

Et nous l’explicitons pour l’internaute :

Modification du nom du mode d’expédition

Vous pouvez même repréciser dans ce champ l’adresse de la boutique par exemple : “Commande à venir retirer à la boutique 15 Rue Vital Carles à Bordeaux”.

Voila pour la partie de l’installation du “click and collect” sur WooCommerce.

La partie gestion du ramassage des commandes

Nous allons maintenant nous occuper de la prise de rendez-vous pour que l’internaute puisse passer récupérer sa commande à la boutique. L’objectif est qu’en tant que vendeur vous allez définir les créneaux horaires auxquels vous êtes disponible pour recevoir vos clients, ainsi que la fréquence à laquelle vous souhaitez que les visites s’enchainent. Il existe plusieurs extensions qui proposent d’ajouter ce type de fonctionnalité à votre boutique. WooCommerce Local Pickup Time Select est une extension gratuite qui me semble parfaitement adaptée pour atteindre cet objectif. Nous allons donc commencer par l’installer :

Après l’avoir activé, rendez-vous sur la page des réglages généraux de WooCommerce pour la configurer. Vous pourrez choisir les jours et les heures auxquels vous souhaitez ouvrir la boutique au ramassage des commandes :

Configuration des jours et heures de ramassage

Vous pouvez ensuite préciser les jours de fermeture exceptionnels, le délai de disponibilité, le nombre de jours de mise à disposition ainsi que l’intervalle de temps entre chaque ramassage :

Plus d’options de configuration…

Le résultat sur votre page de commande

Et voici donc ce que ça donne sur la page de commande de votre e-boutique :

Votre client peut choisir de retirer sa commande à la boutique et quand il souhaite le faire, en fonction de vos disponibilités, en prenant rendez-vous au moment même de la commande !

Ainsi, le plus simplement du monde, tout est désormais en place pour vous permettre de faire du “click and collect” depuis votre site web.

Des cerises sur le gâteau

Voici quelques trucs supplémentaires pour parachever le tout 🙂

Tout d’abord, le plugin WooCommerce Local Pickup Time Select n’étant pas traduit en français, voici ce qu’il est possible de faire pour y remédier. J’ai traduit pour vous les différents intitulés et j’ai soumis ces traductions aux auteurs. Peut-être les intégreront ils prochainement directement dans leur plugin… En attendant vous pouvez télécharger les fichier mo et po et les déposer en FTP sur votre site dans le dossier wp-content/languages/plugins/. Vous pouvez également installer l’extension Loco Translate [5] qui vous permettra de traduire vous même non seulement ce plugin mais également toutes les chaines non traduites de votre thème ou d’autres plugins que vous auriez installé sur votre site.

Ensuite, si vous ne proposez que le “click and collect” comme méthode de “livraison”, voici le moyen de supprimer la possibilité d’ajouter une adresse de livraison. Il suffit de cocher “Forcer la livraison à l’adresse de facturation client” dans “WooCommerce > Réglages > Expédition > Options de livraison > Destination de la livraison” :

Ou bien vous pouvez installer le petit plugin WooCommerce Hide Checkout Shipping Address qui propose de cacher les références à l’adresse de livraison en fonction des méthodes que vous proposez :

Enfin, vous avez peut-être remarqué que le titre et le label du menu déroulant sont identiques. Nous avons donc deux fois la même phrase écrite l’une sous l’autre. La première écrite en gros (suivant le design propre à votre thème), puisque c’est un titre et l’autre en plus petit qui correspond au label du menu de selection :

J’ai indiqué ce problème aux auteurs de l’extension. En attendant que ce problème soit résolu, je vous propose un petit correctif en PHP que vous pouvez ajouter à votre site soit directement dans le fichier functions.php de votre thème, soit en utilisant le plugin Code Snippets qui est idéal pour ne pas avoir à éditer les fichiers de son thème :

Voilà ! J’espère que ces quelques informations vous auront aidé à installer une solution de “click and collect” sur votre site. Vous a-t-il été utile ? Avez-vous opté pour une solution alternative ?

43 comments

    1. Tu trouves ça compliqué ? Bon, normalement, quelqu’un qui as un site e-commerce sous WooCommerce devrait être relativement à l’aise avec l’interface… C’est principalement à eux que ce tuto s’adresse 🙂
      Je ne connais pas la solution que tu proposes mais il semble que ce soit pour créer un site complet ? Dans ce cas, et donc pour ceux qui n’auraient pas encore de site web, le choix de la solution à conseiller (WordPress + WooCommerce, celle que tu proposes ou une autre, car il en existe pléthore) dépendra de bien des paramètres…

    2. Ce n’est pas compliqué du tout, ne dites pas n’importe quoi. Quand on y connait rien, le mieux est encore de s’adresser à quelqu’un dont c’est le métier. Et puis votre réponse n’est absolument pas pertinente dans la mesure où ce que vous suggérez n’est pas du tout équivalent en terme de solution.

      ps : Merci Sébastien pour cet article fort utile

  1. Merci cela me paraît très clair.
    Je vous explique ma recherche :
    Les frais de livraison sont gratuits sur mon site et
    J’aimerai offrir 15% aux personnes qui choisissent le click and collecte.
    Dois-je faire un code promo ou y a t il une solution directe qui intègre le 15% dès que les gens choisissent ce type de livraison.
    Merci de votre aide.
    Laure
    Allez voir mon site !
    https ://laurebruas.com

  2. Merci pour ces infos précieuses, ça m’a bien aidé! Par hasard, avez-vous “la trame” pour mettre en place du paiement avec CB par le biais d’un opérateur et non de la banque directement?

    1. Tu peux passer par Stripe par exemple.
      Je n’ai pas de tuto là dessus, mais si tu cherches dans Google “stripe woocommerce“, tu tomberas sur plusieurs sites qui expliquent comment faire. En voici 2 qui me semblent assez complets : “Comment installer et configurer Stripe sur WooCommerce” sur codeur.com, et “Comment intégrer Stripe à WordPress” sur wpmarmite.com qui montre la marche à suivre sur WooCommerce dans son point 7.

  3. Bonsoir Seb, très facile à mettre en place et à configurer. Par contre y’a t-il un moyen de bloquer le créneau d’un retrait à un seul client ? Exemple, x clients peuvent choisir le créneau du 1er décembre à 18h30, ce créneau étant pris par une personne, il faudrait que celui-ci soit grisé et ne plus avoir accès et donc passer au suivant 18H45. Si vous avez la solution, je suis preneur. Cdlt

    1. Effectivement, il serait souhaitable, et spécialement aux heures d’affluence ou pour des boutiques très prisées, de limiter chaque créneaux horaires à un nombre limité de personnes. Cette extension ne le permet hélas pas. Un ticket concernant cette demande a été ouvert sur Github pour réclamer l’ajout de cette fonctionnalité. Il fait suite à la même réclamation sur le forum de support du plugin chez wordpress.org. Mais comme l’explique son auteur, cette option est compliquée à mettre en œuvre car certain cas sont potentiellement problématiques :
      – Comment gérer le cas où 2 personnes choisiraient le même créneau au même moment ?
      – Comment libérer le créneau si le personne qui l’a choisi ne va pas au bout du processus de commande ?
      L’auteur est, semble t-il, actuellement en réflexion à ce propos… N’hésite à lui faire savoir que tu aimerais bien qu’il avance sur le sujet en laissant un commentaire en ce sens aussi bien sur Github que sur le forum de support 🙂

  4. Bonjour, tout d’abord merci pour ce tuto.
    Cependant j’ai une requète si vous avez la solution. Possédant plusieurs magasins de restauration en click & collecte. Est-il possible d’avoir pour chaque magasin les commandes exclusivement les concernant sur leur tablette de commande, ou faut t’il passer par du multistore?

    Merci d’avance.

      1. Il est possible, de base dans WooCommerce, de définir des “zones d’expéditions” associées à des codes postaux pour des boutiques dans des villes différentes, et ainsi multiplier les points de collecte. Mais si toutes les boutiques sont dans la même ville, ça ne fonctionnera pas… Il existe quelques plugins sur wordpress.org qui proposent la gestion de points de retrait multiples, mais il semble que seules leur version “premium” soient vraiment intéressantes. Il y a également un plugin “officiel” vendu sur le site woocommerce.com nommé “Local Pickup Plus” qui semble proposer ce type de fonctionnalités, et bien d’autres dédiées au “click & collect”, mais je ne l’ai pas testé personnellement.

  5. Bonjour Sébastien,
    Merci beaucoup pour votre article qui est fort utile et très bien expliqué.
    J’ai cependant une petite difficulté à faire fonctionner le fichier de traduction. J’ai tout d’abord fait un copier-coller du contenu des deux pages de traduction mo et po car le download ne fonctionnait pas. Ensuite, j’ai déposé ces deux fichiers dans /wp-content/languages/plugins mais aucune réaction. Je vous précise par ailleurs que c’est moi qui est créé le repertoire languages ainsi que le repertoire plugins, ils n’étaient pas présent de base, peut-être le problème vient de là ? En tout cas si vous avez la moindre idée de pourquoi les traductions ne sont pas prises en compte, je suis preneur 🙂
    Bonne journée !

    1. En fait, il n’est pas possible de faire un copier/coller du contenu du fichier .mo car c’est un fichier compilé.
      Essaye de télécharger à nouveau les 2 fichiers en faisant un click droit (sous Windows) ou un ctrl + click (sous iOS) sur les liens mo et po en sélectionnant “Enregistrer le lien sous…”. Sinon, j’ai forcé le téléchargement de ces fichier au click, donc essaye de simplement cliquer sur les liens. Le navigateur devrait proposer le téléchargement directement.
      L’autre possibilité est de faire un copier/coller uniquement du contenu du fichier .po, qui n’est qu’un fichier texte, bien renommer le fichier en woocommerce-local-pickup-time-fr_FR.po, le placer dans /wp-content/languages/plugins, puis, dans l’outil d’administration, aller dans “Loco Translate > Extensions > WooCommerce Local Pickup Time Select > Français”, “Synchroniser” et “Enregistrer”. Si le bouton “Enregistrer” est grisé, modifier l’une des traduction en ajoutant, puis en l’enlevant, un espace, par exemple, afin de “simuler” une modification et permettre de l’enregistrer…
      Je peux aussi t’envoyer les deux fichiers par mail si tu préfère 🙂

  6. Bonjour,
    Super tuto très utile, j’aurai une question.
    Comment je pourrais désactiver les paiements par virement bancaire uniquement pour le click and collect ?

  7. Bonjour,
    Merci pour votre aide précieuse ! Tout s’est bine passé mais j’aimerais savoir si on peut afficher les horaires su réa base du local time (qui est défini dans le Wp mais ne s’applique pas). Merci !

    1. Hummm… Je ne suis pas sûr de bien comprendre la question. L’affichage du jour et de l’heure dans le menu déroulant de la page de validation de la commande respecte bien le format défini dans “Réglages > Général > Format de date et d’heure”… Non ?

  8. Bonjour,
    Tout d’abord merci beaucoup pour ce tuto !
    Je ne pratique pas le “click and collect” mais uniquement la livraison du coup je me demandais si il y avait moyen d’appliquer ta méthode de choix de tranches horaires (etc..) mais pour la livraison avec le même plugin ?
    Merci d’avance pour ta réponse .

    1. J’imagine que oui. Théoriquement, il suffit de changer les phrases pour proposer une livraison plutôt qu’un retrait en utilisant Loco Translate. Après, comme Yannick le souligne dans son commentaire, ça fait courir le risque de se retrouver à devoir effectuer plusieurs livraisons durant le même créneau horaire puisqu’un créneau choisi ne le retire pas de la liste des créneaux disponibles. C’est gérable pour un retrait de marchandises, mais pour des livraisons, ça me semble plus compliqué… Il est aussi possible d’indiquer des créneaux très larges comme des demis journées par exemple. Ça permettrait de caser plusieurs livraisons durant le même créneau.

  9. Hello ! J’ai suivi ton tuto à la lettre mais le moyen de paiement n’apparait à aucun moment, il existe pas ! Sais-tu par hasard ce qui ne marche pas ?

    1. Hummm… Tu veux dire que lors du checkout, sur la page de validation de la commande, aucun moyen de paiement n’est proposé ? Si c’est ça, vérifie que tu as bien “coché” au moins un moyen de paiement, en l’occurrence “Paiement à la livraison”, dans “WooCommerce > Réglages > Paiements”. Pour tester, tu peux même activer tous les moyens de paiements dispo (il y a quatre moyens de paiement par défaut) et vérifier quels sont ceux qui apparaissent et quels sont ceux qui n’apparaissent pas au moment de la validation de la commande.
      Ou bien, veux tu dire que dans la page “WooCommerce > Réglages > Paiements” la méthode “Paiement à la livraison” n’est pas disponible ? Dans ce cas, ce n’est pas normal car cette méthode existe par défaut dans WooCommerce…
      Tiens nous au courant des résultats de tes investigations…

  10. Bonjour,
    Merci beaucoup pour ces infos très utiles et la traduction. Tout fonctionne, cependant…
    Question : à partir du moment ou mes clients peuvent soit être livrés, soit retirer en magasin, est-il possible de faire disparaitre les créneaux horaires s’ils choisissent d’être livrés ? (car actuellement le choix d’horaires est obligatoire mais n’a pas de sens pour la livraison, le besoin de les afficher est uniquement pour le retrait en magasin).
    Ou, s’il n’est pas possible de les afficher uniquement pour les retrait, alors de faire en sorte que le champ ne soit pas obligatoire. (et je préciserai aux clients que le champ est à renseigner uniquement pour le retrait en magasin).
    > Site woocommerce avec divi, paiement en ligne (pas de paiement lors du retrait).
    Merci infiniment

    1. “WooCommerce Local Pickup Time Select” est en effet un plugin assez basique qui n’offre pas beaucoup d’options de configuration. Il n’est notamment pas prévu de pouvoir rendre le choix de la date de retrait en boutique optionnel… Pour un contrôle plus fin de la fonctionnalité, je te conseille de regarder du côté de Local Pickup Plus qui me semble très complet mais que je n’ai pas testé. Tu peux aussi demander directement au créateur de l’extension d’ajouter cette option sur Github ou sur le forum de support de wordpress.org ou sur les deux !
      En attendant, j’ai réécrit le bout de code que je propose en fin d’article pour qu’il ajoute une case à cocher aux options du plugin. Tu pourras ainsi rendre le champ facultatif ou obligatoire selon tes besoins 🙂 Mais ajoute bien quelque part une ligne pour prévenir tes clients, qui choisissent le retrait en boutique, de penser à indiquer un créneau…

  11. Merci Sébastien, c’est une solution appréciable. Je teste actuellement une solution alternative : WOOCOMMERCE
    DELIVERY & PICKUP DATE TIME. C’est assez simple et plutôt complet, mais je vais passer par la version Pro pour avoir les fonctionnalités que je recherche. Moi qui ne suis pas fan des licences annuelles, on a le choix entre annuelle ou life time. Et si ça ne fonctionne pas j’aurai ta solution en secours. Encore merci à toi !!!

  12. Bonjour Sébastien, merci une nouvelle fois pour ce tutoriel très complet qui m’a permis de mettre en place le retrait sur place pour le site d’un restaurant.
    Toutefois, mon client souhaite également proposer également la livraison pour ses clients.

    Je pensais avoir bien paramétré l’ensemble des informations sur mon site mais lorsque je sélectionne la livraison à domicile, j’ai le message d’erreur suivant : “Merci de choisir le moment qui vous convient pour le retrait.” Et la page me demande de sélectionner le créneau dans la liste.

    Est-ce qu’il y a moyen de désactiver ce bloc lorsque la méthode livraison à domicile est sélectionné ?

    Je pense que oui car il y a de nombreux cas de figure où des sites ne proposent pas uniquement que le clic and collect.

    Merci infiniment une nouvelle fois pour ce tuto.

    Cordialement,

      1. Tout à fait. J’ai essayé d’intégrer le code dans le functions.php du thème enfant, dans lequel j’ai remplacé le code que tu avais présenté dans l’article mais j’ai le message “Une erreur critique est survenue sur le site”. Tu l’as intégré comment ce code du coup ?

        Merci d’avance.

        Cordialement,

        1. Pour cet exemple j’ai utilisé le plugin Code Snippets qui permet d’ajouter des morceaux de code sans passer par l’édition du fichier function.php. Mais ça devrait fonctionner de la même manière si tu copie/colle le code dans ce fichier… Essaye d’activer le mode debug et regarde exactement quelle erreur est générée ?

Laisser un commentaire

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <pre>