WooCommerce : Comment démarrer avec les blocs WooCommerce – PARTIE 1

Publié: 2022-01-26

Depuis WordPress 5.0, l'éditeur de page/publication par défaut a été complètement redéveloppé. Vous avez sûrement entendu parler de Gutenberg.

La mauvaise nouvelle est que WooCommerce a rejoint la nouvelle expérience d'édition beaucoup plus lentement, et il reste encore des choses importantes à développer pour la rendre compatible avec Gutenberg.

La progression de la compatibilité peut être suivie via le plugin officiel WooCommerce Blocks, qui indique « Vous pouvez utiliser ce plugin si vous souhaitez accéder à tous les blocs disponibles pour WooCommerce – y compris les blocs expérimentaux. Nos blocs "stables" actuels sont regroupés dans WooCommerce, et peuvent être ajoutés à partir de la section "WooCommerce" dans l'insertion de blocs ", car vous pouvez y trouver leurs blocs "bêta", ceux qu'ils appellent "expérimentaux" et qui seront officiellement publiés dans WooCommerce une fois qu'ils sont approuvés.

Dans cet article, nous approfondirons spécifiquement les blocs WooCommerce - ce qu'ils sont, pourquoi ils sont importants, combien de blocs sont disponibles et comment vous pouvez les utiliser.

Puisqu'il s'agit d'un sujet énorme - nous avons vingt blocs WooCommerce à couvrir - nous le divisons en deux parties. Cet article évaluera les dix premiers blocs que vous pouvez utiliser dans votre magasin. Mais d'abord, identifions ce que sont les blocs WooCommerce et examinons pourquoi ils sont si importants.

Que sont les blocs WooCommerce et pourquoi sont-ils si importants ?

WooCommerce crée automatiquement des pages telles que des pages de catégorie et des pages de boutique pour afficher vos produits. Cependant, il est probable qu'un autre site Web WooCommerce ressemble à votre boutique de commerce électronique, s'il choisit la même page et la même présentation de produit que la vôtre.

Cependant, avec WooCommerce Blocks, vous pouvez rendre votre boutique unique et présenter vos produits de la manière et de la disposition que vous préférez.

Les blocs WooCommerce vous offrent plus de contrôle sur la conception de votre boutique. Son intégration avec l'éditeur de blocs vous permet de personnaliser votre boutique sans écrire une seule ligne de CSS, ajouter du code ou nécessiter une expertise en conception graphique.

Vous pouvez facilement ajouter des blocs avec une simple méthode de glisser-déposer. En utilisant l'interface facile à utiliser de WooCommerce Block, vous pouvez :

  • Créer des pages de magasin personnalisées
  • Créer des pages de destination pour afficher une collection de produits
  • Ajoutez des blocs de produits dans des pages spécifiques ou même des articles de blog
  • Ajoutez des recommandations de produits, des critiques de produits et des bannières promotionnelles où vous le souhaitez

Alors, jetons un coup d'œil aux différents blocs WooCommerce. Vous obtenez 20 blocs WooCommerce intégrés lorsque vous installez WooCommerce . Voici un aperçu des dix premiers blocs et comment vous pouvez les utiliser.

Une liste des blocs WooCommerce essentiels [Partie 1]

1. Filtres de produits actifs

La source

Les filtres de produits facilitent la recherche de produits pour vos clients. Sans eux, vous risquez de perdre des clients car ils devront rechercher manuellement les produits de leur choix. Malheureusement, ce processus prend du temps et rend votre site Web moins utile et moins interactif pour votre public cible.

