Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Hinzufügen von Produktabzeichen in WooCommerce (schnell und einfach)

Haben Sie sich jemals gefragt, ob Sie das einfache Verkaufsschild von WooCommerce durch etwas Auffälligeres (und etwas weniger Langweiliges) ersetzen könnten?

Diese Frage wird uns häufig von unseren Besuchern gestellt, und wir freuen uns, Ihnen sagen zu können, dass die Antwort ja lautet. Das können Sie auf jeden Fall!

Individuelle Produktabzeichen sind eine fantastische Möglichkeit, besondere Artikel in Ihrem Online-Shop hervorzuheben. Sie sind hilfreich, wenn Sie Neuankömmlinge präsentieren, Artikel im Verkauf kennzeichnen oder auf zeitlich begrenzte Angebote aufmerksam machen möchten.

In diesem Beitrag zeigen wir Ihnen zwei einfache Möglichkeiten, Ihrem WooCommerce-Shop individuelle Produktabzeichen hinzuzufügen. Sie können entweder ein leistungsstarkes Plugin verwenden oder einen einfachen Code hinzufügen.

Aber keine Sorge. Wir werden Sie Schritt für Schritt durch jede Option führen!

How to Add Product Badges in WooCommerce

Wichtiger Hinweis: Um diesem Tutorial folgen zu können, benötigen Sie einen voll funktionsfähigen WooCommerce-Shop. Wenn Sie Ihren noch nicht eingerichtet haben (oder noch dabei sind), sehen Sie sich unseren ultimativen WooCommerce-Leitfaden für Anfänger an.

Was sind WooCommerce Produktabzeichen?

Haben Sie schon einmal die kleinen „Sale“- oder „Neu“-Etiketten bemerkt, die beim Online-Shopping auf den 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 wie Verkäufe, Neuzugänge oder zeitlich begrenzte Angebote lenken.

Wir haben gesehen, wie Shop-Betreiber Produkt-Badges auf wirklich kreative Weise einsetzen, um Sonderangebote zu präsentieren, Bestseller hervorzuheben oder Artikel zu kennzeichnen, die nur noch wenig auf Lager sind.

Wenn Sie bereits WooCommerce verwenden, haben Sie vielleicht schon bemerkt, dass es über eine grundlegende Funktion für Verkaufsabzeichen verfügt, die automatisch erscheint, wenn Sie den Preis eines Produkts senken.

WooCommerce's default Sale badge

Das WooCommerce-Verkaufsabzeichen ist zwar für einfache Zwecke geeignet, aber seien wir ehrlich – es ist ziemlich begrenzt im Begriff, was man damit machen kann.

Sie können nicht einfach das Aussehen der Abzeichen ändern, neue Abzeichentypen hinzufügen oder genau steuern, wo sie auf Ihren Produktbildern erscheinen.

Mit individuell angepassten Produktplaketten können Sie die Persönlichkeit Ihrer Marke besser zum Ausdruck bringen. Am wichtigsten ist jedoch, dass originelle Plaketten die Aufmerksamkeit auf besondere Produkte lenken können.

Auf diese Weise können Sie den Umsatz Ihres Online-Shops steigern. 💰

In dieser Anleitung zeigen wir Ihnen 2 bewährte Methoden zum Hinzufügen und individuellen Anpassen von Produktabzeichen in WooCommerce. Bei beiden Methoden haben Sie die vollständige Kontrolle über Aussehen und Funktion.

Über die unten stehenden Links können Sie zu Ihrer bevorzugten Methode wechseln:

Methode 1: Verwenden Sie YITH WooCommerce Badge Management (besser anpassbar)

Beginnen wir mit unserem Lieblingswerkzeug zum Hinzufügen individueller Produktabzeichen zu Ihrem WooCommerce-Shop.

Wir empfehlen die Verwendung von YITH WooCommerce Badge Management, weil es das Hinzufügen und individuelle Anpassen von Produktabzeichen in Ihrem Online-Shop sehr einfach macht.

