Vertrauenswürdige WordPress-Tutorials, wenn Sie sie am dringendsten benötigen.
Anfängerleitfaden für WordPress
WPB Cup
25 Millionen+
Websites, die unsere Plugins verwenden
16+
Jahre WordPress-Erfahrung
3000+
WordPress-Tutorials von Experten

So fügen Sie Produkt-Badges in WooCommerce hinzu (schnell und einfach)

Jeder erfolgreiche Online-Shop hat eines gemeinsam: Er macht es den Kunden leicht, seine besten Produkte zu finden.

Aber hier ist die Herausforderung: Wenn alle Ihre Produkte gleich aussehen, woher wissen die Käufer, welche im Angebot sind, neu hinzugefügt wurden oder Ihre Top-Empfehlungen sind? Produkt-Badges sind die Antwort.

Diese kleinen visuellen Elemente kommunizieren sofort, was an jedem Produkt besonders ist. Ein einfaches „Neu“-Badge kann Neugier wecken, während ein „50 % Rabatt“-Label Dringlichkeit schafft.

Basierend auf unserer Erfahrung bei der Optimierung von WooCommerce-Websites für Shop-Betreiber sind Produkt-Badges eine jener kleinen Änderungen, die große Ergebnisse liefern.

Wir haben verschiedene Ansätze getestet und 2 Methoden gefunden, die sowohl für Anfänger als auch für erfahrene Benutzer perfekt funktionieren. Tauchen wir ein in die einfachsten Wege, um loszulegen.

So fügen Sie Produkt-Badges in WooCommerce hinzu

Wichtiger Hinweis: Um dieser Anleitung folgen zu können, benötigen Sie einen voll funktionsfähigen WooCommerce-Shop. Wenn Sie Ihren noch nicht eingerichtet haben (oder noch dabei sind), lesen Sie unsere ultimative WooCommerce-Anleitung für Anfänger.

Was sind WooCommerce-Produkt-Badges?

Haben Sie schon einmal diese kleinen 'Sale'- oder 'Neu'-Etiketten bemerkt, die beim Online-Shopping auf Produkten erscheinen?

Das sind Produktabzeichen, und sie sind unglaublich nützlich, um bestimmte Artikel in Ihrem Online-Shop hervorzuheben.

Betrachten Sie sie als virtuelle Aufkleber, die die Aufmerksamkeit Ihrer Kunden auf wichtige Produktdetails lenken, wie z. B. Angebote, Neuankömmlinge oder zeitlich begrenzte Angebote.

Wir haben gesehen, dass Ladenbesitzer Produkt-Badges auf wirklich kreative Weise nutzen, um Sonderangebote hervorzuheben, Bestseller zu kennzeichnen oder Artikel zu markieren, die fast ausverkauft sind.

Wenn Sie bereits WooCommerce verwenden, haben Sie vielleicht bemerkt, dass es eine grundlegende Sale-Badge-Funktion gibt, die automatisch erscheint, wenn Sie den Preis eines Produkts reduzieren.

WooCommerce's Standard-Sale-Abzeichen

Während der WooCommerce Sale-Badge für einfache Bedürfnisse gut funktioniert, sind wir ehrlich – er ist ziemlich begrenzt in Bezug auf das, was Sie damit tun können.

Sie können das Aussehen des Abzeichens nicht einfach ändern, keine neuen Abzeichentypen hinzufügen oder genau steuern, wo sie auf Ihren Produktbildern erscheinen.

Benutzerdefinierte Produktabzeichen ermöglichen es Ihnen, die Persönlichkeit Ihrer Marke stärker zu zeigen. Am wichtigsten ist jedoch, dass originelle Abzeichen auf Sonderangebote effektiver aufmerksam machen können.

Auf diese Weise können Sie mehr Verkäufe in Ihrem Online-Shop erzielen. 💰

In diesem Leitfaden führen wir Sie durch 2 bewährte Methoden, um Produkt-Badges in WooCommerce hinzuzufügen und anzupassen. Beide Ansätze geben Ihnen die vollständige Kontrolle darüber, wie sie aussehen und funktionieren.

Sie können die folgenden Schnelllinks verwenden, um zu Ihrer bevorzugten Methode zu springen:

Methode 1: YITH WooCommerce Badge Management verwenden (mehr Anpassungsmöglichkeiten)

