Master WooCommerce Produkt-Shortcode für dynamische Produktanzeigen

Die Welt des E-Commerce lebt von Flexibilität. Ein erfolgreicher Onlineshop muss sich jederzeit anpassen und bestimmte Produkte hervorheben können. Viele Shopbetreiber glauben, dafür bräuchten sie einen Entwickler, doch tatsächlich macht ein leistungsstarkes, integriertes Tool in WooCommerce dies kinderleicht: der WooCommerce-Produkt-Shortcode. Mit diesem einfachen, aber vielseitigen Tool können Sie Produkte anzeigen, individuelle Raster erstellen und dynamische Seiten gestalten – ganz ohne Programmierung.

Dieser umfassende Leitfaden zeigt Ihnen, wie Sie den [products] . Sie erfahren, wie Sie mithilfe seiner Attribute beeindruckende, individuelle Produktanzeigen für jede Seite, jeden Beitrag oder jeden Widget-Bereich erstellen. Egal, ob Sie als Einsteiger nur ein paar Produkte auf Ihrer Startseite einbinden möchten oder als fortgeschrittener Nutzer eine komplexe, filterbare Landingpage entwickeln wollen – dieser Artikel ist Ihre vollständige Informationsquelle.

Die Grundlagen: Ihre Liste der wichtigsten WooCommerce-Shortcodes

Bevor wir uns mit dem [products] , klären wir zunächst, was Shortcodes sind und welche Rolle sie in WordPress spielen. Ein Shortcode ist ein kleines Codefragment in eckigen Klammern, zum Beispiel [shortcode] . WordPress ersetzt diesen Platzhalter beim Seitenaufruf durch dynamische Inhalte oder Funktionen. Shortcodes lassen sich überall dort verwenden, wo Sie Text einfügen können, also im klassischen Editor, in Gutenberg-Blöcken und in Page-Buildern wie Elementor .

Unser Fokus liegt zwar auf dem [products] , WooCommerce bietet jedoch eine vollständige Liste von WooCommerce-Shortcodes für wichtige Shopseiten. Diese Shortcodes werden üblicherweise auf den Seiten platziert, die WooCommerce während der Einrichtung automatisch erstellt.

• [woocommerce_cart] – Zeigt den Inhalt der Warenkorbseite an.
• [woocommerce_checkout] – Zeigt das Checkout-Formular an.
• [woocommerce_my_account] – Zeigt das Dashboard des Kundenkontos an.
• [woocommerce_order_tracking] – Bietet ein Formular, mit dem Kunden ihre Bestellungen verfolgen können.

Der [products] ist der vielseitigste von allen. Er ermöglicht die Anzeige von Produkten auf Seiten und Beiträgen außerhalb der Shop-Hauptseite. Seine Grundstruktur ist einfach [products] . Dieser Shortcode allein zeigt eine Übersicht Ihrer neuesten Produkte an. Seine wahre Stärke liegt jedoch in seinen Attributen.

Mehr erfahren: So richten Sie einen WordPress-Warenkorb für reibungslose Online-Verkäufe ein

Die Anatomie des [products] Shortcodes

Die wahre Flexibilität des WooCommerce-Produkt-Shortcodes liegt in seinen Attributen. Attribute sind Parameter, die Sie in eckigen Klammern hinzufügen, um zu steuern, welche Produkte angezeigt werden und wie sie aussehen. Sie können sich Attribute wie Befehle vorstellen, die dem Shortcode spezifische Anweisungen geben.

Hier ein kurzer Überblick über die am häufigsten verwendeten Attribute. Dies ist Ihre wichtigste Liste der WooCommerce-Produkt-Shortcodes.

