Le bloc Contenu du produit affiche la description complète des produits WooCommerce dans vos modèles de produit unique. Il extrait dynamiquement la description de chaque produit depuis WooCommerce, afin que le contenu correct s'affiche toujours sans aucune mise à jour manuelle.
Ce bloc est conçu exclusivement pour être utilisé dans les modèles de produit unique. Vous pouvez l'utiliser tel quel pour afficher la description du produit exactement telle qu'elle a été saisie dans WooCommerce, ou ajouter du texte supplémentaire et mettre en forme le shortcode afin de personnaliser l'affichage du contenu sur vos pages produits.
Ajouter le bloc de contenu produit à vos pages
Suivez ces étapes pour ajouter un bloc Contenu produit à votre modèle SeedProd Single Product :
Étape 1 : Ajouter le bloc
Sous Design > Blocs > Balises de modèle WooCommerce, faites glisser et déposez le bloc Contenu du produit dans la section souhaitée de votre page.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Contenu du produit pour ouvrir ses paramètres. Dans l'onglet Contenu, vous trouverez une zone de texte préremplie avec le shortcode SeedProd qui récupère dynamiquement la description du produit WooCommerce.
Texte :
- Champ de contenu : Contient le
shortcode par défaut. Ce shortcode permet d'extraire dynamiquement la description de chaque produit depuis WooCommerce. Ne le supprimez pas, sauf si vous avez l'intention de remplacer entièrement le contenu du produit. Vous pouvez ajouter du texte, du code HTML ou des balises de mise en forme supplémentaires au-dessus ou en dessous du shortcode afin de compléter la description du produit. - Éditeur visuel / Édition HTML : basculez entre un éditeur visuel enrichi (pour le texte formaté avec des commandes dans la barre d'outils) et l'éditeur HTML (pour l'édition directe du code). Les deux modes vous permettent de travailler avec le shortcode dynamique.
- Alignement : définissez l'alignement horizontal du contenu textuel : à gauche, au centre ou à droite. Prend en charge l'alignement par appareil pour les ordinateurs de bureau, les tablettes et les appareils mobiles.
- Taille de la police : définissez la taille de base de la police pour la zone de contenu à l'aide du curseur (10 à 72 pixels).
Étape 3 : Personnalisez le design
Dans l'onglet Avancé, vous pouvez personnaliser la typographie, la couleur et le style visuel de votre bloc Contenu produit.
Styles :
- Typographie : définissez la police, la taille, le poids, la hauteur de ligne, l'espacement des lettres et le style du texte du contenu du produit.
- Couleur : définissez la couleur du texte pour le contenu de la description du produit.
- Ombre du texte : ajoutez un effet d'ombre au texte — choisissez parmi Aucun, Très fin, Petit, Moyen, Grand, Très grand ou 2 fois plus grand.
- Ombre : ajoutez une ombre portée à l'ensemble du bloc pour créer un effet de profondeur subtil.
Espacement :
- Marge : contrôlez l'espacement extérieur autour de votre bloc Contenu produit (haut, droite, bas, gauche). Cela détermine l'espace qui apparaît entre la description du produit et les éléments environnants sur la page.
- Remplissage : ajustez l'espacement intérieur dans votre bloc Contenu du produit (haut, droite, bas, gauche). Cela crée un espace entre le texte descriptif et les bords du bloc.
Attributs :
- ID CSS : affiche l'identifiant unique généré automatiquement pour votre bloc Contenu produit. Cet identifiant est créé automatiquement par SeedProd pour le personnalisation du style ou le ciblage JavaScript.
- Classe personnalisée : ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques à partir de votre thème ou de votre CSS personnalisé.
- Attributs personnalisés : ajoutez n'importe quel attribut HTML à l'élément conteneur du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-de-l'attribut|valeur (par exemple, data-section|description).
Visibilité des appareils :
- Masquer sur le bureau : masquer le bloc Contenu du produit sur les écrans de bureau.
- Masquer sur tablette : masquer le bloc Contenu du produit sur les tablettes.
- Masquer sur mobile : masquer le bloc Contenu du produit sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : choisissez parmi divers effets d'animation qui s'affichent lorsque le bloc Contenu du produit apparaît à l'écran. Les options disponibles incluent Rebond, Fondu entrant, Zoom avant, Rotation vers l'intérieur, et bien d'autres encore.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Contenu du produit et de personnaliser son apparence, veillez à enregistrer votre travail.
Vous avez ajouté avec succès un bloc Contenu produit à votre modèle de produit unique ! Le bloc affichera automatiquement la description correcte de chaque produit, garantissant ainsi que vos pages WooCommerce affichent toujours un contenu précis et à jour. Utilisez les commandes de typographie et d'espacement pour styliser la description afin qu'elle s'intègre parfaitement au design de votre page produit.