Beginnen wir mit unserem Lieblingstool zum Hinzufügen benutzerdefinierter Produkt-Badges zu Ihrem WooCommerce-Shop.

Wir empfehlen die Verwendung von YITH WooCommerce Badge Management, da es das Hinzufügen und Anpassen von Produkt-Badges in Ihrem Online-Shop super einfach macht.

Außerdem haben wir im Laufe der Jahre viele YITH-Plugins getestet, wie z. B. die für das Hinzufügen von Abonnements und Produktvideos, und sie funktionieren immer hervorragend für unsere Benutzer.

Möchten Sie während der Feiertage ein besonderes Abzeichen anzeigen? Oder vielleicht anzeigen, wie viel Geld Kunden sparen werden? Dieses Plugin kann all das. Sie können sogar Abzeichen so einstellen, dass sie zu bestimmten Zeiten angezeigt und später ausgeblendet werden.

Sie können entweder mit der kostenlosen oder der Premium-Version des Plugins beginnen. Der kostenlose Plan ist perfekt, wenn Sie einfach nur einfache Text- oder Bild-Badges zu Ihren Produkten hinzufügen möchten.

In dieser Anleitung zeigen wir Ihnen, wie Sie die Premium-Version verwenden, aber die meisten Schritte funktionieren für beide gleich. Denken Sie nur daran, dass einige coole Funktionen, wie z. B. Abzeichen, die automatisch Rabattbeträge anzeigen, nur in der Premium-Version verfügbar sind.

Hinweis: Die Premium-Version kostet 79,99 $ pro Jahr, wenn Sie alle Funktionen wünschen. Das mag zwar viel erscheinen, aber wir denken, es lohnt sich, da Sie so viele Möglichkeiten haben, Ihre Produkt-Badges anzupassen und sie genau so aussehen zu lassen, wie Sie es möchten.

Bereit zum Start? Zuerst müssen Sie das Plugin von der YITH-Website erwerben.

Melden Sie sich dann in Ihrem YITH-Konto an, gehen Sie zum Tab „Licenses & Downloads“ und klicken Sie auf die Schaltfläche „Download Plugin“, um die Datei herunterzuladen.

Herunterladen eines YITH-Plugins

Hier ist ein Tipp: Schließen Sie diese Seite nach dem Download nicht, da Sie den dort angezeigten Lizenzschlüssel benötigen.

Als Nächstes rufen Sie Ihr WordPress-Dashboard auf und installieren das Plugin. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Installieren eines WordPress-Plugins.

Wenn es aktiv ist, sehen Sie einen Einrichtungsbildschirm, der nach Ihrer YITH-E-Mail-Adresse und Ihrem Lizenzschlüssel fragt. Kopieren Sie diese einfach von der YITH-Website und klicken Sie auf „Lizenz aktivieren“.

YITH-Lizenz aktivieren

Sobald Sie die Meldung sehen, dass Ihre Lizenz aktiv ist, sind Sie fertig!

Klicken Sie nun auf 'Zum Plugin-Dashboard gehen', und Sie können mit der Erstellung Ihres ersten benutzerdefinierten Abzeichens beginnen.

Zum YITH-Plugin-Dashboard gehen

Schritt 1: Verstecken Sie das Standard-WooCommerce-Angebotsetikett

Zuerst müssen wir den integrierten Sale-Badge von WooCommerce ausblenden, damit er nicht mit unseren benutzerdefinierten Produkt-Badges kollidiert. 

Der Vorgang ist wirklich einfach. Gehen Sie zu Ihrem WordPress-Dashboard und klicken Sie auf YITH » Badge Management. Navigieren Sie dann zum Tab „Allgemeine Einstellungen“.

Hier finden Sie eine Option mit der Bezeichnung „WooCommerce-Badge „Im Angebot“ ausblenden“. Aktivieren Sie diese.

Wählen Sie dann unter „„Im Angebot“ ausblenden bei:“ die Option „Alle Produkte“, um sicherzustellen, dass das Standard-Abzeichen nicht in Ihrem Shop angezeigt wird.

Verstecken des WooCommerce Sale-Badges mit YITH

Während Sie in den Einstellungen sind, bemerken Sie vielleicht einige andere hilfreiche Optionen. Sie können wählen, ob Sie Ihre benutzerdefinierten Badges an bestimmten Stellen ausblenden möchten, z. B. in der Seitenleiste oder auf einzelnen Produktseiten.