Außerdem haben wir im Laufe der Jahre viele Plugins von YITH getestet, z. B. die für das Hinzufügen von Abonnements und Produktvideos, und sie haben bei unseren Benutzern immer hervorragend funktioniert.

Möchten Sie während der Feiertage ein besonderes Abzeichen zeigen? Oder vielleicht anzeigen, wie viel Geld Kunden sparen werden? Mit diesem Plugin ist all das möglich. Sie können sogar festlegen, dass Badges zu bestimmten Zeiten angezeigt und später wieder ausgeblendet werden.

Sie können entweder mit der kostenlosen oder der Premium-Version des Plugins beginnen. Die kostenlose Version ist perfekt, wenn Sie 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 bei beiden Versionen gleich. Denken Sie nur daran, dass einige coole Funktionen, wie z. B. Abzeichen, die automatisch Rabattbeträge anzeigen, nur in der Premium-Version enthalten sind.

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

Können Sie beginnen? Zunächst müssen Sie das Plugin auf der Website von YITH erwerben.

Melden Sie sich dann in Ihrem YITH Konto an, gehen Sie auf den Tab ‚Lizenzen & Downloads‘ und klicken Sie auf den Button ‚Plugin herunterladen‘, um die Datei herunterzuladen.

Downloading a YITH plugin

Ein Tipp: Schließen Sie diese Seite nach dem Herunterladen nicht, denn Sie benötigen den Lizenzschlüssel, der dort angezeigt wird.

Gehen Sie dann zu Ihrem WordPress-Dashboard und installieren Sie das Plugin. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress Plugins.

Wenn sie aktiviert ist, wird eine Ansicht angezeigt, in der Sie nach Ihrer E-Mail und Ihrem Lizenzschlüssel für YITH gefragt werden. Kopieren Sie diese einfach von der YITH-Website und klicken Sie auf „Lizenz aktivieren“.

Activating YITH license

Sobald Sie die Meldung sehen, dass Ihre Lizenz aktiviert ist, sind Sie startklar!

Klicken Sie nun auf „Zum Plugin-Dashboard“, und Sie können Ihr erstes individuelles Abzeichen erstellen.

Going to the YITH plugin dashboard

Schritt 1: Ausblenden der Standard WooCommerce Verkauf Abzeichen

Zunächst müssen wir das in WooCommerce integrierte Verkaufsabzeichen ausblenden, damit es nicht mit unseren individuellen Produktabzeichen kollidiert.

Das Verfahren 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, die besagt: „WooCommerce-Badge „Im Verkauf“ ausblenden“. Gehen Sie vor und schalten Sie das ein.

Wählen Sie dann unter „Ausblenden von „Im Verkauf“ auf:“ die Option „Alle Produkte“, um sicherzustellen, dass das Standard-Badge nirgendwo in Ihrem Shop angezeigt wird.

Hiding WooCommerce's sale badge with YITH

Wenn Sie sich in den Einstellungen befinden, werden Sie vielleicht einige andere nützliche Optionen entdecken. Sie können Ihre individuellen Abzeichen an bestimmten Stellen ausblenden, z. B. in der Seitenleiste oder auf einzelnen Produktseiten.

Das ist ideal, wenn Sie Ihr Geschäft sauber und übersichtlich halten wollen. Wenn Ihnen zum Beispiel Ihre mobile Website zu überfüllt erscheint, können Sie die Badges auch dort ausblenden.

Vergessen Sie nicht, auf den Button „Optionen speichern“ am unteren Ende der Seite zu klicken, wenn Sie fertig sind.

Saving settings to hide the WooCommerce sale badge in YITH

Schritt 2: Erstellen Sie Ihr individuelles Abzeichen

Jetzt kommt der spaßige Teil: Erstellen Sie Ihr erstes individuelles Produktabzeichen in WooCommerce!

Gehen Sie auf den Tab „Abzeichen“ und klicken Sie auf den Button „Abzeichen erstellen“, um loszulegen.

Creating a new product badge in YITH

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

Mit jedem Typ können Sie einzigartige Möglichkeiten zur Hervorhebung Ihrer Produkte erstellen. Wenn Sie beispielsweise Produkte als „Neu eingetroffen“ oder „Veganerfreundlich“ kennzeichnen möchten, eignen sich die ersten drei Optionen hervorragend.

