Un aperçu du nouveau plugin WooCommerce Blocks

Lorsque vous installez ou mettez à jour WooCommerce, il inclut un nouveau plugin appelé WooCommerce Blocks. Cela ajoute de nouveaux blocs à l'éditeur de blocs WordPress qui vous permettent d'ajouter des produits WooCommerce à vos pages et publications. Dans cet article, nous examinerons les blocs WooCommerce et verrons ce qu'ils peuvent faire.

Plugin de blocs WooCommerce

WooCommerce Blocks est un nouveau module complémentaire pour WooCommerce qui ajoute 7 blocs à Gutenberg :

1. Produit en vedette
2. Produits triés sur le volet
3. Produits les plus vendus
4. Produits les mieux notés
5. Produits les plus récents
6. Produits en solde
7. Produits par catégorie

Chacun des blocs s'affiche dans une grille ajustable et peut être trié ou filtré. Les grilles vous permettent de spécifier le nombre de colonnes dans la mise en page. Vous choisissez de 1 à 6 colonnes en ajustant un curseur. Plusieurs blocs vous permettent également d'ajuster le nombre de lignes. 4 est la valeur par défaut pour tous les blocs avec des colonnes ou des lignes. Il n'inclut pas la pagination, donc le nombre que vous avez défini est tout ce qui s'affichera.

Les filtres vous permettent de choisir les catégories. Certains incluent une fonction de tri, vous permettant de trier par nouveauté, prix, note, ventes, titre ou ordre de menu.

Les blocs incluent également l'onglet standard Gutenberg Advanced avec des champs CSS personnalisés.

Activer le Bloc Produits

Lorsque vous mettez à jour ou activez WooCommerce, vous verrez le nouveau plugin dans votre liste de plugins. Si vous ne le voyez pas ici, vous pouvez rechercher des blocs WooCommerce dans l'onglet Ajouter un nouveau sous Plugins.

Vous pouvez activer le bloc dans la liste des plugins ou en cliquant sur le bouton en haut du tableau de bord WordPress.

Utiliser les blocs WooCommerce

Le nouvel onglet appelé WooCommerce est ajouté à la liste des blocs disponibles dans l'éditeur Gutenberg. À l'intérieur de cet onglet se trouve l'ensemble des 7 blocs WooCommerce. Chacun des blocs a une icône qui correspond à ce qu'ils font afin que vous puissiez les reconnaître en un coup d'œil.

Au fur et à mesure que vous ajoutez les blocs à la page, les symboles apparaissent sur la page où vous pouvez cliquer pour les ajouter rapidement.

Regardons chaque bloc.

Produit en vedette

Produit vedette vous permet de choisir un seul produit dans la liste à afficher. Vous pouvez aligner le texte, modifier la superposition et modifier l'image. Il a également le champ Classe CSS supplémentaire.

Ce bloc a le plus de personnalisations disponibles de tous les blocs WooCommerce. Définissez l'orientation du texte avec les boutons de texte en haut. Cliquer sur Modifier ouvre les personnalisations de la superposition. Ici, vous pouvez choisir le produit, afficher la description, afficher le prix, choisir la couleur de la superposition et définir son opacité.

Vous pouvez choisir une couleur à utiliser ou vous pouvez choisir une couleur personnalisée en cliquant sur le cercle multicolore. Ici, vous pouvez entrer le code hexadécimal, le code RVB ou ajuster la couleur avec le curseur et le sélecteur de couleurs. J'aime les ajustements de superposition. Pour ajuster le texte ou le bouton, vous devrez utiliser CSS.

Produits triés sur le volet

Produits triés sur le volet vous permet de sélectionner les produits qui seront affichés. Vous pouvez les rechercher dans le bloc lui-même ou dans la colonne de droite. Définissez le nombre de colonnes de 1 à 6. Triez par nouveauté, prix, note, ventes, titre ou ordre de menu.

La sélection des produits les ajoute à la mise en page dans la grille.

Produits les plus vendus

Les produits les plus vendus ne vous permettent pas de choisir quoi que ce soit dans le bloc, mais vous pouvez toujours effectuer toutes vos personnalisations dans les paramètres à droite. Ici, vous pouvez sélectionner le nombre de colonnes et de lignes (choisir de 1 à 6 pour chacune), filtrer par catégorie et ajuster le CSS.

Dans cet exemple, j'ai choisi 6 colonnes, 2 lignes et la catégorie Vêtements.

