Guide complet des blocs WooCommerce

WooCommerce est l'un des plugins populaires pour créer des sites e-commerce sur WordPress. WooCommerce Blocks est l'un des plugins de WooCommerce, conçu pour faciliter la création de boutiques en ligne sur WordPress par les utilisateurs. WooCommerce Blocks aide à concevoir des pages de boutique personnalisées, à afficher vos produits et à ajouter des fonctionnalités e-commerce avancées telles que le filtrage et la recherche de produits – le tout sans écrire une seule ligne de code. 

Vous devez installer l'extension WordPress WooCommerce Blocks pour utiliser ces nouveaux blocs. Cette extension est un terrain d'essai pour des fonctionnalités expérimentales qui pourraient être ajoutées au cœur de WooCommerce.

Dans ce guide pratique, nous aborderons les fonctionnalités des blocs WooCommerce et comment les personnaliser. 

Qu'est-ce qu'un bloc WooCommerce ?

WooCommerce Blocks est une collection de blocs intégrés à l' éditeur de blocs WordPress (Gutenberg) qui vous permettent d'ajouter facilement diverses fonctionnalités et options WooCommerce à vos pages et articles. Sans écrire de code, ces blocs vous permettent de présenter des produits, des catégories de produits, des filtres de recherche, des paniers, des pages de commande, et plus encore.

En termes plus simples, les blocs WooCommerce sont des composants prédéfinis que vous pouvez insérer dans votre site WordPress à l'aide de l'éditeur de blocs, offrant un moyen simple d'intégrer des fonctionnalités e-commerce propulsées par WooCommerce. Ils font partie du plugin WooCommerce de base, vous les obtenez donc automatiquement lorsque vous installez et activez WooCommerce sur votre site WordPress.

De plus, ils s'intègrent parfaitement à l'éditeur de blocs WordPress, vous permettant de créer des pages de produits personnalisées, des mises en page de catégories et des expériences d'achat à l'aide d'une interface familière de glisser-déposer.

Liste des fonctionnalités du bloc WooCommerce

Après avoir compris ce qu'est un bloc WooCommerce, nous allons maintenant examiner chaque fonctionnalité fournie une par une :

• Tous les produits : Affiche tous les produits de la boutique sous forme de grille.
• Filtres de produits actifs : Affiche les filtres de produits actifs sous forme de liste ou de puces (semblables à des boutons).
• Tous les avis : Affiche tous les avis sur les produits.
• Produit le plus vendu : Affiche les produits les plus vendus dans un format de grille.
• Paiement : Affiche un formulaire permettant aux clients de finaliser leurs commandes.
• Panier : Affiche le panier d'achat.
• Catégorie mise en avant : Met en avant des catégories de produits spécifiques avec des boutons d'appel à l'action.
• Produit vedette : Affiche les produits vedettes sélectionnés.
• Filtrer par prix : Affiche une plage de prix permettant aux clients de filtrer les produits. Vous pouvez également activer une plage de prix modifiable en cliquant sur un bouton ou un texte ici.
• Filtrer par stock : Permet de filtrer les produits en fonction de leur état de disponibilité en stock. Cette fonctionnalité offre des options pour afficher les produits en stock, en rupture de stock ou en cours de réapprovisionnement.
• Filtrer par note : Permet aux clients de filtrer les produits en fonction des notes.
• Filtrer par attribut : Filtre les produits en fonction de la taille ou de la couleur.
• Produits sélectionnés manuellement : Affiche les produits sélectionnés manuellement dans un format de grille, ce qui vous permet de choisir spécifiquement les produits à afficher.
• Mini panier : Fournit un aperçu rapide du panier d'achat.
• Produits les plus récents : Affiche les produits les plus récents disposés dans un format de grille. Ils peuvent être personnalisés en ajoutant/supprimant des éléments tels que le titre, le prix, la note et le bouton d'achat.
• Produit en promotion : Affiche les produits actuellement en promotion dans un format de grille et peut être personnalisé en ajoutant/supprimant des éléments tels que le titre, le prix, la note et le bouton d'achat.
• Recherche de produit : Ajoute une barre de recherche pour faciliter la recherche de produits par les clients.
• Produit par étiquette : Affiche les produits avec des étiquettes spécifiques dans un format de grille.
• Produit par attribut : Affiche les produits avec des attributs spécifiques (couleur, taille, etc.) sous forme de grille.
• Produit par catégorie : Affiche les produits en fonction des catégories dans un format de grille.
• Avis par produit : Affiche les avis regroupés par produit.
• Avis par catégorie : Affiche les avis produits de catégories spécifiques.
• Produit unique : Affiche une vue détaillée d'un produit unique.
• Produits les mieux notés : Affiche les produits ayant les meilleures notes dans un format de grille.