Das ist großartig, wenn Sie möchten, dass Ihr Geschäft sauber und organisiert bleibt. Wenn sich Ihre mobile Website beispielsweise zu überladen anfühlt, können Sie dort auch Badges ausblenden.

Vergessen Sie nicht, am Ende der Seite auf die Schaltfläche „Optionen speichern“ zu klicken, wenn Sie fertig sind.

Einstellungen speichern, um das WooCommerce-Verkaufsabzeichen in YITH auszublenden

Schritt 2: Erstellen Sie Ihr benutzerdefiniertes Abzeichen

Jetzt kommt der spaßige Teil: Erstellen Sie Ihr erstes benutzerdefiniertes Produkt-Badge in WooCommerce!

Gehen Sie zum Tab „Abzeichen“ und klicken Sie auf die Schaltfläche „Abzeichen erstellen“, um zu beginnen.

Erstellen eines neuen Produkt-Abzeichens in YITH

Das Plugin bietet 4 verschiedene Arten von Abzeichen zur Auswahl: Text-Abzeichen, Bild-Abzeichen, CSS-Abzeichen oder erweiterte Abzeichen für Verkaufsprodukte.

Jeder Typ ermöglicht es Ihnen, einzigartige Wege zu schaffen, um Ihre Produkte hervorzuheben. Wenn Sie beispielsweise Produkte als „Neuankömmling“ oder „Veganfreundlich“ kennzeichnen möchten, eignen sich die ersten drei Optionen hervorragend.

Aber hier ist ein Tipp: Wenn Sie Rabatt-Badges erstellen, empfehlen wir dringend die Verwendung der erweiterten Option, die sich automatisch an Preisänderungen Ihrer Produkte anpasst.

Auswahl eines Produkttyp-Badges im YITH-Plugin

Nachdem Sie Ihren Badge-Typ ausgewählt haben, geben Sie ihm einen Namen, der Ihnen hilft, sich daran zu erinnern, wofür er ist.

Wenn Sie ein Bild-, CSS- oder erweitertes Abzeichen gewählt haben, sehen Sie im Plugin eine ganze Sammlung von vorgefertigten Abzeichendesigns.

Sie können sich das aussuchen, das Ihnen am besten gefällt. Diese fertigen Abzeichen sparen Ihnen Zeit, und Sie können sie trotzdem an den Stil Ihrer WooCommerce-Seiten anpassen.

Benennung des Produkt-Badges und Auswahl eines Badge-Bildes im YITH-Plugin

Dieses Plugin glänzt wirklich durch seine Anpassungsoptionen. Je nachdem, welchen Badge-Typ Sie gewählt haben, können Sie alle möglichen Einstellungen anpassen, um Ihren Badge auf Ihren Produktbildern perfekt aussehen zu lassen.

Möchten Sie die Farbe ändern? Ganz einfach.

Müssen Sie die Transparenz anpassen? Kein Problem.

Sie können das Badge sogar drehen oder auf Ihren Produkten verschieben, bis es genau an der richtigen Stelle ist.

Anpassen des YITH-Produkt-Abzeichens

Für unser Beispiel haben wir das Badge richtig hervorstechen lassen, indem wir seine Farbe auf Rot geändert und es in der oberen rechten Ecke des Produktbildes platziert haben.

Diese kleinen Anpassungen können einen großen Unterschied darin machen, wie effektiv Ihre Abzeichen die Aufmerksamkeit der Leute auf sich ziehen.

Wenn Sie mit dem Aussehen zufrieden sind, klicken Sie einfach auf „Abzeichen speichern“, um den Vorgang abzuschließen.

Speichern der Änderungen am YITH-Produkt-Badge

Schritt 3: Erstellen Sie eine Regel, um Ihr Abzeichen anzuzeigen

Nachdem wir unser benutzerdefiniertes Abzeichen erstellt haben, teilen wir WooCommerce genau mit, wo und wann es angezeigt werden soll.

Gehen Sie zum Tab „Badge-Regeln“ und klicken Sie auf „Regel festlegen“.

Erstellen einer neuen Produkt-Badge-Regel in YITH

Betrachten Sie Regeln als Anweisungen, die Ihren Abzeichen sagen, wann sie auf Ihren Produktbildern erscheinen sollen.

