Ce que je préfère dans mon travail c’est qu’aucun projet ne ressemble à un autre. Un client m’a ainsi récemment demandé de l’aider à simplifier le processus de commande  sur son site Woocommerce. Cette mission m’a demandé 2 jours de travail car j’ai dû chercher le moyen le plus simple (et sans développement spécifique, donc pas trop cher) de créer un système de commande par étapes de sorte que l’internaute puisse composer son produit pas à pas en le configurant lui-même.

Un concept original de coffret à composer soi-même

Il se trouve que ce client propose un concept original : il vend des coffrets cadeau pour jeune maman à composer soi-même en ligne. On commence par choisir une jolie boîte puis on y ajoute des produits variés (doudous, confitures…) et un petit message personnalisé. On paye en ligne et quelques jours plus tard le coffret est livré chez l’heureuse maman.

Mon client rencontrait des difficultés à simplifier le processus de commande. Il souhaitait guider son client pas à pas dans la composition du coffret sans toutefois y parvenir de façon fonctionnelle. Après avoir défini les étapes clefs du processus de commande (choix de la boite, ajout des produits, ajout d’un message…) et les contraintes de chaque étape (on ne peut choisir qu’une seule boîte, on peut ajouter plusieurs produits sans maximum, le message est facultatif etc…) , il a fallu trouver la meilleur solution technique.

Comment permettre au client de composer son produit en kit mais en lui laissant la possibilité d’ajouter autant de produits qu’il le voudrait ?

Créer un configurateur de produit avec Woocommerce et un plugin… oui, mais…

Au premier abord, on pourrait espérer qu’il existe un module qui fasse le job. Ainsi pas besoin de réinventer la roue.

Bonne nouvelle, il y en a deux.

Le premier est vendu par Woocommerce en personne, j’ai nommé Composite Products. Ce plugin wordpress permet de composer un produit étape par étape en définissant des pièces détachées. On peut ainsi configurer son produit en kit. Par exemple si vous voulez acheter un skateboard, vous commencez par choisir la planche, puis les roues puis le type de roulement etc…

Hélas, ce module ne fait pas l’affaire pour mon besoin car il ne permet pas de choisir les pièces dans la boutique , juste dans une sélection assez réduite pour des questions d’affichage. Impossible de filtrer ces pièces par prix, ou caractéristiques etc… De plus, il force un nombre limité d’éléments détachés. Mon client n’impose aucune limite, vous pouvez ajouter 30 pots de confiture, il aura la jolie boîte au bon format.

Le second module , Step by Step ordering, présente les mêmes limites bien qu’il soit bien conçu. Il permet  de commander en suivant un processus par étape très encadré mais il ne donne pas assez de flexibilité au moment voulu, pas possible non plus d’ajouter le petit mot à la fin et je voulais absolument que ce petit message soit DANS le processus de commande et pas à la fin perdu dans les champs de facturation de Woocommerce, ce qui ne fait pas trop rêver.

Créer un processus de commande guidé avec Woocommerce et Divi

Bien sûr, quand le client m’a annoncé qu’il travaillait avec Divi, mon petit coeur s’est serré d’amour.. puisque je ne travaille presque plus qu’avec le duo magique WordPress + Divi depuis 4 ans maintenant. Ce constructeur de thème est tellement flexible qu’il ne m’a jamais déçu, on trouve toujours un moyen d’obtenir un résultats propre et fonctionnel.

Ainsi donc, je devais créer ce système de commande guidée par étapes permettant de composer un produit final via un configurateur… mais sans coder une usine à gaz de façon à ce que mon client garde la main sur l’ensemble.

Voilà comment j’ai procédé.

1- D’abord, il faut créer une page de départ du processus

Je suis donc parti d’une page de base construite avec Divi. Elle se compose principalement d’un module « boutique » paramétré de façon à n’afficher que la catégorie « Jolie boîtes ». J’ai aussi créé un fil conducteur à savoir une barre de progression en 3 étapes pour permettre au prospect de s’y retrouver et de suivre le tunnel de vente de façon logique.

Le tunnel se compose simplement d’une ligne en 3 colonnes, un fond de ligne rose et un fond de colonne plus foncé pour identifier l’étape actuelle. Vous pouvez ajouter sur chaque colonne un lien vers la page de l’étape mais seulement de façon rétroactive (on ne veut pas que le client passe à l’étape 2 sans valider l’étape 1).

Pour l’affichage des boîtes, c’est un simple module Divi « Boutique » limité à l’affichage d’un seule catégorie.

Voilà ce que ça donne :

2- Rediriger vers une page après l’ajout au panier

Le prospect choisi donc sa boîte et l’ajoute au panier. Ici, un problème à résoudre. Il faut rediriger le visiteur vers l’étape 2 de façon automatique. Un comportement qui n’est pas prévu dans Woocommerce. de façon native.

