Sommaire
La mission
Grollo.eu est un site web WordPress de catalogue B2B, avec un catalogue produits WooCommerce, pour un fabricant de produits en verre actif sur le marché européen ; il a été développé par CREATING.LV. Comme l’indique grollo.eu lui-même, les produits GROLLO sont conçus, fabriqués et testés par Stikla Serviss. Le client avait besoin d’un nouveau site pour présenter clairement une large gamme de produits aux clients professionnels, auquel on pourrait plus tard ajouter aussi la vente en ligne. Le projet a été livré en 2023.
L’acheteur professionnel choisit un produit selon des paramètres techniques et visuels : le catalogue avait donc besoin non seulement de catégories, mais aussi d’attributs produits détaillés permettant de filtrer les articles. En plus du catalogue, le site devait comporter les sections Download, Inspiration, News et Service, ainsi qu’un accès (login).
Notre rôle
CREATING.LV a développé Grollo.eu du design jusqu’au site terminé. Notre travail comprenait :
- le design visuel du site et l’expérience utilisateur (UX) ;
- un site WordPress avec un catalogue produits WooCommerce et des catégories ;
- des attributs produits détaillés qui servent de filtres ;
- les sections Download, Inspiration, News et Service, ainsi qu’un accès (login) ;
- une solution de versions linguistiques avec WPML ;
- la saisie des produits dans le catalogue ;
- une version mobile adaptée pour une utilisation sur téléphone.
Le pied de page du site indique « Page built by CREATING.LV ».
Aperçus du projet
— agrandir l’imagePage d’accueil — agrandir l’image
Catégories de produits — agrandir l’image
Catalogue des cabines de douche — agrandir l’image
Page produit — agrandir l’image
Variantes de verre — agrandir l’image
Documentation produit — agrandir l’image
Catalogue des miroirs LED — agrandir l’image
Accessoires et pièces détachées — agrandir l’image
Solutions sur mesure — agrandir l’image
Galerie d’inspiration
Pourquoi un catalogue B2B avec WooCommerce plutôt qu’une boutique en ligne
Le catalogue a été construit avec WooCommerce, en prévoyant la possibilité d’ajouter plus tard la vente en ligne. Les produits sont donc publiés et consultables, mais le panier et la validation de commande ne sont pas activés. Cette approche permet de publier le catalogue complet sans avoir encore à régler sur le site les prix, le paiement et les conditions de livraison, obligatoires pour une boutique en ligne.
WooCommerce est l’extension e-commerce de WordPress. Le catalogue et l’éventuelle boutique en ligne utilisent une même base de données produits : si l’entreprise décide de vendre en ligne, les produits, catégories et attributs n’ont pas à être saisis à nouveau. C’est ce qui distingue un tel site WordPress de catalogue B2B d’un simple site vitrine avec des images de produits, où il faudrait créer le catalogue à partir de zéro pour commencer à vendre. Ajouter la vente signifierait ici activer le panier et la validation de commande, indiquer les prix et connecter des solutions de paiement et de livraison au catalogue existant. Comment WooCommerce complète WordPress et pourquoi on l’utilise aussi pour des catalogues, c’est expliqué dans l’article Qu’est-ce que WooCommerce et comment complète-t-il WordPress ?.
Un catalogue avec filtres par attributs
Les produits sont classés par catégories, et chaque produit dispose d’attributs détaillés qui servent en même temps de filtres. Les articles peuvent ainsi être sélectionnés selon des paramètres techniques et visuels, et le client professionnel réduit rapidement son choix aux produits ayant les caractéristiques voulues, au lieu de parcourir toute la catégorie.
Un attribut WooCommerce est une caractéristique du produit avec une liste de valeurs définie. Un même attribut et ses valeurs sont attribués à de nombreux produits : on peut donc s’en servir pour créer un filtre pour toute la catégorie, au lieu de décrire les paramètres de chaque produit uniquement dans le texte. Pour un nouveau produit, il suffit d’attribuer les valeurs des attributs pour qu’il apparaisse dans les résultats de filtre correspondants.
C’est nous qui avons saisi les produits dans le catalogue : le client a donc reçu un site avec un catalogue rempli, et non une structure vide. Si la création d’un site WordPress avec WooCommerce commence par le catalogue, il vaut la peine de valider la liste des attributs avant la saisie des produits : un attribut ajouté plus tard doit être renseigné pour chaque produit déjà saisi afin qu’il apparaisse dans les résultats du filtre. Sur le site actuel, la page de catégorie comporte un bouton Filter et des fiches produits sans panier.
Le parcours du visiteur dans le catalogue
Sur le site WordPress de catalogue B2B, le visiteur :
- choisit une catégorie de produits ;
- sélectionne avec le filtre les produits selon les attributs voulus ;
- ouvre la fiche produit avec ses paramètres ;
- passe au besoin aux sections Download, Inspiration, News ou Service.
Le catalogue fonctionne ainsi comme une source de référence produits pour le client professionnel : il peut faire lui-même la sélection par paramètres avant de contacter le fabricant.
Les sections hors catalogue
Sur le site B2B d’un fabricant, l’acheteur n’a pas seulement besoin d’une liste de produits, mais aussi de documents, d’actualités et d’informations sur le service. C’est pourquoi, à côté du catalogue, nous avons développé des sections distinctes, chacune avec sa propre fonction.
- Download : un espace pour les documents téléchargeables. Sur le site actuel, on y trouve par exemple des notices, des spécifications techniques et des e-catalogues ; ce contenu est celui de l’entreprise.
- Inspiration : une section distincte pour le contenu d’inspiration, séparée du catalogue technique.
- News : les actualités de l’entreprise.
- Service : les informations sur le service.
- Login : l’accès pour les utilisateurs inscrits du site.
Ces sections permettent au client professionnel de trouver sur un seul site à la fois le produit et les documents qui s’y rapportent, sans adresser de demande séparée au fabricant. Pour le fabricant, cela signifie qu’il suffit de publier une nouvelle version d’une notice ou d’une spécification à un seul endroit, au lieu de l’envoyer à chaque client séparément.
Pour le marché européen : WPML et l’anglais
Le site est conçu pour le marché européen. Il utilise WPML ; la version actuelle est en anglais. Comment choisir entre WPML et Polylang, c’est expliqué dans l’article WPML ou Polylang pour un site WordPress multilingue ?.
WPML est une extension WordPress pour les sites multilingues. Elle permet de créer des traductions des pages, produits, catégories et attributs, chaque version linguistique restant liée à l’original. Dans un catalogue à filtres par attributs, cela signifie que l’on peut traduire dans une autre langue aussi les noms des attributs et des filtres, et pas seulement les descriptions des produits. Si l’entreprise souhaite s’adresser à un marché dans sa langue, l’outil linguistique est déjà en place sur le site, et une nouvelle version linguistique peut être ajoutée sans refondre la structure du site.
Design et utilisation sur mobile
Le design visuel et l’UX étaient notre travail, tout comme la version mobile adaptée. Sur notre capture d’écran, la page d’accueil présente des groupes de produits qui mènent à la partie correspondante du catalogue WooCommerce : le visiteur peut ainsi commencer directement par la gamme de produits qui l’intéresse. Sur téléphone, on peut utiliser les catégories et le filtre comme les fiches produits et les autres sections : le client professionnel peut donc ouvrir le catalogue aussi hors du bureau. Pour en savoir plus sur cette partie du travail, consultez la page Web design et UX/UI.
À qui convient ce type de solution
Pour un fabricant ou un grossiste qui doit d’abord présenter une large gamme de produits aux clients professionnels sur plusieurs marchés, mais qui pourrait avoir besoin à l’avenir de vendre aussi en ligne. Un catalogue B2B avec WooCommerce permet de commencer par un site web et de passer à une boutique en ligne sans changer de plateforme ni ressaisir les produits.
Comment nous planifions un tel site, du catalogue jusqu’à une éventuelle boutique en ligne, nous l’expliquons sur la page développement de boutique en ligne. Un autre exemple de catalogue produits réalisé par nos soins est le site WordPress avec catalogue de Stikla Serviss, où le catalogue est complété par des informations techniques téléchargeables.
Services utilisés
Site
Remarque
Le portfolio présente la solution développée au moment de la livraison du projet. Le site actuel a pu être modifié depuis.








