Le bloc Grille de produits offre un moyen efficace d'afficher vos produits WooCommerce dans une mise en page de grille visuellement organisée. Vous pouvez afficher tous les produits, ou filtrer par type — en vedette, en promotion, les plus vendus, ajoutés récemment ou les mieux notés — et donner aux clients la possibilité d'ajouter plusieurs articles à leur panier directement depuis la grille.

Avec des contrôles de requête flexibles, un alignement par appareil, un style de bouton et d'image, et une pagination optionnelle, ce bloc est idéal pour les pages de boutique, les pages de destination de catégorie, ou toute page où vous souhaitez présenter une sélection organisée de produits dans un format propre et consultable.

Prérequis : Le bloc Grille de produits est disponible dans le plan de licence Elite.

---

Ajouter le bloc Grille de produits à vos pages

Suivez ces étapes pour ajouter un bloc Grille de produits à votre page SeedProd :

Étape 1 : Ajouter le bloc

Sous Design > Blocs > WooCommerce, faites glisser et déposez le bloc Grille de produits dans la section souhaitée de votre page.

Étape 2 : Configurer les paramètres

Une fois ajouté, cliquez sur le bloc Grille de produits pour ouvrir ses paramètres. Dans l'onglet Paramètres, les paramètres sont organisés en deux sections.

Contenu :

• Colonnes : Définissez le nombre de colonnes de produits à afficher dans la grille.
• Pagination : Activez pour activer la pagination, divisant la grille de produits sur plusieurs pages.
• Afficher le nombre d'articles : Activez pour afficher le nombre total de produits affichés.
• Afficher le tri par : Activez pour afficher une liste déroulante de tri afin que les visiteurs puissent réorganiser les produits par des critères tels que le prix, la popularité ou la note.
• Limite : Définissez le nombre maximum de produits à afficher. Utilisez -1 pour afficher tous les produits correspondants (par défaut).

Requête :

• Type : Choisissez les produits à afficher — Tous les produits, Produits en vedette, Produits en promotion, Produits les plus vendus, Produits récents, ou Produits les mieux notés.
• Inclure : Affinez la sélection de produits en filtrant pour inclure uniquement les produits correspondant à des critères spécifiques tels que les ID, les SKU, les catégories, les étiquettes, les attributs, les groupes ou la visibilité.
• Exclure : Affinez la sélection de produits en filtrant pour exclure les produits correspondant à des critères spécifiques tels que les ID, les SKU, les catégories, les étiquettes, les attributs, les groupes ou la visibilité.
• Trier par : Définissez la manière dont les produits sont triés — par Date, Titre, Prix, Popularité, Note, Aléatoire, ou Ordre du menu.
• Ordre : Définissez la direction du tri — ASC (ascendant) ou DESC (descendant).

Étape 3 : Personnaliser le design

Dans l'onglet Avancé, vous pouvez personnaliser l'apparence visuelle de votre bloc Grille de produits. Les paramètres sont organisés en trois sections.

Styles :

• Alignement : Définissez l'alignement horizontal de la grille de produits — Gauche, Centre ou Droite — avec des contrôles par appareil pour ordinateur, tablette et mobile.
• Typographie de la description : Définissez la famille de polices, la taille, la hauteur de ligne, l'espacement des lettres, l'épaisseur, le style et la casse du texte de la description du produit.
• Typographie du prix : Définissez la famille de polices, la taille, la hauteur de ligne, l'espacement des lettres, l'épaisseur, le style et la casse du texte du prix du produit.
• Couleur du prix : Définissez la couleur du prix régulier du produit.
• Couleur des soldes : Définissez la couleur du prix soldé lorsqu'un produit est en promotion.

Bouton :

• Style du bouton : Choisissez un style visuel pour le bouton Ajouter au panier — Plat, 2D, Vintage, Fantôme ou Lien.
• Couleur du bouton : Définissez la couleur d'arrière-plan du bouton Ajouter au panier.
• Typographie du bouton : Définissez la famille de polices, la taille, la hauteur de ligne, l'espacement des lettres, l'épaisseur, le style et la casse du texte du bouton.
• Taille du bouton : Choisissez une taille de bouton prédéfinie — Petit, Moyen, Grand, Très grand ou Extrêmement grand.
• Rayon de bordure : Ajustez l'arrondi des coins du bouton Ajouter au panier à l'aide d'un curseur.

Image :

• Ombre : Appliquez une ombre aux images de produits en utilisant des tailles prédéfinies — Aucune, Cheveux, Petite, Moyenne, Grande, Très grande, Extrêmement grande ou Ombre portée inférieure.
• Style de bordure : Définissez le style de bordure des images de produits — Pleine, Pointillée ou Tirets.
• Couleur de la bordure de l'image : Définissez la couleur de la bordure de l'image du produit.
• Largeur de la bordure de l'image : Définissez l'épaisseur de la bordure sur chaque côté (Haut, Droite, Bas, Gauche) de l'image du produit.
• Espace blanc de l'image : Ajoutez un rembourrage intérieur autour des images de produits à l'intérieur de leur bordure.

Espacement :

• Marge : Définissez l'espacement extérieur autour du bloc sur les quatre côtés, avec des contrôles indépendants pour ordinateur, tablette et mobile.
• Rembourrage : Définissez l'espacement intérieur à l'intérieur du wrapper du bloc sur les quatre côtés, avec des contrôles par appareil.

Attributs :

• Classe personnalisée : Ajoutez une ou plusieurs classes CSS personnalisées au wrapper du bloc pour un style ciblé.
• ID CSS : SeedProd génère automatiquement un ID CSS unique pour ce bloc. Vous pouvez l'utiliser pour référencer le bloc dans du CSS ou JavaScript personnalisé.
• Attributs personnalisés : Ajoutez des attributs HTML personnalisés à l'élément wrapper du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format clé|valeur.

Visibilité de l'appareil :

• Masquer sur ordinateur : Basculez pour masquer le bloc lorsqu'il est affiché sur les écrans d'ordinateur.
• Masquer sur tablette : Basculez pour masquer le bloc lorsqu'il est affiché sur les écrans de tablette.
• Masquer sur mobile : Basculez pour masquer le bloc lorsqu'il est affiché sur les écrans mobiles.

Effets d'animation :

• Effet de défilement : Appliquez une animation déclenchée par le défilement au bloc, y compris les options de défilement vertical et horizontal avec des contrôles de direction, de vitesse et de décalage de la fenêtre d'affichage.
• Effet de souris : Appliquez un effet de parallaxe piloté par le mouvement de la souris au bloc.

Étape 4 : Enregistrez vos modifications

Une fois que vous avez terminé de configurer le bloc Grille de produits et de personnaliser son apparence, assurez-vous de sauvegarder votre travail.

---

Vous avez ajouté avec succès un bloc Grille de produits à votre page ! Que vous construisiez une page de boutique complète ou une section promotionnelle ciblée, les contrôles de requête flexibles et les riches options de style facilitent l'affichage des produits exacts de la manière exacte. Expérimentez avec différents types de produits, nombres de colonnes et styles de boutons pour créer une grille qui encourage la navigation et stimule les achats.