Attribut	Funktion	Mögliche Werte
Limit	Legt die Anzahl der anzuzeigenden Produkte fest.	Jede positive ganze Zahl (z.B 8, 12)
Spalten	Legt die Anzahl der Spalten im Raster fest.	1 Zu 6
sortieren nach	Legt fest, wie Produkte sortiert werden.	Datum , Titel , ID , Popularität , Bewertung , Zufall
Befehl	Legt die Sortierreihenfolge fest.	ASC (aufsteigend) oder DESC (absteigend)
IDs	Zeigt spezifische Produkte anhand ihrer ID an.	Durch Kommas getrennte Liste von Produkt-IDs (z. B "1,2,3")
skus	Zeigt spezifische Produkte anhand der Artikelnummer (SKU) an.	Durch Kommas getrennte Liste der Produkt-SKUs (z. B. "hoodie-01,tee-02" )
Kategorie	Filtert nach Produktkategorie-Slug oder ID.	Durch Kommas getrennte Liste von Kategorienamen (z. B. "Kleidung,Accessoires" )
im Angebot	Zeigt Produkte an, die aktuell im Angebot sind.	WAHR
Sichtweite	Filtert nach Produktsichtbarkeit.	sichtbar , Katalog , Suche , hervorgehoben
paginieren	Aktiviert die Paginierung einer Produktliste.	WAHR
Klasse	Fügt dem Raster eine benutzerdefinierte CSS-Klasse hinzu.	Beliebiger CSS-Klassenname (z. B. "my-custom-grid" )

Verwenden Sie immer gerade Anführungszeichen ( + ) um Ihre Attributwerte. Ein häufiger Fehler ist die Verwendung von geschweiften Anführungszeichen, wodurch der Shortcode nicht mehr funktioniert.

Lesen Sie auch: So beheben Sie das Problem, dass WooCommerce-Produkte nicht auf der Shopseite angezeigt werden: Schnelle Lösungen

Produktauswahl meistern: Praktische und fortgeschrittene Anwendungsfälle für Shortcodes

Sehen Sie sich nun Beispiele für WooCommerce-Produkt-Shortcodes aus der Praxis an und lernen Sie, wie Sie diese effektiv einsetzen. Mithilfe dieser Beispiele können Sie dynamische, individuelle Produktbereiche auf jeder Seite erstellen.

Anzeige der Top-Produkte

Der WooCommerce-Shortcode für hervorgehobene Produkte ist ideal, um Ihre Bestseller oder Aktionsartikel auf der Startseite zu präsentieren. Um ihn zu verwenden, müssen Sie die Produkte zunächst im WooCommerce-Dashboard als „hervorgehoben“ markieren. Gehen Sie zu „Produkte“, bewegen Sie den Mauszeiger über einen Artikel und klicken Sie auf das Sternsymbol. Der Stern färbt sich blau und zeigt damit an, dass das Produkt hervorgehoben ist.

Shortcode: [products visibility="featured"]

Dieser Shortcode zeigt alle Produkte an, die Sie als „Empfohlen“ markiert haben. Sie können ihn mit anderen Attributen kombinieren, um die Anzeige zu verfeinern.

Beispiel: 8 ausgewählte Produkte in einem 4-spaltigen Raster anzeigen, zufällig sortiert. [products visibility="featured" limit="8" columns="4" orderby="rand"]

Spezifische Produkte nach ID oder SKU

Manchmal müssen Sie ein oder zwei bestimmte Produkte anzeigen, beispielsweise in einem Blogbeitrag oder auf einer Landingpage . Hier kommt der WooCommerce-Produkt-ID-Shortcode ins Spiel. Sie können das „ids“ mit einer durch Kommas getrennten Liste von Produkt-IDs verwenden.

Shortcode: [products ids="12, 35, 78"]

Alternativ können Sie auch Produkt-SKUs verwenden, die leichter zu merken sind.

Shortcode: [products skus="shirt-01, pants-02"]

So finden Sie IDs und SKUs: Navigieren Sie in Ihrem WordPress-Dashboard zu WooCommerce → Produkte. Die Produkt-ID wird in einer kleinen Spalte neben dem Produktnamen angezeigt. Sie können auch mit der Maus über den Produkttitel fahren, um die ID in der URL zu sehen. Die SKU finden Sie auf der Bearbeitungsseite des Produkts im Abschnitt „Produktdaten“.

Filtern nach Kategorie

Der WooCommerce-Produktkategorie-Shortcode ist eines der leistungsstärksten Attribute. Er ermöglicht es Ihnen, Abschnitte zu erstellen, die einem bestimmten Produkttyp gewidmet sind, wie beispielsweise einen Abschnitt „Neue T-Shirts“ oder eine Seite „Accessoires“.

Shortcode: [products category="t-shirts"]

