Guide complet du bloc 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 magasins en ligne sur WordPress. WooCommerce Blocks aide à créer des pages de magasin personnalisées, à afficher vos produits et à ajouter des fonctionnalités e-commerce avancées telles que le filtrage et la recherche de produits - tout cela 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'expérimentation pour les fonctionnalités expérimentales qui pourraient être ajoutées au noyau de WooCommerce.

Dans ce guide pratique, nous allons discuter des fonctionnalités des blocs WooCommerce et de la façon de les personnaliser. 

Qu'est-ce qu'un bloc WooCommerce ?

Les blocs WooCommerce sont une collection de blocs intégrés à l'éditeur de blocs WordPress (Gutenberg) qui vous permettent d'ajouter facilement diverses fonctionnalités et caractéristiques de WooCommerce à vos pages et articles. Sans écrire de code, ces blocs vous permettent de mettre en avant des produits, des catégories de produits, des filtres de recherche, des paniers d'achat, des caisses, et plus encore.

En termes plus simples, les blocs WooCommerce sont des composants pré-construits que vous pouvez insérer dans votre site WordPress à l'aide de l'éditeur de blocs, offrant un moyen facile d'incorporer des fonctionnalités e-commerce alimentées par WooCommerce. Cela fait 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 dispositions de catégories et des expériences d'achat en utilisant une interface glisser-déposer familière. ext ici ...

Liste des fonctionnalités du bloc WooCommerce

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

• Tous les produits : Affiche tous les produits du magasin dans un format de grille.
• Filtres de produits actifs : Affiche les filtres de produits actifs sous forme de liste ou de puces (similaires à des boutons).
• Toutes les critiques : Affiche toutes les critiques de produits.
• Meilleur produit vendu : Affiche les produits les mieux 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 en vedette : Met en évidence des catégories de produits spécifiques ainsi que des boutons d'appel à l'action.
• Produit en vedette : Affiche les produits en vedette sélectionnés.
• Filtrer par prix : Affiche une plage de prix que les clients peuvent utiliser pour 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 disponibilité en stock. Cette fonctionnalité offre des options pour afficher les produits en stock, en rupture de stock ou en réapprovisionnement.
• Filtrer par évaluation : Permet aux clients de filtrer les produits en fonction des évaluations.
• Filtrer par attribut : Filtre les produits en fonction de la taille ou de la couleur.
• Produits sélectionnés : Affiche les produits sélectionnés dans un format de grille, vous permettant de choisir les produits à afficher spécifiquement.
• Mini panier : Fournit une vue brève du panier d'achat.
• Nouveaux produits : 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 solde : Affiche les produits actuellement en solde 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.) dans un format de grille.
• Produit par catégorie : Affiche les produits en fonction des catégories dans un format de grille.
• Évaluation par produit : Affiche les évaluations regroupées par produit.
• Avis par catégorie : Affiche les avis de produits de catégories spécifiques.
• Produit unique : Affiche une vue détaillée pour un seul produit.
• Produits les mieux notés : Affiche les produits ayant les meilleures notes dans un format de grille.

Comment utiliser le bloc de grille de produits dans WooCommerce

Outre l'apprentissage des fonctionnalités disponibles dans les blocs WooCommerce, essayons d'utiliser ou d'ajouter une grille de produits dans WooCommerce. Assurez-vous d'avoir installé le plugin de blocs WooCommerce sur votre site Web. Voici comment l'ajouter :

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

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

3. Ensuite, pour configurer le bloc, allez dans le panneau de droite.

Dans ce panneau, vous pouvez ajuster plusieurs choses, 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, en les réglant tous 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 en fonction de leurs préférences. Vous pouvez la désactiver si elle n'est pas nécessaire.
• Style avancé : Vous pouvez ajouter des classes CSS pour personnaliser l'apparence.

Comment ajouter des produits vedettes à votre page

Le bloc Produit en vedette vous permet de mettre en avant des produits spécifiques sur votre page ou 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 vedette, 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 choses, notamment :

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

5. Après ajustement, vous pouvez publier ou mettre à jour la page pour voir l'affichage de votre bloc de produits vedettes.

Comment ajouter des blocs de filtre dans WooCommerce

Le bloc de filtre WooCommerce permet aux clients de trouver facilement des produits qui correspondent à leurs critères de recherche. En fournissant des options de filtrage, les clients peuvent rapidement réduire les résultats de recherche aux produits pertinents pour eux.

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'attribut et le filtre de notation.

Maintenant, discutons de chaque type de filtre disponible. 

Ajout d'un filtre par prix

Le bloc de filtre de prix 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 régulier. 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'attribut 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 être sous forme de liste ou de menu déroulant. Vous pouvez également configurer le type de requête pour être soit ET, soit OU. D'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 statut de stock permet aux utilisateurs d'afficher les produits en fonction de leur statut de disponibilité. Ils peuvent afficher les produits disponibles (en stock), les produits en rupture de stock (en rupture de stock) ou en commande à terme. Vous pouvez également configurer l'affichage du 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 de preview lors de son ajout à la page.

Blocs de panier et de paiement

Le bloc de panier d'achat ajoute un affichage de panier d'achat à votre page. Vous pouvez inclure un calculateur de frais d'expédition, sélectionner un lien pour le bouton de paiement, et définir un affichage en mode sombre. Ce bloc fournit également une notification que vous pouvez définir la page comme page de panier d'achat par défaut dans les paramètres 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 paramètres WooCommerce. Il existe également une option pour l'affichage en mode sombre. Ce bloc est composé de plusieurs éléments que vous pouvez personnaliser individuellement. Malheureusement, ce bloc ne fournit pas de preview une fois qu'il est ajouté à la page.

Comment personnaliser la page de magasin 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 créer cette mise en page spécifique de la page de boutique, suivez ces étapes.

1. Créez une nouvelle page et nommez-la "Boutique".

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 la liste déroulante.

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

6. Ajoutez le bloc Tous les produits.

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 de la boutique que vous avez créée.

Construisez votre boutique en ligne avec WooCommerce Block & vendez vos produits

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

Ce plugin vous permet de vendre des produits de téléchargement numérique dans WooCommerce. Le module complémentaire WP File Download facilite la gestion des fichiers et des catégories de fichiers pour les produits numériques WooCommerce. Vous pouvez créer rapidement de nombreux produits de téléchargement numérique associés à un ou plusieurs fichiers.

En outre, ce plugin s'intègre avec Dropbox, Google Drive, Microsoft OneDriveet la fonctionnalité Social Locker . Vous pouvez fournir des fichiers à partir de 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 le module complémentaire WP File Download , la vente de produits numériques dans votre boutique en ligne WooCommerce est devenue plus accessible et efficace. Après avoir construit votre magasin avec les blocs WooCommerce, ce plugin complète parfaitement la vente de votre contenu numérique.

Conclusion

WooCommerce Blocks est un plugin qui vous permet de créer une boutique en ligne complète dans WordPress sans écrire de code. Avec divers blocs, tels que des grilles de produits, des filtres et des affichages de produits en vedette, vous pouvez facilement créer une expérience d'achat engageante et conviviale. L'interface familière de glisser-déposer permet de développer une boutique en ligne plus rapidement et de manière plus efficace.

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

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