Le bloc Stock de produits affiche en temps réel la disponibilité en stock de chaque produit WooCommerce sur vos modèles de produits uniques. En indiquant précisément aux clients le nombre d'unités disponibles en stock, vous créez un sentiment d'urgence et aidez les acheteurs à prendre plus rapidement leurs décisions d'achat.
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 de stocks de WooCommerce pour chaque produit, afin que les informations restent exactes sans mises à jour manuelles. Vous pouvez également combiner le shortcode avec du texte personnalisé, ajuster la taille et l'alignement de la police, et styliser le résultat avec des effets typographiques, des couleurs et des ombres.
Ajouter le bloc Stock de produits à vos pages
Suivez ces étapes pour ajouter un bloc Stock de produits à 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 Stock de produits 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 Stock de produits 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 de stocks disponibles dans WooCommerce pour chaque produit. Vous pouvez ajouter du texte personnalisé avant ou après le shortcode, par exemple « Plus que en stock ! », afin de créer un message plus convaincant. Basculez entre les options É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 standard : à 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 standard à l'aide du curseur (10 à 72 px).
Étape 3 : Personnalisez le design
Dans l'onglet Avancé, vous pouvez personnaliser l'apparence du bloc et contrôler sa visibilité sur 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 standard.
- Couleur : définissez la couleur du texte de l'affichage des actions.
- Ombre du texte : ajoutez un effet d'ombre directement au texte standard. Choisissez parmi les tailles prédéfinies (Aucune, Fine, Petite, Moyenne, Grande, Très grande, 2 fois plus grande) pour ajouter une profondeur subtile ou spectaculaire au texte.
- Ombre : ajoutez une ombre portée à l'élément 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 Stock de produits (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.
- Remplissage : ajustez l'espacement intérieur de votre bloc Stock de produits (haut, droite, bas, gauche). Cela crée un espace entre le texte du stock et les bords du bloc.
Attributs :
- Identifiant CSS : affiche l'identifiant unique généré automatiquement pour votre bloc Stock de produits. 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-stock|available).
Visibilité des appareils :
- Masquer sur le bureau : masquer le bloc Stock de produits sur les écrans de bureau.
- Masquer sur tablette : masquer le bloc Stock de produits sur les tablettes.
- Masquer sur mobile : masquer le bloc Stock de produits sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : choisissez parmi divers effets d'animation qui s'affichent lorsque le bloc Stock de produits 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 Stock de produits et de personnaliser son apparence, veillez à enregistrer votre travail.
Vous avez ajouté avec succès un bloc Stock de produits à votre modèle de produit unique ! Le bloc affiche automatiquement le nombre de stocks en temps réel provenant de WooCommerce pour chaque produit, ce qui permet d'informer les acheteurs sans aucun effort manuel de votre part. Testez différents textes, tailles de police et couleurs pour créer un message sur la disponibilité des stocks qui suscite un sentiment d'urgence et encourage les clients à acheter avant que les stocks ne soient épuisés.