Le bloc « Description courte » extrait et affiche dynamiquement la description courte de chaque produit WooCommerce sur vos modèles de produit unique. Au lieu d'écrire une description statique, ce bloc utilise un code court pour récupérer automatiquement la description courte correcte de chaque produit de votre catalogue, ce qui permet de garantir l'exactitude de vos modèles sans aucun effort manuel.
Ce bloc est conçu exclusivement pour être utilisé sur les modèles de produit unique. La brève description apparaît généralement à côté du titre et du prix du produit, offrant ainsi aux acheteurs un aperçu concis du produit avant qu'ils ne poursuivent leur lecture. Vous pouvez compléter le code court avec du texte personnalisé, ajuster l'alignement et la taille de la police en fonction de l'appareil, et appliquer des styles typographiques et de couleur afin que la description corresponde parfaitement à votre marque.
Ajouter le bloc « Description courte » à vos pages
Suivez ces étapes pour ajouter un bloc « Description courte » à votre modèle de produit unique SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs > Balises de modèle WooCommerce, glissez-déposez le bloc Description courte 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 « Description courte » pour ouvrir ses paramètres. Dans l'onglet « Contenu », la section « Texte » contient le champ « Shortcode » et les options d'affichage pour la description courte du produit.
- Texte : Le champ de contenu est prérempli avec le
shortcode, qui récupère automatiquement la description courte de WooCommerce pour chaque produit. Vous pouvez ajouter du texte personnalisé avant ou après le shortcode si nécessaire. Basculez entre le Éditeur visuel (texte enrichi) et Modifier le code HTML (code) à l'aide du bouton situé sous le champ. - Alignement : définissez l'alignement horizontal du texte descriptif : à gauche, au centre ou à droite. Prend en charge l'alignement par appareil pour les ordinateurs de bureau, les tablettes et les mobiles.
- Taille de la police : définissez la taille de la police du texte descriptif à l'aide du curseur (10 à 72 px). Prend en charge le redimensionnement par appareil pour les ordinateurs de bureau, les tablettes et les mobiles.
Étape 3 : Personnalisez le design
Dans l'onglet Avancé, vous pouvez modifier l'apparence du texte descriptif et contrôler sa visibilité sur les différents appareils.
Styles :
- Typographie : définissez la police, l'épaisseur, la hauteur de ligne, l'espacement des lettres et la transformation du texte pour le texte de la description courte, ce qui vous offre un contrôle précis au-delà du curseur Taille de la police de l'onglet Contenu.
- Couleur : définissez la couleur du texte de la brève description.
- Ombre du texte : ajoutez un effet d'ombre directement au texte descriptif. Choisissez parmi les tailles prédéfinies (Aucune, Très fine, Petite, Moyenne, Grande, Très grande, 2 fois plus grande) pour ajouter de la profondeur ou mettre en valeur le texte.
- Ombre : ajoutez une ombre portée à l'élément bloc global afin de le faire ressortir visuellement du contenu de la page qui l'entoure.
Espacement :
- Marge : contrôlez l'espacement extérieur autour de votre bloc Description courte (haut, droite, bas, gauche). Cela détermine l'espace qui apparaît entre la description et les éléments environnants tels que le titre du produit ou le bouton Ajouter au panier.
- Remplissage : ajustez l'espacement intérieur de votre bloc « Description courte » (haut, droite, bas, gauche). Cela crée un espace entre le texte de la description et les bords du bloc.
Attributs :
- ID CSS : affiche l'identifiant unique généré automatiquement pour votre bloc « Description courte ». 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-description|short).
Visibilité des appareils :
- Masquer sur le bureau : masquer le bloc « Brève description » sur les écrans de bureau.
- Masquer sur tablette : masquer le bloc « Description courte » sur les tablettes.
- Masquer sur mobile : masque le bloc « Description courte » sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : choisissez parmi divers effets d'animation qui s'affichent lorsque le bloc « Description courte » apparaît à l'écran. Les options disponibles incluent « Rebondir », « Fondu en entrée », « Zoom avant », « Rotation » et bien d'autres encore.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc « Description courte » et de personnaliser son apparence, veillez à enregistrer votre travail.
Vous avez ajouté avec succès un bloc « Description courte » à votre modèle de produit unique ! Le bloc affiche automatiquement la description courte correcte pour chaque produit de votre boutique WooCommerce, ce qui vous fait gagner du temps et garantit la cohérence de votre catalogue. Expérimentez avec la typographie, la couleur du texte et l'alignement par appareil pour présenter vos descriptions de produits de manière à inciter les acheteurs à passer à l'achat.