Aber hier ein Tipp: Wenn Sie Rabattmarken erstellen, empfehlen wir Ihnen die erweiterte Option, die sich automatisch aktualisiert, wenn sich der Preis Ihres Produkts ändert.

Choosing a product badge type in YITH plugin

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

Wenn Sie sich für ein Bild-, CSS- oder erweitertes Badge entschieden haben, sehen Sie eine ganze Sammlung vorgefertigter Badge-Designs direkt im Plugin.

Sie können sich aussuchen, was Ihnen gefällt. Mit diesen gebrauchsfertigen Badges sparen Sie Zeit und können sie dennoch individuell an den Stil Ihrer WooCommerce Seiten anpassen.

Giving the product badge a name and choosing a badge image in YITH plugin

Dieses Plugin glänzt vor allem durch seine Optionen zur individuellen Anpassung. Je nachdem, welchen Badge-Typ Sie gewählt haben, können Sie alle möglichen Einstellungen vornehmen, damit Ihr Badge perfekt auf Ihren Produktbildern aussieht.

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

Sie möchten die Transparenz anpassen? Kein Problem!

Sie können die Plakette sogar drehen oder auf Ihren Produkten verschieben, bis sie genau an der richtigen Stelle sitzt.

Customizing the YITH product badge

In unserem Beispiel haben wir das Abzeichen besonders hervorgehoben, indem wir seine Farbe in Rot geändert und es in der oberen rechten Ecke des Produktbildes platziert haben.

Diese kleinen Änderungen können einen großen Unterschied machen, wenn es darum geht, wie effektiv Ihre Abzeichen die Aufmerksamkeit der Menschen auf sich ziehen.

Wenn Sie mit dem Aussehen zufrieden sind, klicken Sie auf „Abzeichen speichern“, um den Vorgang zu beenden.

Saving the changes made to the YITH product badge

Schritt 3: Erstellen Sie eine Regel zur Anzeige Ihres Abzeichens

Nachdem wir nun unser individuelles Abzeichen erstellt haben, müssen wir WooCommerce genau mitteilen, wo und wann es angezeigt werden soll.

Gehen Sie auf den Tab „Ausweisregeln“ und klicken Sie auf „Regel festlegen“.

Creating a new product badge rule in YITH

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

Das Plugin bietet Ihnen 4 Hauptmöglichkeiten, um zu steuern, wo Ihre Badges angezeigt werden: Produkt-Badge, Kategorie-Badge, Schlagwort-Badge und Versandklassen-Badge.

YITH's product badge rule types

Sie können die Regel „Produktabzeichen“ wählen, um Abzeichen zu bestimmten Artikeln hinzuzufügen, oder die Regel „Kategorieabzeichen“, um ganze Kategorien abzudecken.

Die Regel für Schlagwörter zeigt Schlagwörter für Produkte an, die dasselbe WooCommerce-Schlagwort haben, und die Regel für Versandklassen zeigt Schlagwörter für Versandoptionen an.

Jede Regel zielt auf unterschiedliche Produktaspekte ab, aber sie funktionieren alle auf ähnliche Weise. Sie müssen also nur auswählen, was für Ihre Bedürfnisse am besten geeignet ist.

Verwenden wir für dieses Beispiel die Regel für das Produktabzeichen, da dies die häufigste Wahl ist.

Geben Sie Ihrer Regel einen eindeutigen Namen, damit Sie sie später leicht wiederfinden können.

Suchen Sie dann nach der Einstellung „Abzeichen anzeigen in:“. Hier entscheiden Sie, welche Produkte Ihr Abzeichen erhalten. Sie können wählen, ob es auf allen Produkten, neu hinzugefügten Produkten, Artikeln im Verkauf, Hervorgehobenen beliebten Produkten oder sogar nur auf Produkten, die auf Lager sind, angezeigt werden soll.

Choosing what type of products the badge should appear in using YITH