Das Plugin bietet 4 Hauptmöglichkeiten, um zu steuern, wo Ihre Abzeichen angezeigt werden: Produkt-Abzeichen, Kategorie-Abzeichen, Tag-Abzeichen und Versandklassen-Abzeichen.

Produkttyp-Regeltypen von YITH

Sie können die Regel „Produkt-Badge“ wählen, um bestimmten Artikeln Badges hinzuzufügen, oder die Regel „Kategorie-Badge“, um ganze Produktkategorien abzudecken.

In der Zwischenzeit zeigt die Tag-Badge-Regel Abzeichen für Produkte an, die denselben WooCommerce-Tag teilen, und die Versandklassen-Badge-Regel zeigt Abzeichen basierend auf den Versandoptionen an.

Jede Regel zielt auf unterschiedliche Produktaspekte ab, aber sie funktionieren alle auf ähnliche Weise. Sie müssen also nur auswählen, was am besten zu Ihren Bedürfnissen passt.

Verwenden wir für dieses Beispiel die Regel für Produkt-Badges, da dies die gängigste Wahl ist.

Geben Sie Ihrer Regel als Nächstes einen einfachen Namen, damit Sie sie später leicht finden können.

Suchen Sie dann nach der Einstellung „Badge anzeigen in:“. Hier entscheiden Sie, welche Produkte Ihr Badge erhalten. Sie können wählen, ob es auf allen Produkten, den neuesten Ergänzungen, reduzierten Artikeln, empfohlenen beliebten Produkten oder sogar nur auf Produkten, die auf Lager sind, angezeigt werden soll.

Auswahl, für welche Produkttypen das Badge mit YITH angezeigt werden soll

Nehmen wir an, Sie erstellen eine Regel für Sale-Artikel. Wenn Sie 'Auf Sale befindliche Produkte' auswählen, erscheint Ihr Abzeichen automatisch, sobald Sie ein Produkt als im Sale befindlich markieren. So einfach ist das!

Aber einige Optionen bieten mehr Einstellungen, die Sie konfigurieren können. Wenn Sie beispielsweise „Nur aktuelle Produkte“ wählen, können Sie Abzeichen für Artikel festlegen, die in den letzten Tagen (z. B. 7, 14 oder 30 Tage) hinzugefügt wurden.

Dies macht es super einfach, neue Ankünfte in Ihrem Geschäft automatisch hervorzuheben, ohne jedem Produkt manuell Abzeichen hinzuzufügen.

Erstellung einer Abzeichenregel für neue Produkte mit YITH

Manchmal möchten Sie bestimmte Produkte ohne Auszeichnung belassen. Hier ist die Einstellung 'Produkte ausschließen' sehr nützlich.

Aktivieren Sie einfach diese Einstellung und geben Sie die Namen aller Produkte ein, für die Sie das Abzeichen nicht anzeigen möchten. Diese Artikel bleiben abzeichenfrei, auch wenn sie mit Ihren anderen Regeln übereinstimmen.

Produkte ausschließen, damit das Abzeichen in YITH angezeigt wird

Wählen Sie als Nächstes im Dropdown-Menü „Abzeichen zuweisen“ das gewünschte Abzeichendesign aus.

Hier wird es nun wirklich flexibel. Sie können festlegen, wann Ihre Abzeichen angezeigt werden und wer sie sehen darf.

Auswahl eines Abzeichens für die Abzeichenregel in YITH

Die Option 'Regel planen' ist perfekt für zeitlich begrenzte Angebote.

Wenn Sie ihn aktivieren, fragt Sie das Plugin nach Start- und Enddaten für Ihre Badges.

Erstellen einer Zeitplanung für das Erscheinen des Produkt-Badges mit YITH

Und wenn Sie bestimmten Kunden spezielle Badges anzeigen möchten, z. B. ein „VIP-Rabatt“-Badge nur für die loyalsten Kunden, können Sie das auch tun.

Wählen Sie dazu einfach 'Nur bestimmte Benutzer oder Benutzerrollen' in der Einstellung 'Abzeichen anzeigen für' aus. Geben Sie dann Ihre bevorzugten Benutzerrollen oder einzelnen Benutzernamen darunter ein.

Wenn alles richtig aussieht, klicken Sie einfach auf „Save Rule“ und Sie sind fertig!

Erstellen einer Benutzerrollenregel für den Produkt-Badge mit YITH

Besuchen Sie gerne das Frontend Ihres Shops, um Ihre neuen Produkt-Badges in Aktion zu sehen.