Um den Slug einer Kategorie zu finden, gehen Sie zu WooCommerce → Produkte → Kategorien . Der Slug ist ein URL-freundlicher Name für die Kategorie.

Beispiel: Zeigen Sie 9 Produkte aus den Kategorien „Hoodies“ und „T-Shirts“ in 3 Spalten an. [products category="hoodies, t-shirts" limit="9" columns="3"]

Anzeige von reduzierten und meistverkauften Produkten

Eine eigene Verkaufsseite zu erstellen, ist eine hervorragende Marketingstrategie. Das lässt sich ganz einfach mit einem Shortcode realisieren.

Shortcode für „Im Angebot“: [products on_sale="true"]

Ebenso können Sie Ihre erfolgreichsten Produkte präsentieren.

Shortcode für Bestseller: [products best_selling="true"]

Filter kombinieren für benutzerdefinierte Anzeigen

Die wahre Magie entfaltet sich, wenn man mehrere Attribute kombiniert. Dadurch lassen sich präzise und ansprechende Produktübersichten erstellen.

Beispiel: Zeigen Sie die 12 beliebtesten, reduzierten Produkte der Kategorie „Bekleidung“ in 4 Spalten an. [products category="clothing" on_sale="true" orderby="popularity" limit="12" columns="4"]

Diese detaillierte Steuerung ermöglicht es Ihnen, ein einzigartiges Einkaufserlebnis zu schaffen, das die Kunden bindet.

Erweiterte Anzeigeoptionen: Seitennummerierung, Sortierung und benutzerdefiniertes Design

Der WooCommerce-Produkt-Shortcode wählt Produkte aus und steuert deren Darstellung und Verhalten auf einer Seite.

Seitennummerierung für große Produktlisten

Für Seiten mit vielen Produkten ist eine Paginierung erforderlich, um lange Ladezeiten und eine schlechte Benutzererfahrung . Das „paginate“ eignet sich dafür perfekt.

Shortcode: [products paginate="true" per_page="12"]

Das Attribut „per_page“ „paginate“ fest, wie viele Artikel auf jeder Seite angezeigt werden. Dies ist ein wesentlicher Bestandteil des WooCommerce-Produkt-Shortcodes mit Paginierungsfunktion.

Sortieren und Ordnen

Sie können die Reihenfolge Ihrer Produkte mithilfe der Attribute orderby und order

• orderby="price" : Sortiert die Produkte nach ihrem Preis.
• orderby="rating" : Sortiert nach durchschnittlicher Kundenbewertung.
• orderby="popularity" : Sortiert nach der Anzahl der Käufe.
• orderby="rand" : Mischt die Produkte bei jedem Seitenaufruf zufällig.

Das order“ bestimmt die Sortierrichtung. „ order="ASC"“ steht für aufsteigend (z. B. vom niedrigsten zum höchsten Preis) und „order="DESC"“ für absteigend (z. B. vom höchsten zum niedrigsten Preis).

Beispiel: Zeige 10 Produkte, sortiert nach der höchsten Bewertung zuerst. [products limit="10" orderby="rating" order="DESC"]

Individuelles Styling mit Kursen

Für Designer und Entwickler ist das Klassenattribut ein leistungsstarkes Werkzeug zur Anpassung von WooCommerce-Produkt-Shortcodes. Es ermöglicht das Hinzufügen einer individuellen CSS-Klasse zum Wrapper des Produktrasters. Dadurch können Sie die Ausgabe Ihres Shortcodes benutzerdefiniertes Styling anwenden, ohne andere Produktraster auf Ihrer Website zu beeinträchtigen.

Shortcode: [products class="hero-products"]

