Als je verkoop- of campagnebadges op je productafbeeldingen wilt, kun je deze bouwen in Advanced Promo Kit. Deze handleiding leidt je door het maken van een label, inclusief opties op het tabblad Stijl, zoals animaties en hover-tooltips, zodat de badge eruitziet zoals je gepland had op de winkel- en productpagina's.
Vereisten
- WooCommerce geïnstalleerd en actief
- Advanced Promo Kit geïnstalleerd en actief Advanced Promo Kit
- Minstens één gepubliceerd WooCommerce-product
Stap 1: open het scherm Label maken
Klik in uw WordPress-dashboard op Promo Kit in het linkermenu en klik vervolgens op Label maken.
Stap 2: vul het tabblad Algemeen in
Het tabblad Algemeen bepaalt wat je label zegt en welke vorm het aanneemt.
- Voer in het veld Titel een interne naam voor dit label in. Dit is alleen voor uw referentie en wordt niet aan klanten getoond.
- Typ in het veld Badge Label de tekst die op de badge moet verschijnen: bijvoorbeeld SALE, NIEUW, of −20%. Je kunt dynamische variabelen gebruiken (zie de onderstaande tabel) om automatisch live productgegevens weer te geven. Dynamische inhoudsplaathouders gebruiken in productlabels
- Stel onder Tekstopties de lettergrootte (8 tot 72 px), de letterdikte (Normaal, Vet, Halfvet of Licht) en de regelhoogte in.
- Klik onder Badgevorm op de vorm die je wilt gebruiken. Er zijn 12 vormen beschikbaar: Rechthoek Horizontaal, Rechthoek Verticaal, Pil, Cirkel, Vierkant, Lint Links, Lint Rechts, Tag, Zeshoek, Ster, Banner en Aangepaste Afbeelding. Als je Aangepaste Afbeelding kiest, verschijnt er een uploadknop zodat je je eigen afbeeldingsbestand als badge kunt gebruiken.
Dynamische variabelen
Typ een van deze codes in het veld Badgetekst. Advanced Promo Kit vervangt ze door echte waarden wanneer het label op een product in je winkel wordt weergegeven.
| Variabele | Vervangen door |
|---|---|
{product_price} | De huidige prijs van het product |
{regular_price} | De normale (niet-afgeprijsde) prijs van het product |
{sale_price} | De afgeprijsde prijs van het product |
{discount_percent} | Het kortingspercentage, bijv. 20% |
{discount_amount} | Het vaste kortingsbedrag, bijv. €10 |
{stock_quantity} | Het huidige voorraadniveau van het product |
Stap 3: pas de stijl aan
Klik op het tabblad Stijl om te bepalen hoe uw label eruitziet. Het tabblad is verdeeld in verschillende secties.
Stijlopties
- Badgekleur: klik op het kleurenpalet om de kleurkiezer te openen en kies een achtergrondkleur voor je label.
- Breedte (pixels) en Hoogte (pixels): voer pixeldwaarden (20–500 px) in om de badgegrootte in te stellen.
- Randradius (pixels): pas elke hoek afzonderlijk aan om de randen af te ronden.
- Tekstopvulling (pixels): stel opvulling in aan elke kant van de badgetekst.
- Extra stijlen: voeg eventuele aangepaste CSS toe die je nodig hebt voor dit specifieke label.
Dekking en positie
- Dekking: stel de labeltransparantie in van 0 (onzichtbaar) tot 100 (volledig dekkend).
- Rotatie: roteer de badge tussen 0 en 360 graden.
- Tekstrichting: kies Horizontaal of Verticaal.
- Badgeplaatsing: kies Op afbeelding (overlapt de productafbeelding) of Buiten afbeelding (onder kaart).
- Badgepositie: kies boven of onder, en links of rechts, voer vervolgens pixelverschuivingen in om de plaatsing van de badge te verfijnen.
Verloop en schaduw
Gebruik deze bedieningselementen om de badge een verloopvulling en een slagschaduw te geven.
- Verloop inschakelen: pas een verloopvulling met twee kleuren toe. Kies Verloopkleur 1, Verloopkleur 2, en een Verlooprichting (Links naar rechts, Rechts naar links, Boven naar beneden, Beneden naar boven, of diagonaal).
- Schaduw inschakelen: voeg een slagschaduw toe met Schaduwkleur, Vervaging, Offset X, en Offset Y.
Animatie
Gebruik Animatietype om de badge te laten animeren in de etalage. Opties: Geen, Pulseren, Flitsen, Schudden, Stuiteren, Roteer, en Zwaaien. Kies Geen om de badge stil te houden.
Interactiviteit
- Klikbare URL (Link naar pagina): maak de badge een link. Winkelende klanten die erop klikken gaan naar de URL die je invoert.
- Tooltiptekst (Hover): tekst die verschijnt wanneer een winkelende klant met de muis over de badge gaat.
Stap 4: stel een planning in (optioneel)
Klik op het tabblad Schema als je wilt dat het label alleen verschijnt tijdens een specifieke tijdsperiode: bijvoorbeeld, alleen tijdens een weekenduitverkoop.
- Startdatum: de datum en tijd waarop het label begint te worden weergegeven. Laat dit leeg om het label onmiddellijk na het opslaan te tonen.
- Einddatum: de datum en tijd waarop het label stopt met worden weergegeven. Laat dit leeg om het label onbeperkt te tonen.
Stap 5: sla het label op
Als u tevreden bent met uw instellingen, klikt u bovenaan het scherm op Opslaan. Het label is aangemaakt en verschijnt in uw lijst met labels. Zet de schakelaar bovenaan het scherm op Actief zodat het label op uw winkelpagina wordt weergegeven, want een nieuw label begint inactief. U kunt het op elk moment bewerken door erop te klikken in de lijst.
De live-preview gebruiken
Terwijl u de tabbladen Algemeen en Stijl invult, wordt de live voorvertoning aan de rechterkant van het scherm in realtime bijgewerkt. Het toont een voorbeeldproduct met uw label toegepast, zodat u kunt zien hoe het eruitziet voordat u opslaat.
De voorvertoning gebruikt dummy productwaarden. Dynamische variabelen zoals {discount_percent} zullen de juiste waarden weergeven voor elk echt product in uw winkel zodra het label live is.
Probleemoplossing
Het scherm Label aanmaken wordt bedekt door een licentiebericht
Advanced Promo Kit heeft een actieve licentie nodig. Als de licentie ontbreekt of is verlopen, dekt de plugin het scherm met een licentiebericht in plaats van u het label te laten bewerken. Voeg uw licentiesleutel toe of vernieuw deze, en laad vervolgens de pagina opnieuw. De bedieningselementen van het tabblad Stijl worden nooit grijs weergegeven, dus een veld dat er uitgeschakeld uitziet, is een browser- of conflictprobleem, geen licentieprobleem.
Het label wordt niet weergegeven op de storefront
Stel de schakelaar bovenaan het scherm Label aanmaken in op Actief. Een nieuw label begint inactief. Controleer vervolgens de weergègle regels voor dat label. Zie Hoe u labelweergègle regels en voorwaarden instelt in Advanced Promo Kit.
Veelgestelde vragen
Hoe wijs ik een label toe aan specifieke producten?
Nadat u een label hebt opgeslagen, opent u het product dat u wilt taggen en zoekt u de metabox Advanced Promo Kit op het productbewerkingsscherm. Bouw het label daar. Het is alleen van toepassing op dat product en heeft altijd voorrang op globale labels. U kunt ook het tabblad Voorwaarden gebruiken bij het maken van een label om het automatisch toe te passen op producten die voldoen aan criteria die u definieert Hoe u Labelweergègle regels en voorwaarden instelt in Advanced Promo Kit: bijvoorbeeld, alle producten in een bepaalde categorie of in de uitverkoop.
Kan ik meer dan één label op hetzelfde product gebruiken?
Een product kan één product-specifiek label hebben, plus alle globale labels waarvan de voorwaarden het product matcht. De instelling Maximale labels per product bepaalt hoeveel er tegelijkertijd worden weergegeven en staat standaard op 3. Elk label heeft zijn eigen positie-instellingen, zodat u ze kunt stapelen of verspreiden over de productafbeelding.
Mijn badge-tekst ziet er krap uit of is afgesneden. Hoe los ik dit op?
Open het tabblad Stijl voor uw label en verhoog de waarden voor Breedte (pixels) en Hoogte (pixels). U kunt ook de lettergrootte verkleinen onder Tekstopties op het tabblad Algemeen. De standaard badgegrootte is 80×30px, wat geschikt is voor korte tekst, dus langere labels, waaronder die met dynamische placeholders, hebben meer ruimte nodig. Een goed startpunt is 240 tot 280px breed en 36 tot 40px hoog. Bekijk het resultaat en pas aan totdat de tekst comfortabel past.
Kan ik labels anders stylen op mobiel?
Nee. Advanced Promo Kit heeft geen apart mobiel stijlpaneel. Dezelfde instellingen van het tabblad Stijl zijn van toepassing op elke viewport. Bepaal welke producten een label tonen met weergègle regels, niet met een apparaat-schakelaar. Zie Hoe u labelweergègle regels en voorwaarden instelt in Advanced Promo Kit.
Wat nu
- Hoe labels te beheren in Advanced Promo Kit
- Hoe u labelweergègle regels en voorwaarden instelt in Advanced Promo Kit
- Hoe dynamische content placeholders te gebruiken in productlabels
- Advanced Promo Kit instellingen referentie
Hulp nodig?
Als u een vraag heeft of tegen problemen aanloopt, staan we klaar om u te helpen.
- Premium gebruikers: Open een ondersteuningsticket
- Gratis gebruikers: Bezoek ons communityforum