Nehmen wir an, Sie erstellen eine Regel für Verkaufsartikel. Wenn Sie „Produkte im Verkauf“ auswählen, wird Ihr Abzeichen automatisch angezeigt, wenn Sie ein Produkt als im Verkauf stehend markieren. So einfach ist das!

Bei einigen Optionen können Sie jedoch weitere Einstellungen vornehmen. Wenn Sie z. B. „Nur neue Produkte“ wählen, können Sie festlegen, dass Abzeichen auf Artikeln erscheinen, die innerhalb der letzten Tage hinzugefügt wurden (z. B. 7, 14 oder 30 Tage).

Auf diese Weise lassen sich neue Produkte in Ihrem Shop automatisch hervorheben, ohne dass Sie jedem Produkt manuell ein Badge hinzufügen müssen.

Creating a badge rule for new products with YITH

Es kann vorkommen, dass Sie bestimmte Produkte von Badges ausnehmen möchten. In diesem Fall ist die Einstellung „Produkte ausschließen“ sehr nützlich.

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

Excluding products for the badge to appear in with YITH

Wählen Sie dann in der Dropdown-Liste „Zuzuweisendes Abzeichen“ das gewünschte Abzeichendesign aus.

Und jetzt wird es richtig flexibel. Sie können planen, wann Ihre Abzeichen erscheinen und festlegen, wer sie sehen darf.

Choosing a badge to use for the badge rule in YITH

Die Option „Zeitplanregel“ ist ideal für zeitlich begrenzte Angebote.

Wenn Sie es aktivieren, fordert das Plugin Sie auf, ein Start- und Enddatum für Ihre Ausweise festzulegen.

Creating a schedule for the product badge to appear with YITH

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

Wählen Sie dazu in der Einstellung „Ausweis anzeigen für“ die Option „Nur bestimmte Benutzer oder Rollen“. Geben Sie dann Ihre bevorzugten Benutzerrollen oder Benutzernamen darunter ein.

Wenn alles richtig aussieht, klicken Sie einfach auf „Regel speichern“, und schon sind Sie fertig!

Creating a user role rule for the product badge with YITH

Besuchen Sie das Frontend Ihres Shops, um Ihre neuen Produktabzeichen in Aktion zu sehen.

Wenn Sie den erweiterten Ausweistyp für Verkaufsartikel verwenden, werden Sie sehen, dass sowohl der prozentuale Rabatt als auch die tatsächliche Ersparnis angezeigt werden, damit Kunden die besten Angebote schnell erkennen können.

Example of YITH Badge Management's product badge

💡 Verwandte Beiträge veröffentlicht: Suchen Sie nach weiteren coolen Werkzeugen und Strategien, um Ihren WooCommerce-Shop zu verbessern? Sehen Sie sich unsere Liste der besten WooCommerce Plugins an.

Methode 2: Individuellen Code verwenden (kostenlos und einfach)

Wenn Sie die erweiterten Optionen der ersten Methode nicht benötigen oder wenn Sie eine völlig kostenlose Option suchen, haben wir eine einfache Code-Methode, die Sie nichts kostet.

Und wenn Sie sich mit Code nicht auskennen, keine Sorge! Wir werden das WPCode Plugin verwenden, um dies super einfach und sicher zu machen. Damit können Sie individuelle Codeschnipsel in WordPress hinzufügen, ohne ein Entwickler zu sein oder zu riskieren, dass Ihre Website kaputt geht.

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

Weitere Informationen finden Sie in unserer ausführlichen Rezension von WPCode.

Zunächst müssen Sie das WordPress Plugin in Ihrem Verwaltungsbereich installieren.

Gehen Sie dann zu Code-Snippets “ + Snippet hinzufügen. Bewegen Sie den Mauszeigerkontakt über den Abschnitt „Fügen Sie Ihren individuellen Code (neues Snippet) hinzu“ und klicken Sie dann auf den Button „+ Individuelles Snippet hinzufügen“.

Adding a new custom code snippet in WPCode

Wählen Sie dann bei der Frage nach dem Codetyp „PHP Snippet“.

Damit wird WordPress mitgeteilt, welche Art von Code wir verwenden.