Produits les mieux notés

Les produits les mieux notés ajoutent également les produits lorsque vous sélectionnez le bloc. Les paramètres permettent d'inclure la mise en page standard pour 1 à 6 colonnes et lignes, le filtre par catégorie et CSS. Celui-ci affiche les paramètres par défaut.

Produits les plus récents

Les produits les plus récents ajoutent également automatiquement les produits lorsque vous sélectionnez le bloc. Les paramètres incluent la mise en page standard, le filtre de catégorie et le CSS. Dans cet exemple, j'ai choisi 5 colonnes et 3 lignes. J'ai laissé le filtre de catégorie par défaut, qui inclut chaque catégorie.

Produits en solde

Produits en vente charge automatiquement tous les produits en vente. Il inclut également les options de mise en page pour les colonnes et les lignes, le filtre de produit et CSS. Celui-ci ajoute une option Trier par afin que vous puissiez commander par nouveauté, prix, note, ventes, titre ou ordre de menu. Dans cet exemple, j'ai défini les colonnes sur 2 et les lignes sur 4. J'ai laissé la catégorie de produit par défaut.

Produits par catégorie

Produits par catégorie vous permet de choisir les catégories dans le bloc et comprend un sélecteur pour vous aider à affiner les choix. Pour mon exemple, il n'y avait qu'une seule option (Toutes les catégories sélectionnées). Il comprend également les options de mise en page, la sélection de catégories, l'ordre par et les paramètres CSS.

Dans cet exemple, j'ai sélectionné mes catégories, défini les colonnes sur 4, les lignes sur 2 et classé les produits par ordre alphabétique.

Exemples de pages avec des blocs WooCommerce

Voici un aperçu de chaque bloc sur le front-end. J'ai ajouté une étiquette pour les identifier. J'ai défini chacun sur un nombre différent de colonnes, mais elles ont toutes 1 ligne afin d'éviter que l'image ne devienne incontrôlable. Vous pouvez facilement créer une page de magasin pour chaque catégorie en utilisant ces blocs.

Par exemple, j'ai créé une page juste pour présenter des accessoires. J'ai ajouté une image de couverture et un titre, et j'ai défini le bloc Produits par catégorie pour afficher 3 colonnes et 6 lignes.

Il crée une page épurée avec un joli design et, bien sûr, il ne montre que les produits de la catégorie accessoires. Cela peut être utilisé pour créer tous les types de pages de produits.

Voici un court CTA qui ajoute un bloc trié sur le volet et un bloc de texte dans une double colonne.

La page est simple, mais elle est fonctionnelle.

Pour cette page, j'ai ajouté les produits les plus vendus dans une mise en page de blog. Je l'ai défini sur 4 colonnes et 1 ligne et j'ai sélectionné Vêtements comme catégorie.

Le poste a l'air super. Avant de publier, j'ajouterais probablement de l'espace, une étiquette pour les produits, et peut-être ajouterais un peu de remplissage au texte, mais il est facile de voir le potentiel.

Pour celui-ci, j'ai ajouté une mise en page à deux colonnes et ajouté un bloc de texte et le bloc Produits les plus vendus avec 2 colonnes et 2 lignes.

Mettre fin aux pensées

WooCommerce Blocks est un plugin intéressant. Les blocs sont simples à utiliser et fournissent des outils de catégorie, de mise en page et de filtrage utiles. J'aime les curseurs de disposition des colonnes et des lignes. Si vous souhaitez ajuster leur texte, leurs boutons, leurs incrustations de survol, etc., vous devrez utiliser CSS, mais au moins un CSS personnalisé est une option. Les blocs sont parfaits pour créer des pages de vente ou ajouter des produits dans votre contenu.

J'aimerais voir plus de fonctionnalités de style (en particulier pour les boutons, le texte et les superpositions de survol). Je n'arrêtais pas de vouloir customiser comme je le ferais avec Divi (je pense que Divi m'a gâté). Il inclut les champs de classe CSS qui aideront ceux qui utilisent CSS. Même sans beaucoup de personnalisations, j'ai aimé utiliser les blocs. Si vous souhaitez inclure des produits WooCommerce dans vos pages et publications Gutenberg, WooCommerce Blocks vaut la peine d'être essayé.

Nous voulons de vos nouvelles. Avez-vous essayé les blocs WooCommerce ? Faites-nous part de votre expérience dans les commentaires.

Image en vedette via Jomic / shutterstock.com