Anschließend können Sie in Ihrem benutzerdefinierten CSS diese Klasse ansprechen: .hero-products .product { background-color: #f5f5f5; border: 1px solid #ccc; }

Kompatibilitätstipps

Der WooCommerce-Produkt-Shortcode funktioniert mit dem klassischen Editor, dem Gutenberg-Block-Editor (über einen speziellen „Shortcode“-Block) und den meisten gängigen Page-Buildern. Er ist responsiv und passt sich somit automatisch an verschiedene Bildschirmgrößen an. Testen Sie Ihre Shortcodes jedoch immer auf Desktop- und Mobilgeräten, um sicherzustellen, dass sie korrekt angezeigt werden.

Strategische Anwendungsfälle: Wo und warum Produkt-Shortcodes eingesetzt werden sollten

Die Syntax zu kennen ist das eine, sie strategisch einzusetzen das andere. Hier sind einige Ideen, wie Sie Ihren Shop mithilfe des WooCommerce-Produkt-Shortcodes optimieren können .

• Startseite: Erstellen Sie separate Bereiche für „Neuheiten“, „Bestseller“ und „Angebote“, um Besucher direkt zu Ihren wichtigsten Produkten zu führen.

• Blogbeiträge: Binden Sie ein einzelnes Produkt oder eine kleine Produktübersicht in einen Blogbeitrag ein. Wenn Sie beispielsweise einen Blogbeitrag über das Styling einer neuen Jacke schreiben, verwenden Sie einen Shortcode, um genau diese Jacke und weitere passende Produkte direkt unter dem Beitrag anzuzeigen.

• Kategorie-Landingpages: Erstellen Sie individuelle Landingpages für eine bestimmte Kategorie. Sie können einzigartige Texte hinzufügen und anschließend einen Shortcode verwenden, um nur die Produkte dieser Kategorie anzuzeigen.

• Marketing-Landingpages: Für eine neue Kampagne können Sie eine Landingpage erstellen, die Produkte mit einem bestimmten Tag oder aus einer neuen Kollektion präsentiert. Verwenden Sie dazu einen maßgeschneiderten WooCommerce-Produkt-Shortcode, um Conversions zu erzielen.

Weiterlesen: So fügen Sie eine Trinkgeldoption auf der WooCommerce-Checkout-Seite hinzu

Bewährte Verfahren zur Fehlerbehebung und Optimierung

Selbst bei einem einfachen Tool wie einem Shortcode können Probleme auftreten. Hier erfahren Sie, wie Sie häufige Probleme beheben und die optimale Funktion Ihrer Website sicherstellen.

• Prüfen Sie auf Tippfehler: Fehlende Klammern, Tippfehler in Attributnamen oder falsche Anführungszeichen können dazu führen, dass der Shortcode als reiner Text angezeigt wird. Überprüfen Sie Ihren Code daher sorgfältig.

• Produkt-IDs und Slugs finden: Stellen Sie sicher, dass Sie die korrekten Produkt-IDs, SKUs und Kategorie-Slugs verwenden. Am einfachsten überprüfen Sie diese im WordPress-Dashboard.

• Caching und Performance: Die Anzeige zu vieler Produkte mit einem einzigen Shortcode kann Ihre Website verlangsamen. Verwenden Sie die `limit` und `paginate` , um die Anzahl der Produkte zu begrenzen. Ein gutes Caching-Plugin beschleunigt die Ladezeiten Ihrer Seiten.

• Erweiterte Anforderungen: Benötigen Sie dynamische Filterung, AJAX-Paginierung oder andere komplexe Funktionen, ist möglicherweise ein spezielles Plugin erforderlich. Tools wie WooCommerce Product Table oder WooCommerce Product Filters können die Funktionalität des Shortcodes erheblich erweitern.

Fazit: Ihr Werkzeugkasten für dynamische WooCommerce-Produktanzeigen

Der WooCommerce-Produkt-Shortcode ist ein echter Gamechanger für Shopbetreiber. Er bietet eine einfache und dennoch leistungsstarke Möglichkeit, dynamische, ansprechende und hochgradig personalisierte Produktpräsentationen auf Ihrer Website zu erstellen. Indem Sie den [products] -Shortcode und seine Attribute beherrschen, können Sie Ihre statischen Seiten in überzeugende Merchandising-Tools verwandeln.

Beginnen Sie mit den Grundlagen, wie einem Bereich für Produktempfehlungen auf Ihrer Startseite, und experimentieren Sie anschließend mit fortgeschritteneren Kombinationen, um einzigartige Landingpages zu erstellen und Produkte strategisch in Ihre Blogbeiträge einzubetten. Mit diesem Shortcode erstellen Sie einen professionellen und benutzerfreundlichen Onlineshop – ganz ohne Programmierkenntnisse. Speichern Sie diese Anleitung und optimieren Sie Ihre Produktpräsentation noch heute!

Häufig gestellte Fragen zum WooCommerce-Produkt-Shortcode