Les blocs WooCommerce vous aident à créer des pages de boutique personnalisées, à présenter vos produits et à ajouter des fonctionnalités de commerce électronique avancées telles que le filtrage et la recherche, le tout sans écrire une seule ligne de code.
De nombreux blocs sont livrés par défaut avec WooCommerce, mais plusieurs nouveaux ne le sont pas. Vous pouvez utiliser ces nouveaux blocs dans votre boutique WooCommerce en installant l’extension WordPress WooCommerce Blocks. Cette extension est un terrain d’essai pour les offres expérimentales et les ajouts futurs potentiels aux blocs de base de WooCommerce.
L’intégration des blocs WooCommerce dans WordPress est simple avec Kinsta, où vous pouvez inclure WooCommerce pendant le processus d’installation en cochant une case. Cette intégration facilite la création rapide et sans effort d’une boutique en ligne.
Ce guide pratique vous accompagne dans l’ajout de fonctionnalités WooCommerce à votre site WordPress à l’aide des blocs WooCommerce.
Pré-requis
Pour suivre ce guide, assurez-vous d’avoir :
- WooCommerce installé et activé dans votre tableau de bord WordPress
- Vous êtes familier avec WordPress
Si vous n’avez pas encore de site WordPress, vous pouvez en créer un à partir du tableau de bord de Kinsta ou via DevKinsta localement. Une fois que vous avez votre site, importez ces exemples de produits pour votre boutique WooCommerce.
Explorer les blocs WooCommerce
L’éditeur de blocs par défaut de WordPress, introduit avec la version 5.0, est l’éditeur Gutenberg. Il a remplacé l’éditeur classique par un système basé sur des blocs, permettant aux utilisateurs de construire et de personnaliser un contenu visuellement attrayant sans connaissances approfondies en matière de codage frontend.
WooCommerce Blocks s’intègre de manière transparente à l’interface intuitive par glisser-déposer de l’éditeur Gutenberg, offrant un ensemble de blocs dédiés conçus pour l’affichage des produits, la gestion des paniers, les processus de paiement, et plus encore.
Cette intégration vous permet de profiter pleinement de la flexibilité et de la simplicité de l’éditeur de blocs tout en adaptant votre site WordPress pour des performances eCommerce optimales.
Pour utiliser les blocs WooCommerce, commencez par ouvrir ou créer une page ou un article. Cliquez sur le bouton + dans la barre supérieure pour afficher tous les blocs, puis naviguez jusqu’à la section WOOCOMMERCE. Voici un bref aperçu des différents blocs :
- Recherche de produits – Ajoute une barre de recherche pour des recherches rapides de produits par les clients.
- Tous les produits – Affiche tous les produits de la boutique dans une grille.
- Tous les commentaires – Liste tous les commentaires sur les produits.
- Commande classique – Affiche le code court de commande classique.
- Panier classique – Affiche le code court du panier classique.
- Compte client – Permet aux clients de se connecter et de se déconnecter.
- Catégorie mise en avant – Met en avant une catégorie de produits et un appel à l’action (CTA) pour encourager les réponses rapides.
- Produit mis en avant – Met en avant un produit ou une variante et un CTA.
- Filtres actifs – Affiche les filtres actuellement actifs.
- Filtrer par prix – Affiche une fourchette de prix que les clients peuvent utiliser pour filtrer les produits.
- Filtrer par stock – Permet de filtrer les produits en fonction de leur état d’inventaire.
- Filtrer par attribut – Permet de filtrer les produits en fonction d’attributs tels que la taille ou la couleur.
- Filtrer par évaluation – Permet aux clients de filtrer les produits en fonction de leur évaluation.
- Produits triés sur le volet – Affiche une sélection de produits triés sur le volet dans une grille.
- Mini-panier – Permet d’afficher un bouton de visualisation rapide du panier.
- Avis de la boutique – Affiche les avis destinés aux clients et générés par WooCommerce ou d’autres extensions.
- Produits les plus vendus – Affiche une grille des produits les plus vendus de votre boutique.
- Liste des catégories de produits – Affiche toutes les catégories de produits sous forme de liste ou de liste déroulante.
- Produits par catégorie – Affiche une grille de produits des catégories sélectionnées.
- Collection de produits (Beta) – Affiche les produits d’une collection désignée.
- Produits les plus récents – Affiche les produits les plus récents dans une grille.
- Produits en promotion – Affiche les produits en promotion dans une grille.
- Produits par étiquette – Affiche les produits avec l’étiquette sélectionnée dans une grille.
- Produits les mieux notés – Affiche les produits les mieux notés dans une grille.
- Produits par attributs – Affiche les produits ayant les attributs sélectionnés dans une grille.
- Avis par catégorie – Affiche les avis sur les produits des catégories spécifiées.
- Avis par produit – Affiche les avis organisés par produit.
- Produit unique – Affiche un seul produit.
- Panier – Affiche le panier d’achat.
- Commande – Affiche le formulaire permettant aux clients de passer commande.
Vous savez maintenant ce que représente chaque bloc. Utilisons certains de ces blocs pour créer une expérience de commerce électronique.
Utiliser le bloc Grille de produits dans WooCommerce
Un bloc de grille de produits est un outil polyvalent pour présenter les produits de votre boutique dans un format organisé et en grille sur votre site WordPress. Voici comment ajouter et personnaliser un bloc de grille de produits :
- Naviguez jusqu’à la page ou l’article où vous souhaitez afficher les produits. Attribuez un titre comme « Produits »
- Cliquez sur le bouton + dans la barre de navigation supérieure pour afficher tous les blocs. Descendez jusqu’à la section WOOCOMMERCE et sélectionnez Tous les produits. Cette action permet d’afficher vos produits dans une grille sur la page.
Utiliser le bloc Tous les produits WooCommerce pour afficher les produits dans une grille. - Pour configurer ce bloc, utilisez le panneau des paramètres du bloc sur le côté droit. Vous pouvez accéder aux paramètres en cliquant sur l’icône Réglages (la deuxième icône la plus à droite sur la barre de navigation supérieure).
Panneau de configuration pour ajuster le bloc Tous les produits. Vous pouvez y adapter la présentation, le contenu et le style de la grille :
- Réglages de mise en page : Ajustez le nombre de lignes et de colonnes. Par exemple, réglez les deux sur 2 pour obtenir un aspect équilibré.
- Réglages de contenu : Décidez si vous souhaitez inclure un menu déroulant de tri pour les clients. Cette fonction permet aux clients de trier les produits dans l’ordre de leur choix. Vous pouvez la désactiver si vous le souhaitez.
- Style avancé : Si nécessaire, vous pouvez ajouter des classes CSS pour un style plus sophistiqué.
- Prévisualisez la page une fois que vous avez finalisé les configurations pour vous assurer que tout apparaît comme prévu. Cliquez ensuite sur le bouton Publier. Cette étape vous permet de rendre la page accessible publiquement, en privé ou avec une protection par mot de passe, selon vos préférences.
La page Produits mise à jour affiche les produits dans une grille 2 par 2 et comporte une barre de navigation.
Ajouter un bloc Produit mis en avant à votre page ou à votre article
Le bloc Produit mis en avant vous permet de mettre en avant un produit sur votre page ou dans votre article. Vous pouvez sélectionner un produit, personnaliser ses réglages d’affichage et l’ajouter à votre contenu pour attirer l’attention sur un article particulier que vous souhaitez mettre en valeur.
Procédez comme suit pour ajouter un bloc Produit mis en avant :
- Commencez par vous rendre sur la page ou dans l’article où vous souhaitez présenter le produit. Imaginez que vous conceviez une grille de produits et que vous souhaitiez placer le produit mis en avant en haut de la page. Créez un espace à cet endroit et vous remarquerez un bouton + sur la gauche.
Si vous disposez d’un bloc existant à proximité de l’emplacement souhaité, cliquez sur les trois points verticaux pour faire apparaître un menu. Vous pouvez choisir d’ajouter avant ou après.
Ajout du bloc Produit lis en avant avant le bloc Tous les produits. - Sélectionnez le bouton + dans la barre de navigation supérieure pour afficher tous les blocs et recherchez Produit mis en avant.
Sélectionnez un produit comme produit mis en avant à l’aide du bloc Produit mis en avant. - Choisissez le produit que vous souhaitez afficher. Cliquez ensuite sur Terminé.
- Pour donner à votre bloc Produit mis en avant une apparence unique, cliquez sur Réglages. Dans le panneau des réglages du bloc, vous pouvez
- Décider d’afficher ou non la description et le prix du produit
- Configurer l’affichage de vos médias (images et vidéos).
- Spécifier le texte alt pour l’image du produit.
- Choisir la couleur de superposition du bloc.
- Ajuster l’opacité du bloc.
Réglage des paramètres du bloc Produit mis en avant. - Une fois que vous avez effectué tous les réglages nécessaires, vous pouvez publier votre page ou la mettre à jour si elle est déjà en ligne. Cela vous permet de voir le bloc en action et de vous assurer qu’il est conforme à vos attentes.
Aperçu de la page Produits mise à jour affichant le bonnet en vedette au-dessus de la grille de produits.
Utiliser les blocs de filtres dans WooCommerce
Les blocs de filtres permettent à vos clients d’affiner les recherches de produits en fonction de critères spécifiques, ce qui les aide à trouver rapidement les produits qui correspondent à leurs préférences ou à leurs exigences.
- Naviguez jusqu’à la page ou l’article où vous souhaitez ajouter les blocs. Ce guide utilise la même page Produits que les étapes précédentes.
- Choisissez l’endroit où vous souhaitez ajouter les filtres.
- Cliquez sur le bouton + dans la barre de navigation supérieure pour afficher tous les blocs. Faites défiler la page jusqu’à la section WOOCOMMERCE et voyez une option de filtre pour le prix, le stock, l’attribut et l’évaluation. Par exemple, si vous choisissez Filtrer par prix.
Ajouter le bloc Filtrer par prix
En sélectionnant ce bloc, vous pouvez afficher une barre de prix qui permet aux utilisateurs de filtrer les produits qui apparaissent sur la page en fonction de la fourchette de prix souhaitée. Vous pouvez personnaliser les réglages du bloc dans le panneau de droite en fonction de vos besoins.
Ajout du bloc Filtrer par attribut
Vous pouvez également utiliser le bloc Filtrer par attribut.
Vous pouvez choisir un attribut spécifique, tel que la couleur, puis configurer les réglages en conséquence. Par exemple, vous pouvez activer l’option Afficher le nombre de produits pour afficher le nombre de produits disponibles dans chaque couleur.
Vous pouvez ensuite afficher la page en direct et tester la fonctionnalité des boutons de filtrage.
En suivant ces étapes, vous pouvez offrir à vos clients une expérience d’achat transparente en leur permettant d’affiner facilement leurs recherches de produits en fonction de divers critères, ce qui améliore leur satisfaction et les aide à trouver les produits souhaités.
Pages de panier et de commande
Les fonctions de panier et de commande de votre boutique en ligne doivent être intuitives et entièrement fonctionnelles pour que l’expérience utilisateur soit la plus fluide possible. Pour garantir une excellente expérience client, il faut gérer efficacement les articles du panier et faciliter le processus de paiement.
WooCommerce crée les pages de panier et de commande par défaut en utilisant les blocs appropriés. Les clients peuvent ajouter des produits à leur panier et y accéder via la barre de navigation.
Après avoir confirmé le contenu de son panier, votre client peut sélectionner le bouton Procéder à la commande, remplir les informations nécessaires et passer sa commande.
Comment créer une page de boutique personnalisée
Maintenant que vous avez appris à utiliser certains blocs WooCommerce, la prochaine étape consiste à les combiner pour créer une page de boutique personnalisée et conviviale avec les blocs suivants :
- Rechercher des produits
- Filtrer par prix
- Catégories de produits
- Produit mis en avant
- Tous les produits
Pour créer cette présentation de boutique personnalisée, créez une nouvelle page et suivez les étapes ci-dessous.
- Saisissez « Boutique » comme titre de page.
La page Boutique en mode édition. - En suivant les mêmes étapes que précédemment pour ajouter un bloc, ajoutez le bloc Rechercher des produits. N’appliquez aucune configuration.
Ajout du bloc Recherche de produits. - Ajoutez le bloc Liste des catégories de produits.
Ajout du bloc Liste des catégories de produits. Dans la page de configuration du bloc, réglez le STYLE D’AFFICHAGE sur Menu déroulant.
Ajustez les réglages du bloc Liste des catégories de produits. - Ajoutez ensuite le bloc Filtrer par prix. Ne configurez rien pour ce bloc.
- Ajoutez le bloc Produit mis en avant et sélectionnez le produit à afficher. Appliquez les mêmes configurations que pour le bloc Produit mis en avant que vous avez créé précédemment.
La page de la boutique affiche le produit mis en avant avec quelques réglages pour le produit mis en avant. - Ajoutez le bloc Tous les produits.
Ajout du bloc Tous les produits. Pour les réglages de ce bloc, réglez les valeurs COLONNES et LIGNES sur 2 et désélectionnez la liste déroulante Afficher le tri.
Ajustez les réglages du bloc Tous les produits. - Publiez la page et voyez les résultats.
Prévisualisation de la page Boutique. 
Prévisualisation de la page Boutique.
Comment surveiller et analyser la performance des blocs
Les outils robustes de Kinsta surveillent et analysent la performance des pages qui utilisent les blocs WooCommerce.
L’outil APM de Kinsta
L’outil APM (Application Performance Monitoring) de Kinsta vous permet de surveiller la performance des pages contenant des blocs de WooCommerce. Il capture des informations horodatées sur les processus PHP, les requêtes de base de données MySQL et d’autres mesures cruciales, vous permettant de suivre et d’analyser les transactions facilitées par WooCommerce.
Vous pouvez, par exemple, analyser la durée et la fréquence des interactions et les goulots d’étranglement potentiels associés à ces pages. Grâce à ces informations, vous pouvez dépanner et optimiser les performances avec précision.
L’outil d’analyse de Kinsta
L’évaluation de l’impact des blocs WooCommerce sur l’engagement des utilisateurs et les ventes nécessite une approche à plusieurs facettes. Les outils d’analyse complets de Kinsta jouent un rôle crucial à cet égard. L’utilisation des fonctions d’analyse WordPress dans le tableau de bord MyKinsta vous donne des informations précieuses sur les différentes mesures de performance qui influencent directement l’expérience de l’utilisateur – et, par conséquent, les ventes.
- La section Ressources du tableau de bord MyKinsta suit le nombre total de visites de votre site, l’espace disque et l’utilisation de la bande passante. Elle fournit un aperçu quantitatif du trafic du site et de l’utilisation des ressources.
- La section Performance inclut des mesures telles que le temps de réponse moyen de PHP + MySQL et l’utilisation d’AJAX. Ces statistiques vous aident à suivre la réactivité et l’interactivité des pages utilisant les blocs WooCommerce.
- La section Réponse fournit des analyses de codes de réponse et d’erreurs, vous aidant à mieux comprendre les interactions des utilisateurs et les obstacles potentiels qu’ils peuvent rencontrer.
- La section Géo & IP vous permet de suivre l’utilisation du réseau de diffusion de contenu (CDN), l’efficacité du cache et les informations géographiques. Ces informations permettent d’affiner votre site en fonction du comportement des utilisateurs, de leur localisation et des données de performance.
En surveillant de près ces analyses, vous pouvez identifier les goulots d’étranglement potentiels et optimiser vos pages à l’aide des blocs WooCommerce pour garantir une expérience utilisateur transparente et attrayante.
Vous pouvez lire notre guide ultime sur 18 façons puissantes d’accélérer votre boutique WooCommerce pour apprendre plus de conseils. La vitesse est cruciale pour les boutiques en ligne, car les sites à chargement lent entraînent la frustration des utilisateurs et la perte de ventes.
Résumé
Ce guide a exploré les capacités des blocs de WooCommerce, de l’ajout de grilles de produits et de produits mis en avant à la mise en œuvre de puissants blocs de filtres. Il a également souligné l’importance des boîtes de panier et de commande, éléments essentiels pour guider les clients dans une expérience d’achat transparente.
La combinaison stratégique de différents blocs WooCommerce permet d’obtenir une mise en page intuitive et visuellement attrayante. Le processus implique une sélection, une configuration et un arrangement minutieux des blocs afin de répondre aux fonctionnalités spécifiques et aux préférences des clients.
Choisir le service d’hébergement WordPress de Kinsta améliore significativement la performance et la fiabilité de vos sites WooCommerce. Avec des configurations de serveur optimisées, des mesures de sécurité robustes et une évolutivité sans faille, Kinsta s’assure que votre boutique en ligne fonctionne avec une efficacité maximale.
Que vous utilisiez les blocs WooCommerce pour l’affichage des produits, les filtres ou les fonctionnalités du panier, l’infrastructure d’hébergement de Kinsta fournit la vitesse et la stabilité nécessaires pour offrir une expérience d’achat exceptionnelle à vos clients.
Avez-vous déjà utilisé des blocs WooCommerce ? Si oui, quel est votre bloc préféré, et quel nouveau bloc aimeriez-vous voir ajouté ? Faites-nous part de vos réflexions dans la section des commentaires.
Joel est un développeur d'interfaces publiques qui travaille chez Kinsta en tant que rédacteur technique. Il est un enseignant passionné par l'open source et a écrit plus de 200 articles techniques, principalement autour de JavaScript et de ses frameworks.
Laisser un commentaire