Le bloc Prix du produit affiche le prix de chaque produit WooCommerce sur vos modèles de produit unique. Il extrait dynamiquement le prix actuel de WooCommerce, y compris les prix soldés, afin que les acheteurs voient toujours les prix exacts sans que vous ayez à effectuer de mises à jour manuelles.
Ce bloc est conçu exclusivement pour être utilisé sur les modèles de produit unique. Au-delà de l'affichage du prix, vous avez un contrôle total sur la typographie, la couleur et l'alignement du prix normal et du prix soldé, y compris la possibilité d'empiler verticalement le prix d'origine et le prix soldé afin que les clients voient immédiatement la réduction.
Ajouter le bloc Prix du produit à vos pages
Suivez ces étapes pour ajouter un bloc Prix du produit à votre modèle SeedProd Single Product Template :
Étape 1 : Ajouter le bloc
Sous Design > Blocs > Balises de modèle WooCommerce, faites glisser et déposez le bloc Prix du 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 Prix du produit pour ouvrir ses paramètres. L'onglet Contenu vous permet de personnaliser l'affichage du prix normal en haut, puis développez la section Prix soldé pour configurer l'affichage des prix réduits.
Prix normal :
- Typographie : définissez la police, la taille, le poids, l'interligne et l'espacement des lettres pour le texte indiquant le prix du produit.
- Couleur : définissez la couleur du texte du prix normal.
- Alignement : définissez l'alignement horizontal du prix — à gauche, au centre ou à droite. Prend en charge l'alignement par appareil pour les ordinateurs de bureau, les tablettes et les mobiles.
Prix de vente :
- Typographie du prix soldé : définissez la police, la taille, l'épaisseur et le style spécifiquement pour le texte du prix soldé, afin qu'il se distingue du prix normal. Vous pouvez par exemple l'agrandir ou le mettre en gras pour mettre en valeur l'offre.
- Couleur : définissez la couleur du texte du prix soldé. Utilisez une couleur contrastante, telle que le rouge ou le vert, pour attirer l'attention sur le montant de la réduction.
- Empilé : activez cette option pour afficher le prix soldé sous le prix d'origine (barré) dans une pile verticale plutôt que côte à côte. Cette disposition permet aux acheteurs de comparer plus facilement les prix d'origine et soldés en un coup d'œil.
- Espace entre : définissez l'espacement (1 à 100 pixels) entre le prix d'origine et le prix soldé lorsque l'option Empilé est activée.
Étape 3 : Personnalisez le design
Dans l'onglet Avancé, vous pouvez contrôler l'espacement, les attributs et la visibilité de votre bloc Prix du produit.
Espacement :
- Marge : contrôlez l'espacement extérieur autour de votre bloc Prix du produit (haut, droite, bas, gauche). Cela détermine l'espace qui apparaît entre le prix et les éléments environnants sur la page du produit.
- Remplissage : ajustez l'espacement intérieur dans votre bloc Prix du produit (haut, droite, bas, gauche). Cela crée un espace entre le texte du prix et les bords du bloc.
Attributs :
- Identifiant CSS : affiche l'identifiant unique généré automatiquement pour votre bloc Prix du produit. Cet identifiant est créé automatiquement par SeedProd pour la 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-price|product).
Visibilité des appareils :
- Masquer sur le bureau : masquer le bloc Prix du produit sur les écrans de bureau.
- Masquer sur tablette : masquer le bloc Prix du produit sur les tablettes.
- Masquer sur mobile : masquez le bloc Prix 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 Prix du produit apparaît à l'écran. Les options disponibles incluent Rebond, Fondu entrant, Zoom avant, Rotation et bien d'autres encore.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Prix du produit et de personnaliser son apparence, veillez à enregistrer votre travail.
Vous avez ajouté avec succès un bloc Prix du produit à votre modèle de produit unique ! Le bloc affiche automatiquement le prix correct pour chaque produit, y compris le prix soldé lorsqu'il est actif. Testez les différents paramètres de couleur du prix soldé, de disposition empilée et de typographie pour créer un affichage des prix qui met en valeur vos offres et génère davantage de conversions sur votre boutique WooCommerce.