Si vous souhaitez des badges de promotion ou de campagne sur vos images de produits, vous pouvez les créer dans Advanced Promo Kit. Ce guide vous explique comment créer une étiquette, y compris les options de l'onglet Style telles que les animations et les info-bulles au survol, afin que le badge apparaisse comme vous l'aviez prévu sur les pages de boutique et de produit.
Prérequis
- WooCommerce installé et actif
- Advanced Promo Kit installé et actif Advanced Promo Kit
- Au moins un produit WooCommerce publié
Étape 1 : ouvrir l'écran Créer une étiquette
Dans votre tableau de bord WordPress, cliquez sur Promo Kit dans le menu de gauche, puis cliquez sur Create Label.
Étape 2 : remplir l'onglet Général
L'onglet Général contrôle le texte de votre étiquette et sa forme.
- Dans le champ Title, entrez un nom interne pour cette étiquette. Ceci est pour votre référence uniquement et n'est pas montré aux clients.
- Dans le champ Étiquette du badge, tapez le texte que vous souhaitez voir apparaître sur le badge : par exemple, SOLDE, NOUVEAU ou -20%. Vous pouvez utiliser des variables dynamiques (voir le tableau ci-dessous) pour afficher automatiquement des données de produit en direct. Comment utiliser les espaces réservés de contenu dynamique dans les étiquettes de produits
- Sous Text Options, définissez la taille de la police (8 à 72 px), l'épaisseur de la police (Normal, Bold, Semi Bold ou Light) et la hauteur de ligne.
- Sous Forme du badge, cliquez sur la forme que vous souhaitez utiliser. Il y a 12 formes disponibles : Rectangle Horizontal, Rectangle Vertical, Pilule, Cercle, Carré, Ruban Gauche, Ruban Droit, Étiquette, Hexagone, Étoile, Bannière et Image Personnalisée. Si vous choisissez Image Personnalisée, un bouton de téléchargement apparaît pour que vous puissiez utiliser votre propre fichier image comme badge.
Variables dynamiques
Tapez l'un de ces codes dans le champ Texte du badge. Advanced Promo Kit les remplace par des valeurs réelles lorsque l'étiquette est affichée sur un produit de votre boutique.
| Variable | Remplacé par |
|---|---|
{product_price} | Le prix actuel du produit |
{regular_price} | Le prix régulier (hors solde) du produit |
{sale_price} | Le prix soldé du produit |
{discount_percent} | Le pourcentage de réduction, par ex. 20% |
{discount_amount} | Le montant fixe de la réduction, par ex. 10 $ |
{stock_quantity} | Le stock actuel du produit |
Étape 3 : personnaliser le style
Cliquez sur l'onglet Style pour contrôler l'apparence de votre étiquette. L'onglet est divisé en plusieurs sections.
Options de style
- Couleur du badge : cliquez sur l'échantillon de couleur pour ouvrir le sélecteur de couleurs et choisir une couleur d'arrière-plan pour votre étiquette.
- Largeur (Pixel) et Hauteur (Pixel) : entrez des valeurs en pixels (20–500 px) pour définir la taille du badge.
- Rayon de bordure (Pixel) : ajustez chaque coin indépendamment pour arrondir les bords.
- Marge intérieure du texte (Pixel) : définissez la marge intérieure de chaque côté du texte du badge.
- Styles supplémentaires : ajoutez tout CSS personnalisé dont vous avez besoin pour cette étiquette spécifique.
Opacité et Position
- Opacité : définissez la transparence de l'étiquette de 0 (invisible) à 100 (entièrement opaque).
- Rotation : faites pivoter le badge entre 0 et 360 degrés.
- Direction du texte : choisissez Horizontal ou Vertical.
- Placement du badge : choisissez Sur l'image (chevauchant l'image du produit) ou Hors de l'image (Sous la carte).
- Position du badge : choisissez en haut ou en bas, et à gauche ou à droite, puis entrez des décalages en pixels pour affiner l'emplacement du badge.
Dégradé et Ombre
Utilisez ces contrôles pour donner au badge un remplissage en dégradé et une ombre portée.
- Activer le dégradé : appliquez un remplissage en dégradé bicolore. Choisissez Couleur de dégradé 1, Couleur de dégradé 2 et une Direction du dégradé (De gauche à droite, De droite à gauche, De haut en bas, De bas en haut, ou en diagonale).
- Activer l'ombre : ajoutez une ombre portée avec Couleur de l'ombre, Flou, Décalage X et Décalage Y.
Animation
Utilisez Type d'animation pour animer le badge sur le storefront. Options : Aucune, Pulsation, Flash, Secousse, Rebond, Rotation et Balancement. Choisissez Aucune pour que le badge reste immobile.
Interactivité
- URL cliquable (Lien vers la page) : faites du badge un lien. Les clients qui cliquent dessus sont dirigés vers l'URL que vous saisissez.
- Texte de l'info-bulle (Survol) : texte qui apparaît lorsqu'un client survole le badge.
Étape 4 : définir une planification (facultatif)
Cliquez sur l'onglet Planifier si vous souhaitez que l'étiquette apparaisse uniquement pendant une période spécifique : par exemple, uniquement pendant une vente de fin de semaine.
- Date de début : la date et l'heure auxquelles l'étiquette commence à s'afficher. Laissez ce champ vide pour afficher l'étiquette immédiatement après l'enregistrement.
- Date de fin : la date et l'heure auxquelles l'étiquette cesse de s'afficher. Laissez ce champ vide pour afficher l'étiquette indéfiniment.
Étape 5 : enregistrez l'étiquette
Une fois que vous êtes satisfait de vos paramètres, cliquez sur Save en haut de l'écran. L'étiquette est créée et apparaîtra dans votre liste d'étiquettes. Réglez le commutateur en haut de l'écran sur Active pour que l'étiquette s'affiche sur votre boutique, car une nouvelle étiquette commence inactive. Vous pouvez la modifier à tout moment en cliquant dessus dans la liste.
Utilisation de l'aperçu en direct
Au fur et à mesure que vous remplissez les onglets Général et Style, l'aperçu en direct sur le côté droit de l'écran se met à jour en temps réel. Il affiche un exemple de produit avec votre étiquette appliquée afin que vous puissiez voir à quoi elle ressemblera avant de l'enregistrer.
L'aperçu utilise des valeurs de produit fictives. Les variables dynamiques comme {discount_percent} afficheront les valeurs correctes pour chaque produit réel de votre boutique une fois l'étiquette en ligne.
Dépannage
L'écran Créer une étiquette est couvert par un message de licence
Advanced Promo Kit nécessite une licence active. Lorsque la licence est manquante ou expirée, le plugin couvre l'écran avec un avis de licence au lieu de vous permettre de modifier l'étiquette. Ajoutez ou renouvelez votre clé de licence, puis rechargez la page. Les contrôles de l'onglet Style ne sont jamais grisés, donc un champ d'apparence désactivée est un problème de navigateur ou de conflit, pas de licence.
L'étiquette ne s'affiche pas sur la boutique
Réglez le commutateur en haut de l'écran Créer une étiquette sur Actif. Une nouvelle étiquette commence inactive. Vérifiez ensuite les règles d'affichage de cette étiquette. Voir Comment configurer les règles et conditions d'affichage des étiquettes dans Advanced Promo Kit.
Foire aux questions
Comment attribuer une étiquette à des produits spécifiques ?
Après avoir enregistré une étiquette, ouvrez le produit que vous souhaitez étiqueter et trouvez la boîte méta Advanced Promo Kit sur l'écran de modification du produit. Créez l'étiquette là-bas. Elle s'applique à ce produit uniquement et a toujours la priorité sur les étiquettes globales. Vous pouvez également utiliser l'onglet Conditions lors de la création d'une étiquette pour l'appliquer automatiquement aux produits qui correspondent aux critères que vous définissez Comment configurer les règles et conditions d'affichage des étiquettes dans Advanced Promo Kit : par exemple, tous les produits d'une catégorie particulière ou en promotion.
Puis-je utiliser plus d'une étiquette sur le même produit ?
Un produit peut avoir une étiquette spécifique au produit, plus toutes les étiquettes globales dont il correspond aux conditions. Le paramètre Maximum Labels Per Product limite le nombre d'étiquettes qui apparaissent à la fois, et il est défini par défaut sur 3. Chaque étiquette a ses propres paramètres de position, vous pouvez donc les empiler ou les répartir sur l'image du produit.
Le texte de mon insigne semble serré ou coupé. Comment y remédier ?
Ouvrez l'onglet Style de votre étiquette et augmentez les valeurs de Width (Pixel) et Height (Pixel). Vous pouvez également réduire la taille de la police sous Text Options dans l'onglet General. La taille par défaut de l'insigne est de 80×30px, ce qui convient aux textes courts, donc les étiquettes plus longues, y compris celles qui utilisent des variables dynamiques, nécessitent plus d'espace. Un bon point de départ est de 240 à 280px de large et de 36 à 40px de haut. Prévisualisez le résultat et ajustez jusqu'à ce que le texte s'affiche confortablement.
Puis-je styliser les étiquettes différemment sur mobile ?
Non. Advanced Promo Kit n'a pas de panneau de style mobile séparé. Les mêmes paramètres de l'onglet Style s'appliquent sur tous les points de vue. Contrôlez quels produits affichent une étiquette avec les règles d'affichage, pas avec un commutateur d'appareil. Voir Comment configurer les règles et conditions d'affichage des étiquettes dans Advanced Promo Kit.
Prochaines étapes
- Comment gérer les étiquettes dans Advanced Promo Kit
- Comment configurer les règles et conditions d'affichage des étiquettes dans Advanced Promo Kit
- Comment utiliser les espaces réservés de contenu dynamique dans les étiquettes de produits
- Référence des paramètres de l'Advanced Promo Kit
Besoin d'aide ?
Si vous avez une question ou rencontrez des problèmes, nous sommes là pour vous aider.
- Utilisateurs Premium : Ouvrir un ticket de support
- Utilisateurs gratuits : Visitez notre forum communautaire
