Le bloc Prix du produit affiche le prix de chaque produit WooCommerce sur vos modèles de produit unique. Il récupère dynamiquement le prix actuel de WooCommerce, y compris les prix promotionnels, afin que les acheteurs voient toujours des prix précis sans aucune mise à jour manuelle de votre part.
Ce bloc est conçu exclusivement pour être utilisé sur les modèles de produit unique. Au-delà de l'affichage d'un prix, vous avez un contrôle total sur la typographie, la couleur et l'alignement du prix régulier et du prix soldé — y compris la possibilité d'empiler le prix d'origine et le prix soldé verticalement afin que les clients voient immédiatement la réduction.
Ajout du bloc Prix du produit à vos pages
Suivez ces étapes pour ajouter un bloc Prix du produit à votre modèle de produit unique SeedProd :
É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 styliser l'affichage du prix régulier en haut, puis d'étendre la section Prix soldé pour configurer l'apparence des prix réduits.
Prix régulier :
- Typographie : Définissez la famille de polices, la taille, le poids, la hauteur de ligne et l'espacement des lettres pour le texte du prix du produit.
- Couleur : Définissez la couleur du texte du prix régulier.
- Alignement : Définissez l'alignement horizontal du prix — Gauche, Centre ou Droite. Prend en charge l'alignement par appareil pour ordinateur, tablette et mobile.
Prix soldé :
- Typographie du prix soldé : Définissez la famille de polices, la taille, le poids et le style spécifiquement pour le texte du prix soldé, lui permettant d'avoir un aspect distinct du prix régulier — par exemple, en le rendant plus grand ou plus gras pour souligner l'offre.
- Couleur : Définissez la couleur du texte du prix soldé. Utilisez une couleur contrastante comme le rouge ou le vert pour attirer l'attention sur le montant réduit.
- Empilé : Activez 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 le prix d'origine et le prix réduit en un coup d'œil.
- Espace entre : Définissez l'espacement (1–100px) entre le prix d'origine et le prix soldé lorsque l'option Empilé est activée.
Étape 3 : Personnaliser 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 produit.
- Marge intérieure : Ajustez l'espacement intérieur de 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 :
- ID CSS : Affiche l'identifiant unique généré automatiquement pour votre bloc Prix du produit. Cet ID est créé automatiquement par SeedProd pour une personnalisation CSS ou un ciblage JavaScript personnalisé.
- 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 des attributs HTML à l'élément conteneur du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-attribut|valeur (par exemple, data-price|produit).
Visibilité de l'appareil :
- Masquer sur ordinateur : Masquez le bloc Prix du produit sur les écrans d'ordinateur.
- Masquer sur tablette : Masquez le bloc Prix du produit sur les appareils 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 se jouent lorsque le bloc Prix du produit apparaît à l'écran. Les options incluent Bounce, Fade In, Zoom In, Rotate In, et bien d'autres.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Prix du produit et de personnaliser son apparence, assurez-vous de sauvegarder 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 les prix promotionnels lorsqu'ils sont actifs. Expérimentez avec la couleur du prix promotionnel, la disposition empilée et les paramètres de typographie pour créer un affichage des prix qui met en valeur vos offres et génère plus de conversions sur votre boutique WooCommerce.