Créer une page de commande de repas façon Uber Eats avec WooCommerce

Créer une page de commande de repas façon Uber Eats avec WooCommerce

Oui, un restaurant ou une vente à emporter peut proposer sur son propre site une page de commande aussi simple qu’Uber Eats ou Deliveroo, avec WooCommerce et une extension comme YITH Easy Order Page. Toute la carte tient sur une page, le panier reste visible, et vous ne reversez aucune commission à une plateforme.

En bref

  • Le secret des plateformes : toute la carte sur une page, des catégories en haut, un panier toujours accessible.
  • Sur mobile, une colonne, de grandes photos et un bouton de commande fixé en bas.
  • YITH Easy Order Page crée cette page avec WooCommerce, en grille ou en tableau.
  • D’autres extensions ajoutent créneaux de retrait, horaires d’ouverture et fidélité.
  • Vente de repas à distance : les allergènes doivent être indiqués avant la commande.

Ce que font bien les plateformes de livraison

Le principe d’Uber Eats, Deliveroo ou Just Eat est simple : on choisit des plats parmi une carte, et la commande est toujours à portée de main, où que l’on soit dans la page.

  • Tout est sur une seule page : pas besoin de passer d’une catégorie à l’autre comme sur une boutique classique.
  • Les catégories en haut permettent de sauter directement aux desserts ou aux boissons, très utile sur petit écran.
  • Un panier coulissant apparaît dès le premier article, avec le total et l’accès direct au paiement.
  • Une fenêtre de détail montre la composition d’un plat sans quitter la carte.

Le mobile d’abord

La plupart des commandes de repas se passent sur téléphone, souvent depuis le canapé. Les plateformes l’ont compris : une colonne, une photo, un titre, une description courte, un prix, un bouton, et un bouton de commande fixé en bas de l’écran avec le total. C’est ce niveau d’exigence qu’il faut viser.

Créer la même page avec WooCommerce

WooCommerce seul ne sait pas afficher toute une carte sur une page avec un panier flottant. L’extension YITH WooCommerce Easy Order Page le fait, en s’inspirant justement de Glovo ou Uber Eats.

Étape 1 : les réglages généraux

Dans les réglages généraux, vous décidez de l’affichage des variations (taille, sauce, accompagnement), de la façon d’afficher le détail d’un produit et du widget panier, collant ou flottant. Prenez le temps de les parcourir : vous comprendrez ensuite pourquoi tel élément s’affiche ou non.

Le détail d’un produit peut s’ouvrir dans une fenêtre, sans quitter la carte. Idéal pour la liste des ingrédients et des allergènes.

Fiche d’une pizza ouverte dans une fenêtre par-dessus la carte, avec sa composition, son prix et le choix de la quantité
Le détail d’un plat s’ouvre dans une fenêtre, sans quitter la carte.

Étape 2 : créer une liste de produits

Dans l’onglet Listes de produits, ajoutez une liste et donnez-lui un nom. Trois onglets règlent son contenu et son affichage :

  • la sélection : tous les produits, ou une sélection par catégories, étiquettes ou produits, avec des exclusions ;
  • l’affichage : grille ou tableau horizontal, bouton d’ajout au panier, nombre de produits, tri, produits mis en avant en premier ;
  • la visibilité : qui voit la liste, par exemple seulement les clients connectés ou certains rôles.
Options d’affichage d’une liste de produits : bouton ajouter au panier, nombre de produits par page, tri, produits mis en avant et choix entre tableau et grille
Les options d’affichage d’une liste : grille ou tableau, tri, boutons.

Étape 3 : afficher la liste sur une page

Chaque liste a son code court, à coller dans une page : avec le widget Code court d’Elementor, un bloc de l’éditeur WordPress ou n’importe quel constructeur de pages.

Liste de produits nommée pizza avec son code court, copié dans un widget Code court
Le code court de la liste se colle dans un widget Code court.

Étape 4 : soigner le style et le mobile

Affichez la page côté visiteur et ajustez. L’onglet Style règle les couleurs du widget panier et des boutons, et les icônes. La grille passe automatiquement de quatre colonnes sur ordinateur à une seule sur mobile, avec le panier en bas de l’écran.

Carte d’une pizzeria sur ordinateur en grille de quatre colonnes et sur téléphone en une colonne avec le panier en bas de l’écran
La même carte sur ordinateur et sur téléphone.

Aller plus loin

D’autres extensions complètent le parcours :

Les allergènes, avant la commande

Quand vous vendez des repas à distance, les informations obligatoires, dont les allergènes, doivent être disponibles avant la conclusion de la commande, puis au moment de la livraison. C’est l’article 14 du règlement européen INCO n° 1169/2011. Pour les plats préparés sur place, la page Service Public sur les allergènes rappelle les 14 allergènes à signaler. La fenêtre de détail de chaque plat est l’endroit idéal pour les indiquer.

Un investissement plutôt qu’une commission

Uber Eats, Deliveroo et les autres reposent sur des plateformes développées à grands frais, et se rémunèrent par une commission sur chaque commande. Avec votre propre page de commande, vous investissez une fois dans quelques extensions et leur mise en place, puis chaque vente vous revient, hors frais de paiement.

Vous gardez aussi la relation avec vos clients : leurs coordonnées, leurs habitudes, la possibilité de les fidéliser. Rien n’empêche de rester sur les plateformes pour vous faire connaître, tout en encourageant les habitués à commander chez vous.

Vous voulez une page de commande pour votre restaurant, avec retrait, livraison ou créneaux ? On crée des sites de commande en ligne avec WooCommerce, ou parlons de votre projet.

Sommaire
À lire aussi

D’autres articles qui peuvent vous servir

Facturation électronique WooCommerce : comment mettre votre boutique en conformité

Facturation électronique WooCommerce : comment mettre votre boutique en conformité

Lire l’article →
Cookies et consentement : pourquoi une simple bannière ne suffit plus

Cookies et consentement : pourquoi une simple bannière ne suffit plus

Lire l’article →
Bouton de rétractation WooCommerce : le guide pour se conformer à l’article L221-21

Bouton de rétractation WooCommerce : le guide pour se conformer à l’article L221-21

Lire l’article →

Un projet, une question ?

Devis gratuit · Acompte remboursable · Solde si satisfait · Sans engagement