Wenn Sie den erweiterten Abzeichentyp für Verkaufsartikel verwenden, wird sowohl der Rabattprozentsatz als auch der tatsächlich gesparte Geldbetrag angezeigt, wodurch Kunden schnell die besten Angebote erkennen können.

Beispiel für das Produkt-Abzeichen von YITH Badge Management

💡 Verwandter Beitrag: Suchen Sie nach weiteren coolen Tools und Strategien, um Ihren WooCommerce-Shop zu verbessern? Schauen Sie sich unsere Liste der besten WooCommerce-Plugins an.

Methode 2: Benutzerdefinierten Code verwenden (kostenlos und einfach)

Wenn Sie die erweiterten Optionen der ersten Methode nicht benötigen oder nach einer komplett kostenlosen Option suchen, haben wir eine einfache Code-Methode, die Sie nichts kostet.

Und wenn Sie sich mit Code nicht wohlfühlen, keine Sorge! Wir verwenden das WPCode Plugin, um dies super einfach und sicher zu machen. Es ermöglicht Ihnen, benutzerdefinierte Code-Snippets in WordPress hinzuzufügen, ohne ein Entwickler zu sein oder Ihre Website zu riskieren.

Wir verwenden die kostenlose Version von WPCode für dieses Tutorial, da sie perfekt für unsere Bedürfnisse geeignet ist. Allerdings gibt es eine Premium-Version mit coolen Funktionen wie KI-Code-Generierung und Testmodus.

Weitere Informationen finden Sie in unserem ausführlichen WPCode-Testbericht.

Zuerst müssen Sie das WordPress-Plugin in Ihrem Admin-Bereich installieren.

Gehen Sie dann zu Code-Snippets » + Snippet hinzufügen. Fahren Sie mit der Maus über den Abschnitt „Ihren benutzerdefinierten Code hinzufügen (Neues Snippet)“ und klicken Sie dann auf die Schaltfläche „+ Benutzerdefiniertes Snippet hinzufügen“.

Hinzufügen eines neuen benutzerdefinierten Code-Snippets in WPCode

Wählen Sie als Nächstes 'PHP-Snippet', wenn Sie nach dem Code-Typ gefragt werden.

Dies teilt WordPress mit, welche Art von Code wir verwenden.

PHP-Snippet in WPCode auswählen

Jetzt müssen Sie Ihrem Snippet einen Namen geben, der Ihnen hilft, sich daran zu erinnern, was es tut.

Da dieser Code den Standard-WooCommerce-Sale-Badge entfernt und sowohl neue Produkt-Badges als auch dynamische Rabatt-Badges hinzufügt, könnten Sie ihn etwas wie „Benutzerdefinierte WooCommerce-Badges“ nennen.

Sobald das erledigt ist, fügen Sie den unten stehenden Code-Schnipsel in das Feld „Code-Vorschau“ ein.

Dieser Code tut etwas wirklich Cooles. Er berechnet automatisch Rabattprozentsätze und zeigt sie auf dem Sale-Badge an. Außerdem fügt er einen „Neu“-Badge zu Produkten hinzu, die in den letzten 7 Tagen hinzugefügt wurden.

// Remove default WooCommerce sale flash badge
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 );
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 );
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );

// Add custom badges to products
add_action( 'woocommerce_before_shop_loop_item_title', 'add_custom_product_badges', 10 );
function add_custom_product_badges() {
    global $product;

    // Initialize a variable to track whether a badge has been displayed
    $badge_displayed = false;

    // For products with any amount of discount percentage (1% or more)
    if ( $product->is_on_sale() ) {
        // Get regular and sale prices
        $regular_price = floatval( $product->get_regular_price() );
        $sale_price    = floatval( $product->get_sale_price() );

        // Handle variable products
        if ( $product->is_type('variable') ) {
            // Get variation prices
            $regular_price = floatval( $product->get_variation_regular_price( 'max', true ) );
            $sale_price    = floatval( $product->get_variation_sale_price( 'min', true ) );
        }

        // Calculate discount percentage if regular price is valid
        if ( $regular_price > 0 ) {
            $discount_percentage = ( ( $regular_price - $sale_price ) / $regular_price ) * 100;

            // Display badge if discount is 1% or more
            if ( $discount_percentage >= 1 ) {
                echo '<span class="product-badge sale-product">' . round( $discount_percentage ) . '% off!</span>';
                $badge_displayed = true; // Badge has been displayed
            }
        }
    }

    // Only show the "New" badge if no other badge has been displayed
    if ( ! $badge_displayed ) {
        // For "New" products added in the last 7 days
        $post_date  = get_the_time( 'Y-m-d', $product->get_id() );
        $post_stamp = strtotime( $post_date );
        $newness    = 7; // Number of days the product is considered new

        // Check if the product is new
        if ( ( time() - ( 60 * 60 * 24 * $newness ) ) < $post_stamp ) {
            echo '<span class="product-badge new-product">New</span>';
            $badge_displayed = true;
        }
    }
}