Comment utiliser le bloc grille de produits dans WooCommerce

En plus de découvrir les fonctionnalités disponibles dans les blocs WooCommerce, essayons d'utiliser ou d'ajouter une grille de produits dans WooCommerce. Assurez-vous d'avoir installé l'extension WooCommerce Blocks sur votre site. Voici comment l'ajouter :

1. Ouvrez la page ou l'article où vous souhaitez afficher la grille de produits, puis saisissez le titre « Produit ».

2. Dans la navigation de gauche, cliquez sur le bouton (+) > faites défiler vers le bas jusqu'à la section WooCommerce > sélectionnez « grille de produits ».

3. Ensuite, pour configurer le bloc, accédez au panneau de droite.

Dans ce panneau, vous pouvez ajuster plusieurs éléments, notamment :

• Paramètres de mise en page : Vous pouvez personnaliser le nombre de lignes et de colonnes affichées dans la grille de produits. Par exemple, définissez les deux sur 2 pour une vue équilibrée.
• Paramètres de contenu : Vous pouvez afficher un menu déroulant pour trier les produits. Cette fonctionnalité permet aux clients de trier les produits selon leurs préférences. Vous pouvez la désactiver si elle n'est pas nécessaire.
• Paramètres de style avancés : Vous pouvez ajouter des classes CSS pour personnaliser l'apparence.

Comment ajouter des produits mis en avant à votre page

Le bloc Produit vedette vous permet de mettre en avant des produits spécifiques sur votre page ou votre article. Avec ce bloc, vous pouvez sélectionner des produits, personnaliser leur apparence et les placer dans votre contenu pour attirer les visiteurs vers les articles que vous souhaitez promouvoir.

Pour ajouter le bloc Produit mis en avant, suivez ces étapes :

1. Ouvrez la page ou l'article où vous souhaitez l'ajouter. Par exemple, si vous le placez au-dessus de la grille de produits, créez de l'espace dans cette zone et cliquez sur le bouton « + » qui apparaît.

2. Sélectionnez le bouton « + » dans la barre d'outils du bloc pour ouvrir la liste des blocs, puis recherchez et sélectionnez « Produit mis en avant ».

3. Choisissez les produits que vous souhaitez mettre en avant, puis cliquez sur « Terminé ».
4. Pour personnaliser l'apparence du bloc, cliquez sur « Paramètres ». Dans le panneau des paramètres, vous pouvez ajuster plusieurs éléments, notamment :

• Afficher ou masquer la description et le prix du produit.
• Configurer l'affichage des médias (image et vidéo).
• Ajouter un texte alternatif pour les images des produits.
• Sélectionnez la couleur de superposition du bloc.
• Ajustez l'opacité du bloc.

5. Après avoir ajusté, vous pouvez publier ou mettre à jour la page pour voir l'affichage de votre bloc de produits mis en avant.

Comment ajouter des blocs de filtres dans WooCommerce

Le bloc Filtre WooCommerce permet aux clients de trouver facilement les produits correspondant à leurs critères de recherche. En proposant des options de filtrage, les clients peuvent rapidement affiner les résultats de recherche pour ne voir que les produits qui les intéressent.

Pour ajouter le bloc de filtre, suivez ces étapes :

1. Ouvrez la page ou l'article où vous souhaitez placer le bloc de filtre.
2. Déterminez l'emplacement souhaité pour placer le bloc de filtre.
3. Dans la barre d'outils de l'éditeur de blocs, cliquez sur le bouton « + » et recherchez les options de filtre WooCommerce telles que le filtre de prix, le filtre de stock, le filtre d'attributs et le filtre de notation.

Maintenant, examinons chaque type de filtre disponible. 

Ajout du filtre par prix

Le bloc Produit – Filtre de prix vous permet d'ajouter une fonctionnalité de filtrage qui permet aux utilisateurs de sélectionner la plage de prix souhaitée. La plage de prix peut être affichée sous forme de boutons modifiables ou de texte normal. Vous pouvez ajouter des boutons si vous le souhaitez et ajuster leur niveau de titre.

Ajout d'un filtre par attribut

Le bloc de filtre d'attributs de produit permet aux utilisateurs de filtrer les produits en fonction d'attributs tels que la couleur et la taille. Vous pouvez choisir les attributs que vous souhaitez utiliser dans la liste disponible. Son affichage peut se présenter sous la forme d'une liste ou d'un menu déroulant. Vous pouvez également configurer le type de requête pour qu'il soit AND ou OR. Les autres fonctionnalités incluent l'affichage du nombre de produits, la sélection du niveau de titre, l'ajout de boutons et le choix du filtre.

