Le bloc de stock produit affiche la disponibilité en temps réel du stock pour chaque produit WooCommerce sur vos modèles de produit unique. Indiquer aux clients le nombre exact d'unités en stock crée un sentiment d'urgence et aide les acheteurs à prendre des décisions d'achat plus rapides.
Ce bloc est conçu exclusivement pour être utilisé sur les modèles de produit unique. Il utilise un shortcode dynamique pour extraire automatiquement le nombre d'articles en stock de WooCommerce pour chaque produit, de sorte que les informations restent précises sans mises à jour manuelles. Vous pouvez également combiner le shortcode avec du texte personnalisé, ajuster la taille de la police et l'alignement, et styliser la sortie avec la typographie, les couleurs et les effets d'ombre.
Ajouter le bloc de stock produit à vos pages
Suivez ces étapes pour ajouter un bloc de stock 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 Stock 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 de stock produit pour ouvrir ses paramètres. Dans l'onglet Contenu, vous pouvez modifier le texte d'affichage du stock, ajuster l'alignement et définir la taille de la police.
- Texte : Le champ de contenu est pré-rempli avec le shortcode
, qui récupère dynamiquement le nombre d'articles en stock de WooCommerce pour chaque produit. Vous pouvez ajouter du texte personnalisé avant ou après le shortcode — par exemple, « Seulement en stock ! » — pour créer un message plus percutant. Basculez entre l'Éditeur visuel (texte enrichi) et les modes Modifier le HTML (code) à l'aide du bouton situé sous le champ. - Alignement : Définissez l'alignement horizontal du texte du stock — Gauche, Centre ou Droite. Prend en charge l'alignement par appareil pour ordinateur, tablette et mobile.
- Taille de la police : Définissez la taille de la police du texte du stock à l'aide du curseur (10–72 px).
Étape 3 : Personnaliser le design
Dans l'onglet Avancé, vous pouvez styliser l'apparence du bloc et contrôler sa visibilité sur les différents appareils.
Styles :
- Typographie : Définissez la famille de polices, le poids, la hauteur de ligne, l'espacement des lettres et la transformation du texte pour le texte du stock.
- Couleur : Définissez la couleur du texte de l'affichage du stock.
- Ombre portée du texte : Ajoutez un effet d'ombre directement au texte du stock. Choisissez parmi les tailles prédéfinies (Aucune, Fine, Petite, Moyenne, Grande, Très grande, Extra grande) pour ajouter une profondeur subtile ou spectaculaire au texte.
- Ombre portée : Ajoutez une ombre portée à l'élément de bloc global pour le faire ressortir visuellement de l'arrière-plan de la page.
Espacement :
- Marge : Contrôlez l'espacement extérieur autour de votre bloc de stock produit (Haut, Droite, Bas, Gauche). Cela détermine l'espace qui apparaît entre l'affichage du stock et les éléments environnants sur la page.
- Rembourrage : Ajustez l'espacement intérieur de votre bloc Stock Produit (Haut, Droite, Bas, Gauche). Cela crée un espace entre le texte de stock et les bords du bloc.
Attributs :
- ID CSS : Affiche l'identifiant unique généré automatiquement pour votre bloc Stock Produit. 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 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-stock|available).
Visibilité de l'appareil :
- Masquer sur ordinateur : Masquez le bloc Stock Produit sur les écrans d'ordinateur.
- Masquer sur tablette : Masquez le bloc Stock Produit sur les appareils tablettes.
- Masquer sur mobile : Masquez le bloc Stock Produit sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : Choisissez parmi divers effets d'animation qui se jouent lorsque le bloc Stock Produit défile dans la vue. 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 Stock Produit et de personnaliser son apparence, assurez-vous de sauvegarder votre travail.
Vous avez ajouté avec succès un bloc Stock Produit à votre modèle de produit unique ! Le bloc affiche automatiquement le nombre d'articles en stock en temps réel de WooCommerce pour chaque produit, informant les acheteurs sans aucun effort manuel de votre part. Expérimentez avec du texte environnant personnalisé, la taille de la police et la couleur pour créer un message de disponibilité des stocks qui crée un sentiment d'urgence et encourage les clients à acheter avant que le stock ne soit épuisé.