Möchten Sie anpassen, wie lange ein Produkt als „neu“ gilt? Suchen Sie einfach nach der Zeile, in der $newness = 7 im Code steht. Sie können die Zahl 7 in die gewünschte Anzahl von Tagen ändern, z. B. 14 für zwei Wochen oder 30 für einen Monat.

Um den Vorgang abzuschließen, klicken Sie auf die Schaltfläche „Inactive“, bis sie sich in „Active“ ändert, und klicken Sie dann auf „Save Snippet“.

WPCode benutzerdefiniertes Snippet zur Anzeige von WooCommerce-Produktabzeichen

Als Nächstes müssen wir unsere Badges gestalten, damit sie auf Ihren Produkten gut aussehen. Fügen wir etwas CSS hinzu, um ihr Aussehen anzupassen.

Um einen neuen Ausschnitt hinzuzufügen, folgen Sie den gleichen Schritten wie zuvor, aber wählen Sie diesmal 'CSS-Ausschnitt', wenn Sie dazu aufgefordert werden.

CSS-Snippet als Code-Typ auswählen

Benennen Sie Ihren Snippet aussagekräftig, z. B. „Produkt-Badge-Stile“. Dies hilft Ihnen, ihn später leicht zu finden, falls Sie Änderungen vornehmen müssen.

Hier ist der CSS-Code, der Ihre Badges professionell aussehen lässt. Fügen Sie ihn einfach in das Feld „Code Preview“ ein:

