Das Standard-„Sale!“-Etikett von WooCommerce teilt den Käufern mit, dass ein Produkt rabattiert ist, aber nicht, wie viel sie sparen. Ein Rabatt von 10 % und ein Rabatt von 40 % können auf der Shop-Seite genau gleich aussehen, obwohl sie sehr unterschiedliche Ersparnisse darstellen.
Dieser zusätzliche Kontext ist wichtig, wenn Käufer aktiv nach Wert suchen. Laut Deloittes Umfrage zum Weihnachtsgeschäft 2025 planten 89 % der befragten Verbraucher, nach Angeboten zu suchen, um ihre Budgets zu schonen. Die Anzeige des tatsächlichen Rabatts gibt ihnen auf einen Blick nützlichere Informationen als ein generisches Sale-Etikett.
Mit Advanced Promo Kit können Sie WooCommerce Rabattprozentsatz-Etiketten mit Live-Produktdaten anzeigen lassen, sodass sich die Zahl ändert, wenn sich der Preis ändert. Sie können auch den gesparten Betrag anzeigen, Etiketten auf größere Preisnachlässe beschränken und Gutschein- oder BOGO-Angebote direkt im Produktgitter anzeigen.
Was das Standard-WooCommerce-Angebotsetikett anzeigen kann und was nicht
Standardmäßig zeigt WooCommerce ein generisches Sale-Badge für Produkte an, die gerade im Angebot sind. Es kann auf Shop- und Produktseiten erscheinen, aber das Standard-Badge informiert Käufer nicht darüber, wie hoch der Rabatt ist.
Das ist beabsichtigt. WooCommerce entscheidet, ob ein Produkt im Angebot ist, dann gibt das Standard-Badge die generische Bezeichnung „Sale!“ aus. Es berechnet weder den prozentualen noch den gesparten Betrag für den Käufer und repräsentiert keine Gutscheinrabatte.
Wenn Ihr Theme die gewünschte Beschriftung für das Badge nicht anbietet, sind zwei gängige Optionen ein Code-Snippet, das den Sale-Badge-Text umschreibt, oder ein Label-Plugin, das den Text aus Produktdaten generiert. Beide Ansätze werden unten behandelt.
Die Snippet-Methode und ihre Grenzen
Ein gängiger Snippet-Ansatz für klassische WooCommerce-Vorlagen verwendet den Filter `woocommerce_sale_flash`, um „Sale!“ durch einen berechneten Prozentsatz zu ersetzen. Die neuere blockbasierte Ausgabe des Sale-Badges verwendet stattdessen `woocommerce_sale_badge_text`, sodass ein klassisches Snippet möglicherweise nicht auf allen Badge-Oberflächen wirkt. In beiden Fällen liest der Code Preisdaten, berechnet einen Prozentsatz und gibt ihn als Badge-Text zurück.
Für ein einfaches Produkt mit einem Preispaar funktioniert dieser Ansatz gut.
Ein einfaches Snippet wird an drei Stellen komplizierter:
- Variable und gruppierte Produkte: Es gibt keinen einzelnen regulären und Verkaufspreis für das gesamte Produkt. Der Code muss entscheiden, wie mehrere Preise oder Variationen in einem Badge dargestellt werden, sodass ein einzelner Prozentsatz irreführend sein kann.
- Theme-Updates: Wenn Sie das Snippet direkt in die functions.php-Datei eines übergeordneten Themes einfügen, kann ein Theme-Update es überschreiben. Ein Child-Theme oder ein Snippets-Plugin hält den benutzerdefinierten Code getrennt.
- Gutscheine: Ein einfaches Sale-Preis-Snippet vergleicht nur Produktpreise. Es kennt nicht automatisch einen Gutscheincode mit 20 % Rabatt oder ein BOGO-Angebot, das in den Gutscheineinstellungen gespeichert ist.
Fügen Sie einen Schwellenwert hinzu („nur Badge-Artikel über 25 % Rabatt“) oder ein geplantes Enddatum, und das Snippet wird komplexer in der Wartung.
Wie Advanced Promo Kit Rabatt-Badges generiert
Advanced Promo Kit generiert Badge-Text aus Platzhaltern, die beim Laden der Seite gegen Produktdaten aufgelöst werden. Sie schreiben das Label einmal mit {discount_percent} an der Stelle, wo die Zahl hingehört, und der Platzhalter berechnet die Zahl aus den aktuellen Preisdaten des Produkts, wenn er aufgelöst wird.
Drei Funktionen sind für diesen Workflow besonders nützlich:
- Platzhalter werden live aufgelöst: {product_price}, {regular_price}, {sale_price}, {discount_percent} und {discount_amount} werden zur Renderzeit aus dem Produkt abgerufen und mit Ihren WooCommerce-Währungseinstellungen formatiert. Bei einfachen Produkten aktualisiert die Änderung des Preises automatisch die Rabattplatzhalter.
- Leere Platzhalter verstecken das Label: Wenn ein Platzhalter zu nichts aufgelöst wird (z. B. {discount_percent} bei einem Produkt, das nicht im Angebot ist), wird das gesamte Label für dieses Produkt ausgeblendet. Sie erhalten nie ein Badge mit der Aufschrift „Sparen!“ bei einem Artikel zum vollen Preis.
- Bedingungen entscheiden, wo es angezeigt wird: Der Bedingungen-Tab enthält die Bedingung "Im Angebot" (Ist / Ist nicht) und eine Bedingung für den Rabattprozentsatz mit den Operatoren Gleich, Ungleich, Größer als, Größer als oder gleich, Kleiner als und Kleiner als oder gleich, gruppiert mit AND/OR-Logik.
Advanced Promo Kit hat auch eine optionale Integration mit Advanced Coupons. Wenn das kostenlose Advanced Coupons Plugin aktiv ist, rendert der Platzhalter {ac_coupon-COUPONCODE} den Rabatt eines Advanced Coupons Coupons, einschließlich BOGO-Angebote. Das geht über das hinaus, was ein einfacher Sale-Price-Snippet handhaben kann.
Diese Anleitung setzt voraus, dass Sie bereits ein einfaches Label erstellt haben. Wenn nicht, beginnen Sie mit unserer Anleitung zum Erstellen von benutzerdefinierten Produkt-Badges und kommen Sie dann zurück. Von nun an geht es nur noch um Platzhalter und Bedingungen.
Schritt 1: Prozent-Badge für reduzierte Artikel anzeigen
Für einfache Produkte können Sie den Rabattprozentsatz für reduzierte Artikel mit einem Label anzeigen, dessen Text -{discount_percent} lautet und dessen einzige Bedingung "Im Angebot" mit dem Operator "Ist" ist. Hier ist die Vorgehensweise.
- Gehen Sie zu Promo Kit > Label erstellen. Geben Sie dem Label einen Namen, den Sie in der Liste Labels verwalten wiedererkennen, z. B. "Prozent Rabatt".
- Geben Sie im Feld Badge Label einen Bindestrich ein. Erweitern Sie dann Variable: Produkt im Variablen-Panel unter dem Feld und klicken Sie auf {discount_percent}. Platzhalter sind Groß- und Kleinschreibung zu beachten, verwenden Sie also das Panel oder kopieren Sie den exakten Kleinbuchstaben-Code.
- Überprüfen Sie die Badge-Vorschau auf der rechten Seite. Wenn kein Produkt ausgewählt ist, wird -25 % angezeigt, basierend auf festen Beispielwerten (regulär 39,99 $, reduziert 29,99 $). Wählen Sie ein Produkt aus dem Dropdown-Menü über der Vorschau, und es wird stattdessen anhand der Live-Preise dieses Produkts aufgelöst.
- Öffnen Sie den Bedingungen-Tab und fügen Sie "Im Angebot" mit dem Operator "Ist" hinzu. Es wird kein Wert benötigt.
- Wählen Sie einen Badge-Stil und eine Position auf dem Style-Tab (mehr dazu weiter unten). Neue Labels beginnen als Inaktiv, schalten Sie also den Schalter oben auf dem Bildschirm auf Aktiv und klicken Sie dann auf Speichern.
Wählen Sie ein echtes Produkt in der Vorschau aus und bestätigen Sie dann denselben Wert im Frontend, nachdem Sie gespeichert haben.
Besuchen Sie eine Kategorie mit einigen einfachen reduzierten Artikeln. Jeder zeigt seinen eigenen Prozentsatz an, und Artikel zum vollen Preis zeigen nichts an, da {discount_percent} für sie leer ist. Streng genommen ist die Bedingung "Im Angebot" hier ein zusätzlicher Schutz, da die automatische Ausblendungsregel das Label bereits von Vollpreisprodukten fernhalten würde. Behalten Sie es trotzdem bei, damit die Label-Liste auf einen Blick klar lesbar ist.
Ein häufiger Fehler ist die Eingabe von {discount_percent}%, was im Frontend "25%% off" rendert und den Platzhalter fehlerhaft erscheinen lässt. Der Platzhalter enthält bereits das Prozentzeichen, schreiben Sie also -{discount_percent} oder {discount_percent} off. Ein Prozentsatz kann auch unerwartet groß erscheinen bei einem starken Festpreisrabatt: Ein Rabatt von 10 $ auf ein Produkt für 12 $ wird als "-83 %" gerendert. Verwenden Sie für diese Artikel den Betragsplatzhalter in Schritt 2.
Die vollständige Liste der integrierten Platzhalter, mit der genauen Groß-/Kleinschreibung, die jeder benötigt, und wann jeder zu leer wird, finden Sie in unserer Referenz zu dynamischen Inhaltsplatzhaltern.
Schritt 2: Zeigen Sie den gesparten Betrag oder nur Beträge über einem Schwellenwert an
Verwenden Sie {discount_amount}, wenn Sie den gesparten Betrag hervorheben möchten, und fügen Sie eine Bedingung für den Rabattprozentsatz hinzu, wenn Sie nur Abzeichen über einem bestimmten Rabatt-Schwellenwert wünschen.
Laut Baymard Institute (2022) fallen über 18 % der E-Commerce-Websites in mindestens eine von vier Fallen, wenn sie Preisnachlässe auf der Produktseite anzeigen. In ihren umfangreichen Tests funktioniert die Anzeige des absoluten und relativen Rabatts am besten. Sie verweisen auch auf die „Regel der 100“: ein Prozentsatz für Artikel unter 100 US-Dollar und ein Dollarbetrag darüber, sodass „100 US-Dollar Rabatt“ auf einen Artikel für 1.000 US-Dollar substanzieller wirken kann als „10 % Rabatt“. Eine zweite Beschriftung mit dem Text Sparen {discount_amount} wird in Ihrer Shop-Währung als „10,00 $ sparen“ gerendert, und sonst ändert sich nichts an der Einrichtung.
Für einen Schwellenwert öffnen Sie den Tab Bedingungen und fügen Sie Rabattprozentsatz mit dem Operator Größer als oder gleich hinzu. Geben Sie zum Beispiel 15 ein, wenn Sie das Abzeichen nur bei Produkten wünschen, die um mindestens 15 % reduziert sind. Wählen Sie einen Schwellenwert, der zu Ihrer Aktion passt. Zum Kontext: Adobes Analyse der Urlaubssaison 2025 berichtete über Spitzenrabatte von 30,9 % bei Elektronik und 29,6 % bei Spielzeug. Wenn Sie entscheiden, wie hoch der Rabatt sein soll, behandelt unser Datenbeitrag über den effektivsten Rabattprozentsatz dies separat.
Verwenden Sie für variable Produkte festen Text wie „Ausgewählte Optionen im Angebot“, behalten Sie die Bedingung Rabattprozentsatz bei und fügen Sie eine Bedingung für den Produkttyp hinzu. Legen Sie dann Variable Product Matching (Promo Kit > Einstellungen > Allgemein) auf „Keine Variation abgleichen“ fest, damit die Beschriftung angezeigt wird, wenn mindestens eine Variation den Schwellenwert erreicht.
Hier sehen Sie, wie das in der Praxis aussieht (Beispieldaten):
| Ziel | Platzhalter / Bedingung | Abzeichentext, den Sie eingeben | Was Käufer sehen |
|---|---|---|---|
| Prozentualer Rabatt auf einen einfachen Artikel im Angebot | Im Angebot, Ist + {discount_percent} | -{discount_percent} | -25% |
| Gesparter Betrag | {discount_amount} | Sparen {discount_amount} | 10,00 $ sparen |
| Nur große Preisnachlässe | Rabattprozentsatz >= 25 + {discount_percent} | Abverkauf -{discount_percent} | Abverkauf -40% |
| Gutscheinangebot im Raster | {ac_coupon-SUMMER20} | {ac_coupon-SUMMER20} Rabatt mit SUMMER20 | 20% Rabatt mit SUMMER20 |
| BOGO-Gutschein | {ac_coupon-BOGO2FOR1} | {ac_coupon-BOGO2FOR1} | Kaufe 1 Erhalte 1 Gratis |
Beispiel-Abzeichentext. Die aufgelöste Ausgabe wird aus den Live-Preisen jedes Produkts und den Einstellungen des Gutscheins generiert.
Schritt 3: Zeigen Sie Gutschein- und BOGO-Angebote als Abzeichen an
Ein Gutschein-Abzeichen verwendet den Platzhalter {ac_coupon-COUPONCODE}, der den Rabatt eines bestimmten Advanced Coupons-Gutscheins auf Ihren Produkt-Abzeichen rendert. Ein einfacher Sale-Preis-Snippet erzeugt dies nicht, da das Angebot im Gutschein und nicht im Produktpreis enthalten ist.
- Gehen Sie zu Promo Kit > Einstellungen, öffnen Sie die Registerkarte Integrationen und aktivieren Sie die Zeile Advanced Coupons für WooCommerce. Der Schalter ist ausgegraut, wenn Advanced Coupons nicht aktiv ist. Eine Unteroption Gutschein validieren erscheint; lassen Sie sie vorerst deaktiviert.
- Erstellen oder bearbeiten Sie ein Label. Scrollen Sie im Bereich Variablen zum Abschnitt Advanced Coupons für WooCommerce, geben Sie mindestens zwei Zeichen des Gutscheincodes ein, wählen Sie den Gutschein aus dem Dropdown-Menü aus und klicken Sie auf Variable einfügen. Der Platzhalter, z. B. {ac_coupon-SUMMER20}, wird zum Badge-Text hinzugefügt.
- Bauen Sie die Formulierung darum herum auf, z. B. {ac_coupon-SUMMER20} Rabatt mit SUMMER20. Die Vorschau löst sie sofort auf.
Was der Platzhalter ausgibt, hängt vom Gutscheintyp ab:
- Prozentualer Gutschein: 25%
- Fester Warenkorbrabatt: 10,00 $
- Fester Produkt-Rabatt: 5,00 $, und nur auf Produkte, für die der Gutschein gilt
- BOGO-Angebot: Kaufe 2, Erhalte 1 Gratis, oder Kaufe 2, Erhalte 1 zum halben Preis, und nur auf die „Kauf“-Produkte des Angebots. Das Angebot benötigt spezifische Produkte oder Produktkategorien als Auslöser; Angebote, die durch irgendein Produkt ausgelöst werden oder so eingestellt sind, dass sie dasselbe Produkt geben, rendern keinen Badge.
- Gutschrift-Cashback (Advanced Coupons Premium): 15% Cashback oder 10,00 $ Cashback
Feste Produkt- und BOGO-Badges erscheinen nur auf den Produkten, die das Angebot abdeckt; überall sonst ist der Platzhalter leer und das Label wird ausgeblendet, dieselbe Regel wie zuvor. Prozentuale Gutscheine, feste Warenkorbrabatte und Cashback-Gutscheine prüfen keine Produktbeschränkungen, daher wird ihr Badge auf jedem Produkt angezeigt, das das Label erreicht. Wenn einer dieser Gutscheine nur eine Kategorie abdeckt, fügen Sie eine passende Produktkategorie-Bedingung zum Label hinzu. Wenn Sie einen WooCommerce BOGO-Gutschein verwenden, der mit dem kostenlosen Advanced Coupons Plugin erstellt wurde, kann der Badge das Angebot überall dort ankündigen, wo ein unterstütztes „Kauf“-Produkt erscheint.
Die Option Gutschein validieren ist optional und standardmäßig deaktiviert. Aktivieren Sie sie, und Advanced Promo Kit prüft, ob der Gutschein gültig und nicht abgelaufen ist, bevor das Label angezeigt wird, und ein Gutschein, der die Prüfung nicht besteht, blendet das Label aus. Das passt für Codes mit Ablaufdaten. Lassen Sie es für ewige Codes deaktiviert, die Sie unabhängig davon bewerben möchten.
Wenn Ihre Aktion feste Daten hat, Sie aber möchten, dass der Badge erscheint, bevor der Gutschein gültig wird, verwenden Sie stattdessen die Registerkarte Zeitplan. Jedes Label nimmt ein optionales Startdatum und Enddatum entgegen, verglichen in der Zeitzone Ihrer Website, und blendet sich außerhalb dieses Fensters aus. Verwandte Integrationen fügen zwei weitere Platzhalter hinzu: {lp_points} zeigt die Treuepunkte an, die ein Produkt über Advanced Loyalty Program sammelt, während {agc_gift_card_value} den Wert eines Geschenkkartenprodukts über Advanced Gift Cards anzeigt. Die typenbezogene Referenz für Gutscheinausgaben finden Sie in unserem Leitfaden zum Anzeigen von Gutscheinrabattinformationen auf Produktlabels.
Styling, Stapeln und Testen Ihrer dynamischen Badges
Dynamische Werte können mehr Platz beanspruchen als der Platzhaltertext, den Sie im Editor sehen. Für Beschriftungen wie „10,00 € sparen“ ist ein praktischer Ausgangspunkt eine Breite von etwa 240 bis 280 Pixeln und eine Höhe von 36 bis 40 Pixeln. Sie können die Abmessungen im Tab „Stil“ feinabstimmen, sobald Sie den aufgelösten Text sehen.
Zwölf Abzeichenformen befinden sich auf dem Tab „Allgemein“ (Rechteck Horizontal, Rechteck Vertikal, Pill, Kreis, Quadrat, Band Links, Band Rechts, Tag, Sechseck, Stern, Banner und ein benutzerdefiniertes Bild) neben Textfarbe, Schriftgröße und -stärke. Der Tab „Stil“ fügt Abzeichenfarbe, Breite, Höhe, Radius, Innenabstand, Deckkraft und Drehung hinzu, alles mit einer Live-Vorschau. Farbverlaufshintergründe, Schatten, Animationen, eine klickbare URL und ein Hover-Tooltip sind ebenfalls vorhanden. Die Platzierung ist „Auf Bild“ oder „Außerhalb von Bild“, in jeder der vier Ecken mit Pixel-Offsets. Ideen für Formen und Farben finden Sie in unserer Zusammenfassung von Angebot-Abzeichen-Designs, die konvertieren, mit fünfzehn Beispielen.
Stapeln ist standardmäßig aktiviert. Maximale Beschriftungen pro Produkt ist standardmäßig auf drei und Beschriftungsabstand auf fünf Pixel eingestellt; beides kann unter Einstellungen > Allgemein angepasst werden. Die Priorität ist eine Drag-and-Drop-Reihenfolge unter Einstellungen > Prioritätsreihenfolge, wobei Beschriftungen, die weiter oben in der Liste stehen, zuerst angezeigt werden. Ziehen Sie also „Prozent Rabatt“ über „Coupon-Angebot“.
Bevor Sie es für erledigt erklären, überprüfen Sie fünf Produkte sowohl im Shop-Raster als auch auf der einzelnen Produktseite:
- Einfaches Produkt im Angebot: zeigt seinen eigenen Prozentsatz an
- Variables Produkt mit gemischten Rabatten: zeigt Ihre Festtext-Beschriftung an, wenn eine Variante qualifiziert ist
- Vollpreisprodukt: zeigt überhaupt nichts an
- Produkt, auf das Ihr Coupon nicht zutrifft: kein BOGO- oder Festprodukt-Abzeichen und kein Prozent-, Fest-Warenkorb- oder Cashback-Abzeichen, wenn Sie es mit einer Bedingung eingegrenzt haben
- Produkt, das für jedes Abzeichen qualifiziert ist: berücksichtigt Ihre Einstellung „Maximale Beschriftungen pro Produkt“ und die von Ihnen festgelegte Prioritätsreihenfolge
Häufig gestellte Fragen
Wie zeige ich den Rabattprozentsatz auf dem WooCommerce-Angebotsetikett an?
Das Standard-Angebotsetikett von WooCommerce zeigt den Rabattprozentsatz nicht an. Um eines hinzuzufügen, können Sie Code oder ein Etiketten-Plugin verwenden. Erstellen Sie für einfache Produkte im Advanced Promo Kit ein Etikett mit dem Text -{discount_percent} und fügen Sie eine Bedingung „Im Angebot“ mit dem Operator „Ist“ hinzu. Der Prozentsatz wird bei jedem Laden der Seite aus den Live-Preisen des Produkts neu berechnet.
Kann das Angebotsetikett den gesparten Betrag anstelle des Prozentsatzes anzeigen?
Ja. Verwenden Sie den Platzhalter {discount_amount}, der die Differenz zwischen dem regulären Preis und dem Angebotspreis in der Währung Ihres Shops formatiert ausgibt. „Sparen {discount_amount}“ wird also zu „Sparen 10,00 €“. Baymard verweist auf die „Rule of 100“: Wenn Sie nur ein Format anzeigen, können prozentuale Einsparungen unter 100 € überzeugender wirken, während Dollar-Einsparungen über 100 € überzeugender wirken können. Sie können ein Etikett von jedem mit einer Bedingung „Produktpreis“ ausführen, um sie aufzuteilen.
Kann ein WooCommerce-Etikett einen Gutschein oder ein BOGO-Angebot anzeigen?
Ja, über die Advanced Coupons-Integration im Advanced Promo Kit. Schalten Sie sie unter Promo Kit > Einstellungen > Integrationen ein und fügen Sie dann {ac_coupon-YOURCODE} in ein Etikett ein. Prozentuale Gutscheine, feste Warenkorb-Gutscheine, feste Produkt-Gutscheine, BOGO-Gutscheine und Store-Credit-Cashback-Gutscheine (Premium) geben jeweils ihre eigene Formulierung aus, z. B. „Kaufe 2, Erhalte 1 Gratis“. Feste Produkt- und BOGO-Etiketten erscheinen nur auf den Produkten, die das Angebot abdeckt; für prozentuale Gutscheine, feste Warenkorb-Gutscheine und Cashback-Gutscheine fügen Sie eine Bedingung hinzu, um festzulegen, wo das Etikett angezeigt wird.
Wird das Etikett aktualisiert, wenn ich den Preis ändere?
Ja. Bei einfachen Produkten werden Preisplatzhalter gegen den aktuellen regulären Preis und Angebotspreis des Produkts aufgelöst, wenn die Seite gerendert wird. Eine Preisänderung ändert also das Etikett, ohne dass das Etikett bearbeitet werden muss. Wenn Sie den Angebotspreis vollständig entfernen, wird {discount_percent} zu leer aufgelöst und das Etikett verschwindet von selbst von diesem Produkt.
Bereiten Sie Ihre Rabatt-Abzeichen vor
Das Ziel ist es, jedes Abzeichen mit der Aktion, die es beschreibt, in Einklang zu halten. Dynamische Platzhalter reduzieren den Text des Abzeichens, den Sie bei Preisänderungen manuell aktualisieren müssen.
Hier ist, was als Nächstes zu tun ist:
- Was das Standard-WooCommerce-Angebot-Abzeichen zeigen kann und was nicht: entscheiden Sie, ob die Standardbeschriftung „Angebot!“ den Käufern genügend Rabattdetails liefert.
- Die Snippet-Methode und ihre Grenzen: Wenn Sie bereits ein Snippet verwenden, überprüfen Sie es bei einem variablen Produkt, bevor Sie ihm vertrauen.
- Prozent-Abzeichen für Artikel im Angebot anzeigen: Erstellen Sie die Prozentbeschriftung und denken Sie daran, dass der Platzhalter sein eigenes %-Zeichen mitführt.
- Den gesparten Betrag anzeigen oder nur über einem Schwellenwert: Fügen Sie eine Betragsbeschriftung und einen Rabattprozentsatz >= Schwellenwert hinzu.
- Coupon- und BOGO-Angebote im Raster anzeigen: Schalten Sie die Integration ein und kennzeichnen Sie Ihren besten Coupon.
Wenn WooCommerce den Rabattprozentsatz ohne ein benutzerdefiniertes Snippet anzeigen soll, das beibehalten werden muss, richten Sie Advanced Promo Kit dynamische Sale-Badges ein und binden Sie Ihren Badge-Text an Ihre Produktdaten.