Le bloc Filtres de produits actifs affiche les filtres de produits qui sont actuellement actifs dans la vue actuelle (donc, les filtres qui ont été sélectionnés à l'étape précédente). De plus, ce bloc saisira automatiquement les attributs de votre produit, permettant à vos clients de filtrer les produits actifs par n'importe quel attribut.

Vous pouvez styliser l'en-tête du bloc et choisir d'afficher les filtres sous forme de puce (similaire aux boutons) ou de liste. Ainsi, ce bloc facilite l'ajout de filtres tels que la taille, la forme ou la couleur du produit, ce qui le rend extrêmement pratique pour vos clients.

2. Tous les avis

La source

L'affichage des avis clients est un excellent moyen de mettre en valeur la crédibilité et l'authenticité de votre produit. Il agit comme un témoignage de produit auquel les acheteurs font plus confiance que les revendications du produit, ce qui augmente les chances que les utilisateurs achètent les produits.

Selon Trustpilot, 89 % des clients lisent les avis en ligne avant d'acheter les produits. Cela montre le rôle essentiel que jouent les avis des clients dans vos ventes de commerce électronique.

Ainsi, l'inclusion du bloc Tous les avis sur votre site Web WooCommerce peut changer la donne pour vos ventes de produits.

Ce bloc vous permettra d'afficher la liste complète de tous les avis sur les produits que vous avez reçus n'importe où sur votre boutique, comme l'article de blog ou la page de destination.

Il est livré avec de nombreuses options de personnalisation où vous pouvez choisir de masquer ou d'afficher le nom du produit, le nom du réviseur, la date de révision, la note du produit, le contenu de la révision et l'image du produit.

Vous pouvez personnaliser les paramètres en permettant aux utilisateurs de trier par note la plus basse ou la note la plus élevée, ou même de définir le nombre d'avis à afficher et d'ajouter une option "Charger plus d'avis" pour vos clients.

3. Tous les produits

La source

Le bloc Tous les produits affiche tous les produits de votre boutique WooCommerce, et il est livré avec des options de tri et de pagination. Vous pouvez aligner ce bloc avec le bloc Filtres de produits actifs pour afficher une liste déroulante de tri.

Grâce à son option de pagination intégrée, vos clients peuvent facilement parcourir vos produits en avant et en arrière pour afficher la page complète du produit si vous ne souhaitez pas afficher tous les produits sur une seule page.

Vous avez le choix de sélectionner l'ordre de tri des produits par défaut - que ce soit pour trier par derniers produits ou par popularité des produits. Vous pouvez également masquer la liste déroulante de tri si nécessaire. De plus, ce bloc vous permet également d'ajouter du contenu supplémentaire comme des images, du texte et des vidéos.

4. Catégorie en vedette

La source

Le bloc de catégorie en vedette vous permet de choisir des produits d'une catégorie de produits particulière que vous souhaitez configurer et afficher en tant que catégorie en vedette ou dans une bannière d'appel à l'action.

C'est une solution parfaite pour mettre en évidence une catégorie de produits spécifique sur votre page de destination ou un article de blog, afin de générer du trafic et de maximiser les ventes de cette catégorie de produits spécifique.

L'une de ses fonctionnalités les plus impératives est le sélecteur de point focal qui vous permet de faire glisser le point focal de l'image du produit pour le placer parfaitement dans le conteneur d'arrière-plan. Ce bloc vous offre également des options telles que masquer ou afficher les descriptions de produits, ajouter une couleur de superposition et modifier l'opacité.

Ainsi, si vous avez récemment lancé une nouvelle collection de produits, le bloc Catégorie en vedette peut vous aider à afficher la collection à plusieurs endroits de votre magasin et à générer des ventes.

5. Produits en vedette

La source

Le bloc de produits en vedette vous permet d'afficher les produits de votre magasin dans une bannière présentable, agréable et bien conçue avec un appel à l'action (CTA).

Il est livré avec de nombreux paramètres et options pour afficher ou masquer le prix et la description du produit, contrôler l'alignement du texte, ajouter une couleur de superposition, ajuster le positionnement et l'opacité de l'arrière-plan, remplacer la photo du produit et modifier le bouton CTA.

Ce bloc est le moyen idéal pour présenter des produits spécifiques sur vos articles de blog ou votre page de destination et attirer l'attention des clients - en les incitant à effectuer l'achat.

6. Produits par catégorie

La source

Le bloc Produits par catégorie vous permet d'afficher les produits d'une ou plusieurs catégories sélectionnées dans une grille.

Il vous permet de modifier le nombre de lignes et de colonnes de la grille avec une option pour masquer ou afficher le titre du produit, le prix, la note et le bouton Ajouter au panier. Ce bloc peut créer différentes sections présentant différentes catégories de produits sur votre page d'accueil.

7. Produits les plus vendus

La source

Le bloc Produits les plus vendus vous permet d'afficher les produits les plus vendus de votre magasin dans une grille.

La conception de ce bloc est très similaire à celle du bloc Produits par catégorie avec des options de personnalisation identiques. Par exemple, vous pouvez définir des options de filtrage appropriées pour les produits, comme filtrer par couleur, taille et prix.

En utilisant ce bloc, vous pouvez encourager les clients à parcourir vos produits les plus vendus et les inciter à acheter des produits pour eux-mêmes.

8. Filtrer les produits par prix

La source

Ce bloc affiche un curseur facile à utiliser qui permet aux clients de filtrer les produits par prix. Par exemple, faire glisser la poignée gauche vers la droite augmente le prix, tandis que faire glisser la poignée droite vers la gauche le réduit.

Vous pouvez modifier la fourchette de prix minimum et maximum et ajouter un bouton pour définir le niveau de titre. Il fonctionne parfaitement en combinaison avec le bloc Tous les produits.

9. Filtrer les produits par attribut

La source

Ce bloc ajoute un filtre qui permet à vos clients de filtrer les produits par attributs. Les attributs peuvent être la couleur, la taille ou même la saveur des aliments.

Vous avez le choix d'afficher le filtre sous forme de liste ou de liste déroulante. De plus, vous pouvez choisir le niveau de titre, inclure le nombre de mots ou ajouter un bouton.

10. Produits les plus récents

La source

Vous pouvez utiliser ce bloc pour afficher tous vos derniers lancements et produits les plus récents dans une grille. Les clients peuvent filtrer les produits en fonction d'une catégorie pertinente.

Ce bloc est parfait pour présenter et commercialiser le nouveau stock de votre magasin sur la page d'accueil et attirer plus de regards. Ses options de personnalisation sont similaires à celles du bloc des produits les plus vendus.

Conclusion

Que vous soyez un féru de technologie ou un professionnel non technique, l'utilisation des blocs WooCommerce est le moyen le plus simple et le plus rentable d'afficher vos produits de manière attrayante et de faire passer votre boutique au niveau supérieur.

Vous pouvez promouvoir vos produits sur n'importe quelle page et article de blog sur votre site Web. Tout ce que vous avez à faire est de faire glisser les blocs vers un endroit spécifique sur une page - et les mises à jour de la page se font en temps réel.

Donc, si vous souhaitez égayer votre boutique WooCommerce et attirer plus d'attention, utilisez les blocs WooCommerce mentionnés ci-dessus.

Nous avons également la partie 2 de cet article avec dix autres blocs WooCommerce et des moyens de les ajouter et de les modifier facilement. Découvrez-le dès sa mise en ligne la semaine prochaine !