Ajout d'un filtre par stock

Le bloc de filtre de produits par état de stock permet aux utilisateurs d'afficher les produits en fonction de leur état de disponibilité. Ils peuvent afficher les produits disponibles (en stock), en rupture de stock (out of stock) ou en précommande. Vous pouvez également le configurer pour afficher le nombre de produits, sélectionner le niveau de titre et ajouter des boutons. Ce bloc peut être utilisé avec d'autres blocs WooCommerce, tels que Tous les produits. Malheureusement, ce bloc ne fournit pas d'aperçu lorsqu'il est ajouté à la page.

Blocs de panier et de validation de commande

Le bloc de panier ajoute un affichage de panier à votre page. Vous pouvez inclure un calculateur de frais de livraison, sélectionner un lien pour le bouton de commande et définir un affichage en mode sombre. Ce bloc fournit également une notification vous permettant de définir la page comme page de panier par défaut dans les réglages WooCommerce. Un lien pour fournir des commentaires est également inclus.

Pendant ce temps, le bloc de paiement fournit un formulaire de paiement pour votre panier d'achat. Vous serez informé que cette page peut être définie comme page de paiement par défaut dans les réglages de WooCommerce. Il existe également une option d'affichage en mode sombre. Ce bloc se compose de plusieurs éléments que vous pouvez personnaliser individuellement. Malheureusement, ce bloc ne fournit pas d'aperçu une fois ajouté à la page.

Comment personnaliser la page Boutique sur WooCommerce

Après avoir appris à utiliser les différents blocs WooCommerce, vous pouvez en combiner plusieurs pour créer une page de boutique personnalisée conviviale. Pour construire cette mise en page de boutique spécifique, suivez ces étapes.

1. Créez une nouvelle page et nommez-la « Shop ».

2. Ajoutez le bloc de recherche de produits.

3. Ajoutez le bloc Liste des catégories de produits

Ensuite, définissez le style d'affichage sur le menu déroulant.

4. Ajoutez le filtre de prix bloc.
5. Ajoutez le produits en vedette bloc et sélectionnez les produits que vous souhaitez mettre en avant. Configurez selon vos besoins.

6. Ajoutez le bloc All Products .

Définissez le nombre de colonnes et de lignes sur 2, et désactivez l'option de liste déroulante de tri.

7. Enfin, publiez la page pour voir la mise en page finale de la page boutique que vous avez créée.

Créez votre boutique en ligne avec WooCommerce Block et vendez vos produits

Après avoir créé avec succès une page boutique personnalisée avec WooCommerce Blocks, vous pouvez désormais commencer à vendre vos produits physiques et numériques. En particulier pour les produits numériques, il est crucial d'ajouter une extension de téléchargement de fichiers comme WP File Download Addon.

Cette extension vous permet de vendre des produits téléchargeables dans WooCommerce. L'addon WP File Download facilite la gestion des fichiers et des catégories de fichiers pour les produits numériques WooCommerce. Vous pouvez rapidement créer de nombreux produits téléchargeables associés à un ou plusieurs fichiers.

De plus, ce plugin s'intègre à Dropbox, Google Drive, Microsoft OneDriveet à la fonctionnalité Social Locker . Vous pouvez fournir des fichiers depuis ces services cloud en tant que téléchargements numériques WooCommerce avec un accès hautement restreint via des connecteurs d'API cloud.

Avec l'addon WP File Download , vendre des produits numériques dans votre boutique en ligne WooCommerce est devenu plus accessible et plus efficace. Après avoir construit votre boutique avec WooCommerce Blocks, ce plugin complète parfaitement la vente de votre contenu numérique.

Conclusion

WooCommerce Blocks est une extension qui vous permet de créer une boutique en ligne complète dans WordPress sans écrire de code. Grâce à divers blocs, tels que des grilles de produits, des filtres et des affichages de produits mis en avant, vous pouvez facilement créer une expérience d'achat attrayante et conviviale. L'interface familière de glisser-déposer rend le développement d'une boutique en ligne plus rapide et plus efficace.

Après avoir construit votre boutique en ligne, l'étape suivante consiste à vendre des produits physiques et numériques. Vous pouvez utiliser l'extension WP File Download Addon pour vendre des produits numériques avec WooCommerce, tels que des ebooks, des logiciels ou du contenu multimédia.

L'addon WP File Download est disponible à partir de 49 $ par an et a été utilisé par plus de 60 000 membres. Alors, qu'attendez-vous ? Rejoignez-nous pour de meilleures ventes de produits numériques !