Le bloc Note produit affiche la note par étoiles d'un produit WooCommerce sur vos modèles de produit unique. Il extrait les données de notation directement de l'onglet Avis de chaque produit, offrant aux visiteurs un indicateur visuel instantané de la satisfaction client sans quitter la page produit.
Ce bloc est conçu exclusivement pour être utilisé dans les modèles de produit unique. Assurez-vous d'avoir WooCommerce installé et que les avis produits sont activés avant de l'utiliser. Vous pouvez personnaliser la taille des étoiles, l'espacement et les couleurs pour correspondre à la marque de votre boutique.
Ajouter le bloc Note produit à vos pages
Suivez ces étapes pour ajouter un bloc Note produit à votre modèle de produit unique SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs > Balises de modèle WooCommerce > Informations supplémentaires, faites glisser et déposez le bloc Note produit dans la section souhaitée de votre modèle de produit unique.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Note produit pour ouvrir ses paramètres. Dans l'onglet Contenu, vous trouverez les options suivantes sous la section Note par étoiles :
- Alignement : Définissez l'alignement horizontal de la note par étoiles — Gauche, Centre ou Droite — avec des contrôles par appareil pour ordinateur, tablette et mobile.
- Taille : Définissez la taille des icônes d'étoiles à l'aide d'un curseur.
- Espace entre : Définissez l'espacement horizontal entre les étoiles individuelles à l'aide d'un curseur.
Étape 3 : Personnaliser le design
Dans l'onglet Avancé, vous pouvez personnaliser l'apparence visuelle de votre bloc Note produit.
Styles :
- Couleur des étoiles : Définissez la couleur de remplissage des étoiles actives (remplies).
- Couleur des étoiles vides : Définissez la couleur des étoiles non remplies.
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 Note produit et de personnaliser son apparence, assurez-vous de sauvegarder votre travail.
Vous avez ajouté avec succès un bloc Note produit à votre modèle de produit unique ! Les notes par étoiles sont un puissant signal de confiance qui aide les clients à prendre des décisions d'achat éclairées. Personnalisez les couleurs et la taille des étoiles pour que l'affichage de la note s'intègre naturellement à la conception de votre page produit.