Choosing PHP snippet in WPCode

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

Da dieser Code das Standard-WooCommerce-Verkaufsabzeichen entfernt und sowohl neue Produktabzeichen als auch dynamische Rabattabzeichen hinzufügt, könnten Sie ihn als „Individuelles WooCommerce-Abzeichen“ bezeichnen.

Fügen Sie anschließend den unten stehenden Codeausschnitt in die Box „Codevorschau“ ein.

Dieser Code macht etwas wirklich Cooles. Er berechnet automatisch die Prozentsätze der Rabatte und zeigt sie auf dem Verkaufs-Badge an. Außerdem fügt er den Produkten, die in den letzten 7 Tagen hinzugefügt wurden, ein „Neu“-Badge hinzu.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// 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 einstellen, wie lange ein Produkt als „neu“ gilt? Suchen Sie einfach nach der Zeile, in der $newness = 7 im Code steht. Sie können diese Zahl 7 in eine beliebige Anzahl von Tagen ändern, z. B. 14 für zwei Wochen oder 30 für einen Monat.

Zum Abschluss klicken Sie auf den Button „Inaktiv“, bis er sich in „Aktiv“ ändert, und klicken dann auf „Snippet speichern“.

WPCode custom snippet for displaying WooCommerce product badges

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

Um ein neues Snippet hinzuzufügen, befolgen Sie die gleichen Schritte wie zuvor, aber wählen Sie dieses Mal „CSS Snippet“, wenn Sie dazu aufgefordert werden.

Selecting CSS Snippet as the Code Type

Geben Sie Ihrem Snippet einen aussagekräftigen Namen, z. B. „Product Badge Styles“. So können Sie es leicht finden, wenn Sie später Änderungen vornehmen müssen.

Hier ist der CSS-Code, mit dem Ihre Abzeichen professionell aussehen werden. Fügen Sie ihn einfach in die Box „Codevorschau“ ein:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 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 individuell anpassen können.

Möchten Sie Ihre Abzeichen an einer anderen Stelle haben? Dazu können Sie die Werte für oben und rechts ändern. Ändern Sie zum Beispiel top: -10px in top: 10px wird das Abzeichen nach unten verschoben.

Gefallen dir die Farben nicht? Es ist ganz einfach, sie zu ändern. Suchen Sie einfach die Zeilen mit den Hintergrundfarben und ersetzen Sie die Farbcodes.

Wenn Sie z. B. ein blaues Verkaufsschild statt eines roten wünschen, ändern Sie #FF0000 in #0000FF. Sie können die Plaketten auch größer oder kleiner machen, indem Sie die Schriftgröße anpassen.

Möchten Sie mehr über die Anpassung dieser Stile erfahren? Dann lesen Sie unseren anfängerfreundlichen Leitfaden zu CSS in WordPress.

Wenn Sie fertig sind, klicken Sie einfach auf den Button „Inaktiv“, um ihn zu aktivieren, und klicken Sie dann auf „Snippet speichern“.

WPCode custom snippet for styling product badges

Das war’s!

Ihre Abzeichen sollten jetzt auf Ihren Produktbildern erscheinen. Hier ist ein Beispiel dafür, wie unsere mit unserem CSS-Code aussehen:

Example of WooCommerce product badges made with WPCode

Entdecken Sie mehr WooCommerce Tipps und Tricks

Jetzt, wo Sie wissen, wie Sie Produktabzeichen in WooCommerce anzeigen können, möchten Sie vielleicht weitere Möglichkeiten zur Verbesserung Ihres Online-Shops erkunden. Hier sind einige hilfreiche Anleitungen, die wir empfehlen:

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu erfahren, wie Sie Produktabzeichen in WooCommerce hinzufügen können. Vielleicht möchten Sie auch unsere Expertenauswahl der besten WooCommerce Plugins für Produktraster und unseren Leitfaden zur Beschleunigung der WooCommerce-Leistung lesen.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

Comments

  1. Congratulations, you have the opportunity to be the first commenter on this article.
    Have a question or suggestion? Please leave a comment to start the discussion.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.