/* Common styles for all product badges */
.product-badge {
    position: absolute;
    top: -10px;      /* Position at the top edge */
    right: -10px;    /* Position at the right edge */
    padding: 12px 16px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    z-index: 99;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Styles for the "New" badge */
.new-product {
    background-color: #4CAF50; /* Green background */
}

/* Styles for the "Sale" badge */
.sale-product {
    background-color: #FF0000; /* Red background */
}

Lassen Sie uns aufschlüsseln, was Sie in diesem Code anpassen können.

Möchten Sie Ihre Badges an einer anderen Stelle haben? Dazu können Sie die Werte für top und right ändern. Wenn Sie beispielsweise top: -10px in top: 10px ändern, wird der Badge nach unten verschoben.

Mögen Sie die Farben nicht? Es ist super einfach, sie zu ändern. Suchen Sie einfach die Zeilen mit background-color und ersetzen Sie die Farbcodes.

Wenn Sie beispielsweise ein blaues Sale-Abzeichen anstelle eines roten wünschen, ändern Sie #FF0000 in #0000FF. Sie können die Abzeichen auch größer oder kleiner machen, indem Sie den Wert font-size anpassen.

Möchten Sie mehr über das Anpassen dieser Stile erfahren? Lesen Sie unseren anfängerfreundlichen Leitfaden zu CSS in WordPress.

Wenn Sie fertig sind, klicken Sie einfach auf die Schaltfläche 'Inaktiv', um sie auf 'Aktiv' zu setzen, und klicken Sie dann auf 'Snippet speichern'.

WPCode benutzerdefinierter Snippet zum Stylen von Produktabzeichen

Das war's!

Ihre Abzeichen sollten nun auf Ihren Produktbildern erscheinen. Hier ist ein Beispiel dafür, wie unseres mit unserem CSS-Code aussieht:

Beispiel für WooCommerce Produkt-Badges, erstellt mit WPCode

Entdecken Sie weitere WooCommerce-Tipps und -Tricks

Jetzt, da Sie wissen, wie Sie Produkt-Badges in WooCommerce anzeigen, möchten Sie vielleicht andere Möglichkeiten erkunden, Ihren Online-Shop zu verbessern. Hier sind einige hilfreiche Anleitungen, die wir empfehlen:

Häufig gestellte Fragen: Produktabzeichen in WooCommerce

Hier sind einige häufig gestellte Fragen unserer Leser zum Hinzufügen von Produkt-Badges in WooCommerce:

Kann ich benutzerdefinierte Badges wie „Hot“, „New“ oder „Limited Stock“ erstellen?

Ja, die meisten Produkt-Badge-Plugins ermöglichen es Ihnen, benutzerdefinierte Abzeichen mit eigenem Text, Farben und Symbolen zu gestalten. Das bedeutet, dass Sie nicht auf generische Bezeichnungen wie „Angebot“ oder „Neu“ beschränkt sind.

Sie können zum Beispiel Abzeichen erstellen wie:

  • Aktuell im Trend!
  • Nur noch 2 verfügbar!
  • Mitarbeiterauswahl
  • 100% Bio

Einige Tools ermöglichen es Ihnen sogar, eigene Badge-Bilder hochzuladen oder dynamische Labels basierend auf Lager- oder Preisdaten zu verwenden.

Funktionieren Produktabzeichen auf Mobilgeräten?

Ja, die meisten Abzeichen-Plugins sind responsiv, was bedeutet, dass Ihre Abzeichen auf allen Bildschirmgrößen, einschließlich Smartphones und Tablets, korrekt angezeigt werden.

Die Platzierung und das Design des Badges können jedoch von Ihrem Theme abhängen.

Es ist eine gute Idee, Ihren Shop auf Mobilgeräten zu testen, nachdem Sie Badges hinzugefügt haben, um sicherzustellen, dass sie keine wichtigen Inhalte überlappen oder Produktbilder schwer sichtbar machen.

Kann ich mehrere Abzeichen auf demselben Produkt anzeigen?

Das hängt vom Plugin oder der verwendeten Methode ab. Zum Beispiel unterstützt das YITH WooCommerce Badge Management Plugin mehrere Abzeichen pro Produkt, während andere möglicherweise nur eines gleichzeitig zulassen.

Wenn Sie mehrere Labels wie „Sale“ und „Bestseller“ zusammen anzeigen möchten, suchen Sie nach einem Plugin, das Abzeichen-Layering oder -Stapelung bietet. Überprüfen Sie immer die Plugin-Einstellungen oder die Dokumentation, um sicherzustellen, dass diese Funktion unterstützt wird.

Verlangsamen Produktabzeichen meinen WooCommerce-Shop?

Normalerweise nicht – besonders wenn Sie ein gut codiertes Plugin verwenden. Vermeiden Sie jedoch die Verwendung großer Bilddateien für Abzeichen und überladen Sie Ihre Produktseiten nicht mit mehreren Abzeichen oder Animationen.

Damit Ihr Shop schnell bleibt:

  • Wählen Sie leichte, optimierte Plugins
  • Verwenden Sie nach Möglichkeit textbasierte Abzeichen
  • Beschränken Sie die Verwendung von Abzeichen auf hervorgehobene Produkte oder Kategorien

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Produkt-Badges in WooCommerce hinzufügen. Möglicherweise möchten Sie auch unsere Expertenauswahl der besten WooCommerce-Produktgitter-Plugins und unseren Leitfaden zum Thema wie Sie die Leistung von WooCommerce beschleunigen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, wenn Sie auf einige unserer Links klicken, können wir eine Provision verdienen. Sehen Sie wie WPBeginner finanziert wird, warum das wichtig ist und wie Sie uns unterstützen können. Hier ist unser Redaktionsprozess.

Das ultimative WordPress-Toolkit

Erhalten Sie KOSTENLOSEN Zugang zu unserem Toolkit – eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Leserinteraktionen

Kommentare

  1. Herzlichen Glückwunsch, Sie haben die Gelegenheit, der erste Kommentator dieses Artikels zu sein.
    Haben Sie eine Frage oder einen Vorschlag? Hinterlassen Sie bitte einen Kommentar, um die Diskussion zu beginnen.

Hinterlasse eine Antwort

Vielen Dank, dass Sie einen Kommentar hinterlassen. Bitte beachten Sie, dass alle Kommentare gemäß unserer Kommentarrichtlinie moderiert werden und Ihre E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwenden Sie KEINE Schlüsselwörter im Namensfeld. Führen wir ein persönliches und bedeutungsvolles Gespräch.