De standaard "Sale!"-badge van WooCommerce vertelt shoppers dat een product is afgeprijsd, maar niet hoeveel ze besparen. Een korting van 10% en een korting van 40% kunnen er op de winkelpagina precies hetzelfde uitzien, ook al vertegenwoordigen ze heel verschillende besparingen.
Die extra context is belangrijk wanneer shoppers actief op zoek zijn naar waarde. Volgens Deloitte’s 2025 Holiday Retail Survey was 89% van de ondervraagde consumenten van plan om naar aanbiedingen te zoeken om hun budget te rekken. Het tonen van de werkelijke korting geeft hen meer bruikbare informatie in één oogopslag dan een generiek uitverkooplabel.
Met Advanced Promo Kit kunt u WooCommerce kortingspercentage-badges laten zien met behulp van live productgegevens, zodat het getal wordt bijgewerkt wanneer de prijs verandert. U kunt ook het bespaarde bedrag tonen, badges beperken tot grotere kortingen en coupon- of BOGO-deals rechtstreeks op de productgrid weergeven.
Wat de standaard WooCommerce-uitverkoopbadge kan en niet kan tonen
Standaard toont WooCommerce een generieke uitverkoop-badge op producten die momenteel in de uitverkoop zijn. Het kan verschijnen op winkel- en productpagina's, maar de standaardbadge vertelt shoppers niet hoe groot de korting is.
Dat is opzettelijk. WooCommerce bepaalt of een product in de uitverkoop is, waarna de standaardbadge een generiek "Uitverkoop!"-label weergeeft. Het berekent niet het percentage of het bespaarde bedrag voor de shopper, en het vertegenwoordigt geen coupurekortingen.
Als uw thema de gewenste badge-tekst niet biedt, zijn twee veelvoorkomende opties een codefragment dat de uitverkoop-badge-tekst herschrijft of een label-plugin die de tekst genereert uit productgegevens. Beide benaderingen worden hieronder behandeld.
De Snippet-methode en de beperkingen ervan
Een gebruikelijke snippet-aanpak voor klassieke WooCommerce-templates maakt gebruik van de `woocommerce_sale_flash` filter en vervangt "Uitverkoop!" door een berekend percentage. Nieuwere blokgebaseerde uitverkoop-badge-uitvoer gebruikt in plaats daarvan `woocommerce_sale_badge_text`, dus een klassieke snippet-aanpak heeft mogelijk geen invloed op elk badge-oppervlak. In beide gevallen leest de code prijsgegevens, berekent een percentage en retourneert dit als badge-tekst.
Voor een eenvoudig product met één prijs-paar werkt deze aanpak goed.
Een basis-snippet wordt ingewikkelder op drie plaatsen:
- Variabele en gegroepeerde producten: er is geen enkele reguliere en uitverkoopprijs voor het hele product. De code moet beslissen hoe meerdere prijzen of variaties in één badge weer te geven, dus een enkel percentage kan misleidend zijn.
- Thema-updates: als u de snippet rechtstreeks toevoegt aan het `functions.php`-bestand van een hoofdthema, kan een thema-update deze overschrijven. Een kindthema of een snippet-plugin houdt de aangepaste code gescheiden.
- Coupons: een basis-uitverkoopprijs-snippet vergelijkt alleen productprijzen. Het weet niet automatisch van een 20% kortingscode of een BOGO-deal die is opgeslagen in de couponinstellingen.
Voeg een drempelwaarde toe ("alleen badge-items met meer dan 25% korting") of een geplande einddatum, en de snippet wordt complexer om te onderhouden.
Hoe Advanced Promo Kit kortingsbadges genereert
Advanced Promo Kit genereert badge-tekst uit placeholders die worden opgelost tegen productgegevens wanneer de pagina wordt geladen. U schrijft het label één keer, met `{discount_percent}` waar het getal moet komen, en de placeholder berekent het cijfer uit de huidige prijsgegevens van het product wanneer deze wordt opgelost.
Drie functies zijn bijzonder nuttig voor deze workflow:
- Placeholders worden live opgelost: `{product_price}`, `{regular_price}`, `{sale_price}`, `{discount_percent}` en `{discount_amount}` worden opgehaald uit het product op het moment van renderen, geformatteerd met uw WooCommerce-valuta-instellingen. Op eenvoudige producten werkt het wijzigen van de prijs automatisch de kortingsplaceholders bij.
- Lege placeholders verbergen het label: als een placeholder niets oplevert (zeg, `{discount_percent}` op een product dat niet in de uitverkoop is), wordt het hele label op dat product verborgen. U krijgt nooit een badge met de tekst "Bespaar !" op een artikel tegen volle prijs.
- Voorwaarden bepalen waar het wordt weergegeven: het tabblad Voorwaarden bevat de voorwaarde 'In de aanbieding' (Is / Is niet) en een voorwaarde 'Kortingspercentage' met de operatoren Gelijk aan, Niet gelijk aan, Groter dan, Groter dan of gelijk aan, Kleiner dan, en Kleiner dan of gelijk aan, gegroepeerd met AND/OR logica.
Advanced Promo Kit heeft ook een optionele integratie met Advanced Coupons. Met de gratis Advanced Coupons plugin actief, rendert de {ac_coupon-COUPONCODE} placeholder de korting van een Advanced Coupons coupon, inclusief BOGO-deals. Dat valt buiten wat een basis kortingsprijs-snippet afhandelt.
Deze handleiding gaat ervan uit dat je al een basislabel hebt gemaakt. Als dat niet zo is, begin dan met onze handleiding om aangepaste productbadges maken en kom dan terug. Vanaf hier zijn het alleen nog placeholders en voorwaarden.
Stap 1: Toon een percentagebadge op artikelen in de aanbieding
Voor eenvoudige producten kun je het kortingspercentage op artikelen in de aanbieding tonen met één label waarvan de tekst -{discount_percent} is en waarvan de enige voorwaarde 'In de aanbieding' is met de operator 'Is'. Hier is de reeks.
- Ga naar Promo Kit > Label maken. Geef het label een naam die je herkent in de lijst Labels beheren, zoals "Korting in procenten".
- Typ in het veld Badge Label een koppelteken. Vouw vervolgens Variabele: Product uit in het paneel Variabelen onder het veld en klik op {discount_percent}. Placeholders zijn hoofdlettergevoelig, dus gebruik het paneel of kopieer de exacte kleine lettercode.
- Controleer de Badge Voorbeeld aan de rechterkant. Zonder gekozen product staat er -25%, gebaseerd op vaste voorbeeldwaarden ($39,99 normaal, $29,99 aanbieding). Kies een product uit de dropdown boven het voorbeeld, en het wordt opgelost tegen de live prijzen van dat product.
- Open het tabblad Voorwaarden en voeg 'In de aanbieding' toe met de operator 'Is'. Het vereist geen waarde.
- Kies een badge stijl en positie op het tabblad Stijl (meer hierover hieronder). Nieuwe labels beginnen als Inactief, dus schakel de schakelaar bovenaan het scherm naar Actief en klik vervolgens op Opslaan.
Selecteer een echt product in het voorbeeld en bevestig dezelfde waarde in de storefront nadat je hebt opgeslagen.
Bezoek een categorie met een paar eenvoudige artikelen in de aanbieding. Elk artikel toont zijn eigen percentage, en artikelen tegen volle prijs tonen niets, omdat {discount_percent} leeg is voor hen. Strikt genomen is de voorwaarde 'In de aanbieding' hier een extra vangnet, aangezien de regel voor automatisch verbergen het label al van producten tegen volle prijs zou houden. Houd het toch, zodat de lijst met labels in één oogopslag duidelijk leesbaar is.
Eén veelgemaakte fout is het typen van {discount_percent}% korting, wat "25%% korting" rendert op de storefront en de placeholder er kapot uit laat zien. De placeholder bevat al het procentteken, dus schrijf -{discount_percent} of {discount_percent} korting. Een percentage kan ook onverwacht groot lijken bij een forse korting in een vast bedrag: een korting van €10 op een product van €12 rendert als "-83%". Gebruik voor die artikelen de bedrag-placeholder in Stap 2.
De volledige lijst met ingebouwde placeholders, met de exacte hoofdlettergevoeligheid die elk vereist en wanneer elk leeg wordt, staat in onze referentie voor dynamische content placeholders.
Stap 2: Toon Het Bespaarde Bedrag Of Alleen Boven Een Drempelwaarde
Gebruik {discount_amount} als u het bespaarde bedrag wilt benadrukken, en voeg een Kortingspercentage-conditie toe als u alleen badges wilt boven een specifieke kortingsdrempel.
Volgens Baymard Institute (2022), valt 18%+ van de e-commerce sites in ten minste één van de vier valkuilen bij het tonen van prijskortingen op de productpagina, en in hun grootschalige tests werkt het weergeven van zowel de absolute als de relatieve korting het beste. Ze wijzen ook op de "Rule of 100": een percentage voor items onder $100 en een dollarbedrag erboven, dus "$100 korting" op een item van $1.000 kan substantiëler aanvoelen dan "10% korting". Een tweede label met de tekst Bespaar {discount_amount} wordt weergegeven als "Bespaar $10,00" in uw winkelvaluta, en niets anders aan de instelling verandert.
Voor een drempelwaarde, open het tabblad Voorwaarden en voeg Kortingspercentage toe met de operator Groter dan of gelijk aan. Voer bijvoorbeeld 15 in als u de badge alleen wilt op producten met minimaal 15% korting. Kies een drempelwaarde die bij uw promotie past. Ter context, Adobe's analyse van het feestdagen-seizoen 2025 rapporteerde piek kortingen van 30,9% in elektronica en 29,6% in speelgoed. Als u beslist hoe groot een korting u wilt aanbieden, behandelt onze data post over het meest effectieve kortingspercentage dat afzonderlijk.
Gebruik voor variabele producten vaste tekst zoals "Geselecteerde opties in de uitverkoop", behoud de Kortingspercentage-conditie en voeg een Producttype-conditie toe. Stel vervolgens Variabele Product Matching (Promo Kit > Instellingen > Algemeen) in op Match elk type, zodat het label verschijnt wanneer ten minste één variatie aan de drempelwaarde voldoet.
Hier zie je hoe dit in de praktijk werkt (voorbeeldgegevens):
| Doel | Placeholder / conditie | Badge tekst die u typt | Wat shoppers zien |
|---|---|---|---|
| Percentage korting op een simpel verkocht artikel | In de uitverkoop, Is + {discount_percent} | -{discount_percent} | -25% |
| Bespaard bedrag | {discount_amount} | Bespaar {discount_amount} | Bespaar $10,00 |
| Alleen grote kortingen | Kortingspercentage >= 25 + {discount_percent} | Opruiming -{discount_percent} | Opruiming -40% |
| Coupon deal op de grid | {ac_coupon-SUMMER20} | {ac_coupon-SUMMER20} korting met SUMMER20 | 20% korting met SUMMER20 |
| BOGO coupon | {ac_coupon-BOGO2FOR1} | {ac_coupon-BOGO2FOR1} | Koop 1 Krijg 1 Gratis |
Voorbeeld badge tekst. De opgeloste uitvoer wordt gegenereerd uit de live prijzen van elk product en de instellingen van de coupon.
Stap 3: Toon Coupon En BOGO Deals Als Badges
Een coupon badge gebruikt de {ac_coupon-COUPONCODE} placeholder, die de korting van een specifieke Advanced Coupons coupon weergeeft op uw product badges. Een basis verkoopprijs-snippet produceert dit niet, omdat de deal in de coupon zit in plaats van in de productprijs.
- Ga naar Promo Kit > Instellingen, open het tabblad Integraties en schakel de rij Advanced Coupons for WooCommerce in. De schakelaar is grijs als Advanced Coupons niet actief is. Er verschijnt een suboptie Valideren Coupon; laat deze voorlopig uitgeschakeld.
- Maak of bewerk een label. Scroll in het paneel Variabelen naar de sectie Advanced Coupons for WooCommerce, typ ten minste twee tekens van de couponcode, kies de coupon uit de dropdown en klik op Variabele invoegen. De placeholder, bijvoorbeeld {ac_coupon-SUMMER20}, wordt toegevoegd aan de badge tekst.
- Bouw de tekst eromheen, zoals {ac_coupon-SUMMER20} korting met SUMMER20. Het voorbeeld toont het direct.
Wat de placeholder weergeeft, hangt af van het coupontype:
- Percentage coupon: 25%
- Vaste winkelwagenkorting: $10.00
- Vaste productkorting: $5.00, en alleen op producten waar de coupon van toepassing is
- BOGO deal: Koop er 2, krijg er 1 gratis, of Koop er 2, krijg er 1 met 50% korting, en alleen op de "koop" producten van de deal. De deal heeft specifieke producten of productcategorieën als trigger nodig; deals getriggerd door een willekeurig product, of ingesteld om hetzelfde product te geven, renderen geen badge
- Store credit cashback (Advanced Coupons Premium): 15% Cashback of $10.00 Cashback
Vaste product- en BOGO-badges verschijnen alleen op de producten die de deal dekt; overal elders is de placeholder leeg en is het label verborgen, dezelfde regel als voorheen. Percentage-, vaste winkelwagen- en cashbackcoupons controleren geen productbeperkingen, dus hun badge wordt weergegeven op elk product dat het label bereikt. Als een van die coupons slechts een categorie dekt, voeg dan een bijpassende Productcategorie-conditie toe aan het label. Als je een WooCommerce BOGO-coupon gebruikt die is gebouwd met de gratis Advanced Coupons-plugin, kan de badge de deal aankondigen waar een ondersteund "koop"-product verschijnt.
De optie Valideren Coupon is optioneel en standaard uitgeschakeld. Schakel deze in en Advanced Promo Kit controleert of de coupon geldig is en niet verlopen voordat het label wordt weergegeven, en een coupon die de controle niet doorstaat, verbergt het label. Dat is geschikt voor codes met vervaldatums. Laat deze uitgeschakeld voor tijdloze codes die je toch wilt adverteren.
Als je promotie vaste data heeft, maar je wilt dat de badge verschijnt voordat de coupon live gaat, gebruik dan in plaats daarvan het tabblad Planning. Elk label heeft een optionele Startdatum en Einddatum, vergeleken in de tijdzone van je site, en verbergt zichzelf buiten dat venster. Gerelateerde integraties voegen twee extra placeholders toe: {lp_points} toont de loyaliteitspunten die een product verdient via Advanced Loyalty Program, terwijl {agc_gift_card_value} de waarde van een cadeaubonproduct toont via Advanced Gift Cards. De type-voor-type referentie voor couponuitvoer staat in onze gids voor het weergeven van couponkortingsinformatie op productlabels.
Styling, Stacking En Testen Van Je Dynamische Badges
Dynamische waarden kunnen meer ruimte innemen dan de placeholdertekst die u in de editor ziet. Voor labels zoals "Bespaar € 10,00", is een praktisch startpunt ongeveer 240 tot 280 pixels breed en 36 tot 40 pixels hoog. U kunt de afmetingen verfijnen op het tabblad Stijl zodra u de opgeloste tekst ziet.
Twaalf badgevormen bevinden zich op het tabblad Algemeen (Rechthoek Horizontaal, Rechthoek Verticaal, Pil, Cirkel, Vierkant, Lint Links, Lint Rechts, Tag, Zeshoek, Ster, Banner en een Aangepaste Afbeelding), naast tekstkleur, lettergrootte en -dikte. Het tabblad Stijl voegt badgekleur, breedte, hoogte, randradius, opvulling, dekking en rotatie toe, allemaal met een live voorbeeld. Verloopachtergronden, schaduwen, animaties, een klikbare URL en een hover-tooltip zijn er ook. Plaatsing is Op Afbeelding of Buiten Afbeelding, in een van de vier hoeken met pixelverschuivingen. Voor ideeën voor vormen en kleuren, onze verzameling van sale badge ontwerpen die converteren heeft vijftien uitgewerkte voorbeelden.
Stapelen is standaard ingeschakeld. Maximale Labels Per Product is standaard ingesteld op drie, en Labelafstand is standaard ingesteld op vijf pixels; beide kunnen worden aangepast onder Instellingen > Algemeen. Prioriteit is een drag-and-drop volgorde onder Instellingen > Prioriteitsvolgorde, waar labels hoger in de lijst eerst worden weergegeven, dus sleep "Procent korting" boven "Coupon deal".
Voordat u het definitief maakt, controleer vijf producten op zowel de winkelraster als de enkele productpagina:
- Eenvoudig product in de aanbieding: toont zijn eigen percentage
- Variabel product met gemengde kortingen: toont uw vaste tekstlabel als een variant in aanmerking komt
- Product tegen volledige prijs: toont helemaal niets
- Product waarop uw coupon niet van toepassing is: geen BOGO of vaste productbadge, en geen percentage-, vaste winkelwagen- of cashbackbadge als u deze hebt ingeschaald met een voorwaarde
- Product dat in aanmerking komt voor elk label: respecteert uw instelling Maximale Labels Per Product en de prioriteitsvolgorde die u hebt ingesteld
Veelgestelde Vragen
Hoe toon ik het kortingspercentage op de WooCommerce-uitverkoopbadge?
De standaard uitverkoopbadge van WooCommerce toont het kortingspercentage niet. Om er een toe te voegen, kunt u code of een labelplug-in gebruiken. Maak voor eenvoudige producten in Advanced Promo Kit een label met de tekst -{discount_percent} en voeg een 'On Sale'-voorwaarde toe met de 'Is'-operator. Het percentage wordt bij elke paginalading opnieuw berekend op basis van de live prijzen van het product.
Kan de uitverkoopbadge het bespaarde bedrag tonen in plaats van het percentage?
Ja. Gebruik de {discount_amount}-placeholder, die het verschil tussen de reguliere en de uitverkoopprijs weergeeft, geformatteerd in uw winkelvaluta, dus "Save {discount_amount}" wordt weergegeven als "Bespaar €10,00". Baymard wijst op de "Rule of 100": wanneer u slechts één formaat toont, kunnen procentuele besparingen aantrekkelijker aanvoelen onder de €100, terwijl dollarbesparingen aantrekkelijker kunnen aanvoelen boven de €100. U kunt één label van elk uitvoeren met een 'Product Price'-voorwaarde om ze te splitsen.
Kan een WooCommerce-badge een coupon- of BOGO-deal tonen?
Ja, via de Advanced Coupons-integratie in Advanced Promo Kit. Schakel deze in onder Promo Kit > Instellingen > Integraties, voeg vervolgens {ac_coupon-YOURCODE} in een label in. Percentage-, vaste winkelwagen-, vaste product-, BOGO- en tegoed-cashback (Premium) coupons geven elk hun eigen bewoordingen weer, zoals "Koop er 2, krijg er 1 gratis". Labels voor vaste producten en BOGO verschijnen alleen op de producten die de deal dekt; voor percentage-, vaste winkelwagen- en cashback-coupons voegt u een voorwaarde toe om te beperken waar het label wordt weergegeven.
Wordt de badge bijgewerkt wanneer ik de prijs wijzig?
Ja. Bij eenvoudige producten worden prijs-placeholders opgelost tegen de huidige reguliere en uitverkoopprijs van het product wanneer de pagina wordt weergegeven, dus het wijzigen van een prijs verandert de badge zonder dat het label hoeft te worden bewerkt. Als u de uitverkoopprijs volledig verwijdert, wordt {discount_percent} opgelost tot leeg en verdwijnt het label vanzelf van dat product.
Uw Kortingsbadges Klaarmaken
Het doel is om elke badge in lijn te houden met de promotie die het beschrijft. Dynamische placeholders verminderen de badge tekst die u handmatig moet bijwerken wanneer productprijzen veranderen.
Dit is wat u vervolgens moet doen:
- Wat de standaard WooCommerce Sale Badge kan en niet kan tonen: bepaal of het standaard "Sale!" label voldoende kortingsdetails biedt aan shoppers.
- De Snippet Methode En Haar Grenzen: als u al een snippet uitvoert, controleer deze dan op een variabel product voordat u erop vertrouwt.
- Toon een Percentage Badge op Sale Items: bouw het percentage label, en onthoud dat de placeholder zijn eigen % teken meedraagt.
- Toon het Bespaarde Bedrag of Alleen Boven een Drempelwaarde: voeg een bedrag label toe en een Kortingspercentage >= drempelwaarde.
- Plaats Coupon en BOGO Deals op de Grid: schakel de integratie in en badge uw beste coupon.
Als u wilt dat WooCommerce het kortingspercentage toont zonder een aangepaste snippet om te behouden, stelt u Advanced Promo Kit dynamische verkooibadges in en koppelt u uw badgetekst aan uw productgegevens.
