Votre site idéal ressemble à celui-ci ?
Faites appel à PG Concept pour la réalisation d'un site WordPress professionnel, attrayant, sécurisé et performant.
Implanté aux Ménuires, Skitop est un magasin de sport indépendant spécialisé dans les activités de montagne, été comme hiver. Ski, snowboard, randonnée, trail running, vélo, lifestyle… son catalogue reflète la diversité des pratiques de ses clients et une même volonté : leur permettre de profiter pleinement de la montagne avec un équipement adapté.
Carole avait déjà fait appel à mes services pour un accompagnement SEO personnalisé organisé en 6 sessions en visio entrecoupées de travail personnel. Satisfaite de cette première collaboration, elle m’a ensuite confié la refonte complète du site e-commerce de Skitop, avec un double objectif : moderniser son image et faciliter l’accès à un catalogue particulièrement transversal.
WordPress, WooCommerce et Divi 5 constituent naturellement le socle du nouveau site. Mais derrière cette base relativement classique se cache une part importante de développement WordPress sur mesure. Plutôt que de multiplier les extensions, j’ai développé plusieurs fonctionnalités spécifiques afin d’adapter réellement le site au fonctionnement et aux besoins de Skitop.
1. Skitop : un catalogue qui ne rentre pas dans une seule arborescence
La particularité du catalogue de Skitop tient notamment au nombre de façons dont un visiteur peut rechercher un produit parmi les plus de 450 références.
Une veste technique peut par exemple intéresser un skieur, un pratiquant de ski de randonnée ou quelqu’un recherchant simplement un vêtement chaud. Un client peut commencer sa recherche par une catégorie de produits, tandis qu’un autre préférera parcourir les équipements destinés à son activité, à son genre ou retrouver directement une marque qu’il affectionne.
Une arborescence traditionnelle de catégories WooCommerce aurait rapidement montré ses limites.
La refonte devait donc répondre à une question centrale : comment proposer plusieurs portes d’entrée vers un même catalogue sans créer une structure inutilement complexe ?
2. Le cahier des charges : simplifier sans appauvrir
2.1. Plusieurs façons d’accéder aux produits
Le nouveau site devait permettre d’explorer facilement le catalogue selon plusieurs axes :
- Les catégories de produits
- Les activités pratiquées
- Le genre : homme, femme ou junior
- Les marques proposées par Skitop
- Les bonnes affaires
Ces différentes classifications devaient pouvoir cohabiter sans dupliquer les produits ni transformer les catégories WooCommerce en une arborescence tentaculaire.
2.2. Une navigation adaptée à un catalogue transversal
L’objectif était également de permettre au visiteur d’affiner rapidement sa recherche une fois arrivé dans le catalogue.
Les différentes pages de produits devaient donc disposer de filtres adaptés à leur contexte, tout en conservant une navigation claire, y compris sur mobile.
Les activités et les marques ne devaient par ailleurs pas être réduites à de simples critères techniques : elles constituent de véritables points d’entrée dans le site, avec leurs propres pages et contenus.
2.3. Une administration qui reste simple
La sophistication du site côté visiteurs ne devait surtout pas se traduire par une administration compliquée pour Carole.
Les contenus amenés à évoluer régulièrement devaient pouvoir être administrés directement depuis WordPress, sans avoir à ouvrir le constructeur de pages ou à intervenir dans le code.
C’est notamment le cas des informations commerciales saisonnières ou encore des activités mises en avant sur la page d’accueil.
3. Faire de WordPress un outil réellement adapté à Skitop
3.1. Une taxonomie “Activités” créée pour le projet
Le choix technique le plus structurant a été la création d’une taxonomie WordPress personnalisée dédiée aux activités.
Elle permet d’associer indépendamment les produits à différents univers tels que le ski et le snowboard, la randonnée, le trail running, le vélo, le lifestyle ou encore le ski de randonnée et le hors-piste.
Un même produit peut ainsi être associé à plusieurs activités sans que celles-ci interfèrent avec sa catégorie principale.
Cette taxonomie est devenue bien plus qu’un simple champ supplémentaire dans l’administration : je l’ai exploitée dans de nombreuses parties du site, notamment pour générer des archives de produits, alimenter la navigation ou filtrer certaines sélections.
C’est en quelque sorte l’une des briques centrales de l’architecture du nouveau site.
3.2. Des méga-menus pour multiplier les portes d’entrée
J’ai également pensé la navigation principale autour de cette organisation des données.
Des méga-menus donnent directement accès aux produits selon trois axes majeurs :
- Les activités
- Le genre
- Les marques
Le visiteur n’a donc pas besoin de connaître l’organisation interne du catalogue pour trouver ce qu’il cherche. Il choisit simplement la façon de naviguer qui lui paraît la plus naturelle.
Cette approche illustre bien l’un des principes que j’ai retenus durant le projet : faire travailler la structure WordPress au service de l’expérience utilisateur, plutôt que de contraindre celle-ci à suivre l’organisation technique du site.
3.5. Une recherche instantanée dans les produits et les catégories
Pour faciliter encore l’accès au catalogue, j’ai également développé une recherche instantanée en AJAX. Dès la saisie de deux caractères, les résultats se mettent à jour automatiquement sans rechargement de page.
La recherche ne se limite pas aux produits : elle affiche également les catégories de produits correspondantes.
Un visiteur recherchant “chauss” peut ainsi accéder directement à une paire de chaussures précise ou choisir de poursuivre sa navigation dans une catégorie telle que “Chaussures de randonnée” ou “Chaussures de trail”.
Là encore, l’objectif était moins d’ajouter une fonctionnalité spectaculaire que de réduire le nombre d’étapes entre l’intention du visiteur et les produits qu’il recherche.
3.4. Des filtres de catalogue développés sur mesure
Les pages catalogues disposent également de filtres personnalisés, développés spécifiquement pour le projet.
Ils permettent de combiner différentes caractéristiques des produits et de réduire rapidement une sélection sans recourir à une extension de filtrage généraliste surdimensionnée.
Le développement sur mesure permet surtout de conserver la maîtrise du comportement des archives, de leur pagination et de leur intégration graphique dans Divi.
3.5. Des shortcodes pour aller plus loin avec les boucles de produits
WooCommerce et Divi proposent naturellement leurs propres outils d’affichage des produits. Certaines maquettes demandaient toutefois davantage de souplesse.
J’ai donc développé plusieurs shortcodes personnalisés pour interroger précisément le catalogue et générer les sélections nécessaires selon le contexte.
Cette approche permet de conserver une séparation claire : Divi 5 gère la composition graphique des pages tandis que WordPress et PHP prennent en charge la logique métier et les requêtes plus spécifiques.
C’est d’ailleurs une bonne illustration de la différence entre intégrateur et développeur WordPress : le premier s’appuie principalement sur les outils disponibles pour construire l’interface, tandis que le second peut intervenir directement sur la logique et le fonctionnement de WordPress lorsque le projet l’exige.
Le résultat reste ainsi facile à intégrer dans les mises en page tout en offrant un contrôle beaucoup plus fin sur les produits affichés.
4. Une administration sur mesure plutôt que des réglages dispersés
4.1. Piloter les informations saisonnières depuis WordPress
Le site dispose d’un bandeau défilant destiné à afficher es informations ponctuelles : promotions, soldes, messages saisonniers ou informations pratiques.
Plutôt que d’obliger Carole à modifier un modèle Divi, j’ai créé un écran d’administration spécifique dans WordPress.
Le message peut ainsi être ajouté, modifié ou retiré directement depuis une interface dédiée. Il est également possible de paramétrer sa couleur de fond.
4.2. Choisir les activités mises en avant sur la page d’accueil
J’ai appliqué le même principe aux activités présentées sur la page d’accueil.
Carole peut sélectionner depuis l’administration celles qu’elle souhaite mettre en avant, sans avoir à reconstruire ou modifier la mise en page elle-même.
Le site se charge ensuite d’exploiter les informations déjà associées aux différentes activités.
4.3. Penser également l’expérience du back-office
Ces développements sont invisibles pour les visiteurs, mais ils font pleinement partie de la conception du projet.
Sur un site destiné à évoluer régulièrement, l’expérience utilisateur ne s’arrête pas au front-office. Une administration claire et adaptée aux besoins réels de la personne qui fera vivre le site est tout aussi importante.
5. Aperçu du nouveau site Skitop
La page d’accueil
La page d’accueil installe immédiatement le nouvel univers graphique de Skitop et fait la part belle aux activités proposées par le magasin.
Elle constitue également un premier point d’accès au catalogue, en complément des catégories et autres entrées disponibles dans la navigation principale.
Les pages Activités
Les activités disposent de leurs propres pages et permettent de retrouver facilement les produits adaptés à chaque pratique.
Elles constituent l’une des principales nouveautés de l’architecture du site et exploitent directement la taxonomie développée spécialement pour le projet.
Les catalogues et leurs filtres
Les pages catalogues combinent navigation, filtres et boucles de produits personnalisées afin de permettre au visiteur d’affiner progressivement sa sélection.
L’objectif reste toujours le même : rendre simple une organisation des produits qui, en coulisses, est beaucoup plus riche qu’il n’y paraît.
Les fiches produits
Les fiches produits reprennent les codes graphiques du nouveau site et les fonctionnalités WooCommerce nécessaires à la vente : déclinaisons, choix des coloris ou tailles, gestion du stock et ajout au panier.
Ici, le parti pris a surtout été de conserver une présentation claire et de laisser toute sa place au produit.
Dans les coulisses du site
Une partie importante du travail que j’ai réalisé pour Skitop ne se voit finalement jamais sur le site public.
Les écrans d’administration développés spécialement pour le projet permettent pourtant à Carole de gérer simplement certains éléments stratégiques du site, sans connaissances techniques particulières.
6. Les grandes étapes de la refonte
6.1. Repenser l’architecture avant les pages
Avant même la réalisation graphique, j’ai mené une réflexion sur l’organisation du catalogue et les différentes classifications nécessaires.
J’ai réorganisé les catégories existantes et défini les rôles respectifs des catégories, activités, genres et marques avant d’engager la reconstruction du site.
6.2. Développer les fonctionnalités spécifiques
Une fois cette architecture établie, le travail de développement a porté sur les différentes fonctionnalités nécessaires pour l’exploiter : taxonomie personnalisée, archives, filtres, shortcodes, outils d’administration ou encore adaptations spécifiques de WordPress et WooCommerce.
6.3. Construire l’interface avec Divi 5
J’ai ensuite utilisé Divi 5 pour réaliser les différentes mises en page et les modèles du site.
Le recours à un thème enfant m’a permis parallèlement de centraliser les développements PHP, JavaScript et CSS nécessaires aux fonctionnalités qui sortent du périmètre du constructeur.
6.4. Migrer l’existant et préparer la mise en production
La refonte impliquait également de récupérer le catalogue existant, de réorganiser certaines données et d’assurer la transition avec les anciennes URLs.
J’ai donc porté une attention particulière à la migration des produits et médias ainsi qu’aux redirections nécessaires afin de préserver autant que possible les acquis SEO du précédent site.
Avant la mise en production, différentes phases de tests m’ont enfin permis de vérifier la navigation, les filtres, le processus de commande, le responsive et le comportement général de la boutique.
7. Un site conçu pour continuer à évoluer
Le développement spécifique n’avait pas pour objectif de figer le site dans un fonctionnement particulier, bien au contraire.
L’utilisation de taxonomies et de fonctionnalités intégrées proprement à WordPress permettra par exemple d’ajouter de nouvelles activités, de faire évoluer les filtres ou d’exploiter ces classifications dans de futures fonctionnalités sans devoir repenser toute l’architecture.
La mise en ligne ne marque donc pas la fin du projet : elle constitue surtout le point de départ d’un socle plus cohérent, plus simple à administrer et capable d’accompagner les prochaines évolutions de Skitop.
Quand le développement WordPress devient invisible, c’est qu’il fait son travail
Pour le visiteur, une grande partie du travail que j’ai réalisé sur cette refonte restera invisible.
Il ne saura pas qu’une taxonomie personnalisée alimente certaines pages, qu’un shortcode génère une sélection de produits ou que plusieurs critères sont combinés par des filtres développés spécifiquement.
Et c’est précisément le but.
Le développement spécifique n’a d’intérêt que s’il permet de masquer la complexité plutôt que de la transmettre à l’utilisateur.
Avec cette nouvelle version du site de Skitop, le visiteur peut simplement chercher son équipement de la manière qui lui semble la plus naturelle, tandis que Carole dispose d’un site suffisamment souple pour le faire évoluer au fil des saisons.
C’est à mes yeux ce qui résume le mieux ce projet : un WordPress qui ne dicte pas son fonctionnement au métier, mais qui s’adapte à lui.
0 commentaires