Pour rediriger vers une page après avoir cliqué sur le bouton d’ajout au panier, il y a plusieurs solutions :

• vous pouvez coder ou utiliser une fonction php, il y en a quelques exemples ici que vous ajouterez à votre fichier function.php après avoir créé un thème enfant ou utiliser un plugin d’extrait de code (Code Snippets) … Solution très technique mais pas assez pratique pour mon client, je veux qu’il puisse gérer tout cela sans bidouiller du code au risque de casser le site.
• vous pouvez utiliser un plugin payant, par exemple Add to cart redirect mais à 29 $ l’année, ça fait cher la redirection !
• vous pouvez utiliser ce plugin gratuit qui fait très bien le boulot : Woocommerce Add to Cart Custom Redirect

C’est archi-simple, il suffit d’activer le plugin et d’aller dans l’onglet « Redirects » en bas de vos fiches produit pour indiquer l’url de redirection une fois le produit ajouté au panier.

Ainsi donc, une fois la jolie boîte ajoutée, on est redirigé vers l’étape 2 du processus fissa !

3- Afficher toute la boutique et ajouter un filtre de produits compatible Divi

L’étape 2 est une page avec la même barre de progression en haut mais avec l’étape 2 en exergue. Un module Divi de boutique affiche tous les produits.

Mon client ayant plus de 150 produits, il fallait un moyen de els trier et els filtrer. Bon… le filtre par défaut de Woocommerce / Divi est… médiocre pour dire le moins. On ne peut pas être bon partout. Alors la solution est d’installer via un shortcode un filtre de produit en Ajax (les produits sont filtrés sans que la page ne se recherche complètement) et compatible Divi.

Vous le cherchez ce module ? Ne cherchez plus, c’est Woo Product Filter de WooBeWoo. C’est propre, simple, gratuit et ça marche avec Divi. générez le shortcode, ajouter els critères de filtre (prix, catégories attributs…) et insérez le shortcode dans un module « code » ou « texte » de Divi en colonne de droite ou de gauche.

4- Permettre au client d’envoyer un petit message personnalisé AVANT le panier

Ici, j’ai beaucoup cherché un moyen simple et élégant d’envoyer un petit mot mais je ne voulais PAS que ce petit mot soit rédigé après le panier. Il fallait donc  qu’il s’insère délicatement dans le processus de commande. Comment faire… J’ai cherché du côté des modules de cartes cadeau… Pas top, trop cher…

Il y a une solution que vous pouvez facilement reproduire : utiliser un produit avec un champs de texte personnalisé.

C’est plus une astuce qu’un vrai système mais ça marche.

Vous pouvez créer un produit qui s’appellera « Message cadeau » par exemple. Ce produit est vendu à 0 euro. Il ne contient qu’une seule ligne de description : Indiquez ici votre message cadeau ». Vous allez insérer dans ce produit un champs de texte où le client pourra taper son petit mot.

Pour se faire, utilisez le plugin (gratuit, oui vous avez bien compris que je suis rad.. heu.. économe) Extra product Option qui permet entre autres choses d’ajouter un champs de texte sur certains produits pour permettre au client de personnaliser le produit par exemple avec une broderie etc.  ici le champs de texte fera office de message pour la carte qui sera glissée dans le coffret cadeau composé.

Un bouton permet de sauter l’étape puisqu’elle est facultative.

Bis repetita, après l’ajout de ce produit un peu spécial au panier, on ajoute une redirection automatique… vers le panier puisque c’est la dernière étape.
Il faudra un peu de CSS pour arranger le look du formulaire du message, masquer le nombre de références (ici le « 1 » que je vais masquer plus tard, oopss)  mais rien de bien méchant avec un display:none sur la div.

Ca donne ceci :

Et nous voilà donc rendu au panier ou le client peut voir la liste composée de sa jolie boîte, des produits additionnels, du petit mot. IL ne reste plus qu’à payer avec le process normal de Woocommerce.

Quelques limites à ce système

Si un client achète plusieurs coffrets.. impossible de savoir dans quel coffret mettre tel ou tel produit. le client me signale que ce cas de figure n’arrive presque jamais. On pourrait trouver une solution en codant un système de libellé commun à la boite, au mot et aux produits par exemple… Autre solution envisageable, limiter l’ajout d’une seule boîte de départ. Donc pour commander 2 coffrets.. et bien.. il faut repasser une seconde commande :-X pas très élégant mais ça fonctionne. Remarque :  de toute façon, on est bien obligé de passer une seconde commande pour indiquer une adresse de livraison différente… Donc finalement ça semble assez logique.. sauf si on veut se faire livrer chez soi les 2 boîtes pour les apporter en personne.  Bref.. il faudra creuser le moment venu !