Documentation SeedProd

Documentation, matériel de référence et tutoriels pour SeedProd

Bloc d'informations supplémentaires (WooCommerce)

Le bloc Informations supplémentaires vous permet d'afficher les données des attributs de produit de WooCommerce sur vos modèles de produit unique. Ce bloc extrait et affiche automatiquement les informations de la section Attributs supplémentaires de chaque produit, en présentant des spécifications telles que les dimensions, le poids, la couleur, le matériau et d'autres attributs personnalisés dans un format de tableau organisé.

Ce bloc est essentiel pour les modèles de produit unique où vous souhaitez présenter les spécifications et attributs détaillés du produit dans une mise en page soignée et professionnelle. Il aide les clients à prendre des décisions d'achat éclairées en fournissant tous les détails techniques et spécifications dont ils ont besoin en un coup d'œil.

Exigences : Le bloc Informations supplémentaires est disponible dans notre plan de licence Elite licence.

Bloc d'informations supplémentaires affichant les attributs du produit

Ajout du bloc d'informations supplémentaires à vos pages

Suivez ces étapes pour ajouter un bloc d'informations supplémentaires à votre modèle de produit unique SeedProd :

Étape 1 : Ajouter le bloc

Sous Conception > Blocs > Balises de modèle WooCommerce, faites glisser et déposez le bloc Informations supplémentaires dans la section souhaitée de votre modèle de produit unique.

Faire glisser le bloc d'informations supplémentaires vers la page

Le bloc Informations supplémentaires se trouve sous Balises de modèle WooCommerce et peut être ajouté à votre modèle de produit unique.

Étape 2 : Configurer les paramètres de contenu

Une fois ajouté, cliquez sur le bloc Informations supplémentaires pour ouvrir ses paramètres. Dans l'onglet Contenu, vous pouvez personnaliser la façon dont les attributs du produit sont affichés.

  • En-tête : Saisissez ou modifiez le texte de l'en-tête qui apparaît au-dessus du tableau des attributs du produit (par exemple, « Informations supplémentaires » ou « Spécifications du produit »)
  • Typographie de l'en-tête : Personnalisez les propriétés de police de l'en-tête de section, y compris la famille de polices, la taille, le poids et le style
  • Couleur de l'en-tête : Définissez la couleur du texte de l'en-tête pour qu'elle corresponde à votre conception
  • Typographie : Contrôlez les propriétés de police des étiquettes et des valeurs d'attribut dans le tableau, y compris la famille de polices, la taille, le poids et le style
  • Couleur du texte : Choisissez la couleur du texte des attributs pour assurer une bonne lisibilité
Paramètres de contenu des informations supplémentaires

L'onglet Contenu vous permet de personnaliser le texte de l'en-tête, la typographie et les couleurs de l'affichage des attributs du produit.

Étape 3 : Personnaliser le design

Dans l'onglet Avancé, vous pouvez personnaliser l'apparence visuelle de votre bloc Informations supplémentaires :

Espacement :

  • Marge : Contrôlez l'espacement extérieur autour de votre bloc Informations supplémentaires (Haut, Droite, Bas, Gauche). Cela détermine l'espace entre le bloc et les éléments environnants
  • Rembourrage : Ajustez l'espacement intérieur de votre bloc Informations supplémentaires (Haut, Droite, Bas, Gauche). Cela crée un espace entre le contenu et les bords du bloc

Attributs :

  • ID CSS : Affiche l'identifiant unique généré automatiquement pour votre bloc Informations supplémentaires. Cet ID est créé automatiquement par SeedProd pour un style personnalisé ou un ciblage JavaScript
  • Classe personnalisée : Ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques de votre thème ou de votre CSS personnalisé
  • Attributs personnalisés : Ajoutez tous les attributs HTML à l'élément wrapper du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-attribut|valeur (par exemple, data-product-info|attributes)

Visibilité de l'appareil :

  • Masquer sur ordinateur : Masquer le bloc d'informations supplémentaires sur les écrans d'ordinateur
  • Masquer sur tablette : Masquer le bloc d'informations supplémentaires sur les appareils tablettes
  • Masquer sur mobile : Masquer le bloc d'informations supplémentaires sur les appareils mobiles

Effets d'animation :

  • Animation d'entrée : Choisissez parmi divers effets d'animation qui se jouent lorsque le bloc d'informations supplémentaires apparaît à l'écran. Les options incluent Bounce, Fade In, Zoom In, Rotate In, et bien d'autres. Cela attire l'attention sur les spécifications de votre produit.
Paramètres avancés des informations supplémentaires

L'onglet Avancé fournit des options pour l'espacement, les attributs personnalisés, la visibilité des appareils et les animations d'entrée.

Étape 4 : Enregistrez vos modifications

Une fois que vous avez terminé de configurer le bloc d'informations supplémentaires et de personnaliser son apparence, assurez-vous de sauvegarder votre travail.


Vous avez ajouté avec succès un bloc d'informations supplémentaires à votre modèle de produit unique ! Ce bloc affiche automatiquement les attributs et spécifications du produit dans un tableau propre et organisé, aidant les clients à prendre des décisions d'achat éclairées. Expérimentez avec différentes typographies et paramètres de couleur pour créer un affichage d'informations produit qui correspond à votre marque et améliore vos pages produit.

Articles associés