Vollständiger Leitfaden für WooCommerce-Shortcodes

WooCommerce ist das führende E-Commerce-Plugin für WordPress und ermöglicht es Millionen von Unternehmen, ihre Websites in robuste Online-Shops zu verwandeln. Viele Menschen wissen jedoch nicht, dass es Shortcodes gibt.

In diesem Leitfaden erfährst du alles, was du über WooCommerce-Shortcodes wissen musst: von wichtigen Shortcodes für die Anzeige von Produkten und die Verwaltung von Warenkörben bis hin zu fortschrittlichen Anpassungen für ein maßgeschneidertes Nutzererlebnis.

Lass uns herausfinden, wie diese winzigen Codeschnipsel deine E-Commerce-Website maßgeblich beeinflussen können.

Was sind Shortcodes?

Shortcodes wurden in WordPress 2.5 im Jahr 2008 eingeführt. Es handelt sich dabei um kleine Codeschnipsel, die in eckige Klammern eingeschlossen sind, z. B. so: [shortcode]. Sie dienen als Platzhalter, die WordPress anweisen, eine bestimmte Funktion auszuführen oder bestimmte Inhalte dynamisch anzuzeigen.

Anstatt zum Beispiel ein komplexes Produktraster manuell zu kodieren, kannst du es mit einem Shortcode erstellen und sofort auf deiner Website anzeigen. Das spart Zeit und verringert die Fehleranfälligkeit, so dass du deine Website leichter pflegen und aktualisieren kannst.

Im Laufe der Jahre haben sich die Shortcodes weiterentwickelt und sind immer leistungsfähiger und vielseitiger geworden. WooCommerce macht sich diese Funktion zunutze und bietet eine Reihe von Shortcodes an, die speziell für E-Commerce-Funktionen zugeschnitten sind.

Erste Schritte mit WooCommerce-Shortcodes

Um WooCommerce-Shortcodes auf deiner WordPress-Seite zu verwenden, musst du sicherstellen, dass das WooCommerce-Plugin installiert und aktiviert ist.

Logge dich dazu in dein WordPress-Dashboard ein, navigiere zu Plugins > Neu hinzufügen und suche nach „WooCommerce“. Klicke anschließend auf Jetzt installieren und aktiviere das WooCommerce-Plugin.

Anschließend kannst du dem Einrichtungsassistenten von WooCommerce folgen, um grundlegende Einstellungen wie Ladendetails, Zahlungsarten und Versandoptionen zu konfigurieren.

Wenn du das WooCommerce-Plugin installierst, wird deine WordPress-Website automatisch mit den Seiten Warenkorb, Kasse und Mein Konto aktualisiert. Du kannst aber noch mehr mit deinen Produkten machen, und das werden wir mit Shortcodes erkunden.

Die grundlegende Syntax von Shortcodes

WooCommerce-Shortcodes enthalten oft zusätzliche Attribute, mit denen du ihre Ausgabe anpassen kannst. Hier ist die Grundstruktur:

[shortcode attribute1="value1" attribute2="value2"]

Der Shortcode [products limit="4" columns="2"] zeigt zum Beispiel vier Produkte in einem zweispaltigen Layout an.

So fügst du Shortcodes in Beiträge, Seiten und Widgets ein

Shortcodes können fast überall in WordPress hinzugefügt werden. Du kannst sie zu einem Beitrag oder einer Seite hinzufügen, indem du sie einfach in einen beliebigen Texteditor in WordPress oder in einen Shortcode-Block eintippst, wenn du Gutenberg oder einen anderen Page Builder verwendest.

Für diesen Leitfaden verwenden wir Gutenberg:

1. Navigiere im WordPress-Dashboard zu den Beiträgen oder Seiten.
2. Öffne den Beitrag/die Seite, zu dem/der du den Shortcode hinzufügen möchtest.
3. Klicke auf das + Symbol, um einen neuen Block hinzuzufügen.

   

4. Suche nach dem Shortcode-Block und wähle ihn aus.
5. Füge deinen Shortcode in den Block ein.

Nehmen wir an, du möchtest auf deiner Startseite eine Übersicht über deine neuesten Produkte anzeigen. Im Blockeditor gibst du den Shortcode [products limit="3" columns="3"] ein und aktualisierst oder veröffentlichst deine Seite.

Dadurch wird ein Raster mit drei Produkten in einer Spalte erstellt, das eine dynamische und attraktive Möglichkeit bietet, deine neuesten Angebote zu präsentieren.

Du kannst auch Shortcodes zu Widgets hinzufügen, indem du zu Erscheinungsbild > Widgets navigierst. Füge ein Text-Widget in den gewünschten Widget-Bereich ein (Seitenleiste, Fußzeile usw.). Gib deinen Shortcode in das Textfeld des Widgets ein und speichere das Widget.

Wichtige WooCommerce-Shortcodes

WooCommerce stellt eine Vielzahl von Shortcodes zur Verfügung, mit denen du Produkte anzeigen, den Warenkorb verwalten und den Bezahlvorgang verbessern kannst.

Im Folgenden stellen wir dir die wichtigsten WooCommerce-Shortcodes, ihre Eigenschaften und ausführliche Beispiele vor, damit du sie in deinem Shop effektiv einsetzen kannst.

Shortcodes für die Produktanzeige

Der Shortcode [products] ist einer der vielseitigsten WooCommerce-Shortcodes. Er ermöglicht es dir, eine Liste von Produkten nach verschiedenen Kriterien anzuzeigen.

Er hat so viele Attribute, dass du die Produkte so anzeigen kannst, wie du willst:

• limit – Anzahl der anzuzeigenden Produkte. Die Standardeinstellung ist -1 (alle anzeigen).
• columns – Anzahl der Spalten. Die Voreinstellung ist 4.
• orderby – Sortiere die Produkte nach bestimmten Kriterien wie date, title, price, popularity, etc.
• order – Reihenfolge der Produkte. Kann ASC (aufsteigend) oder DESC (absteigend) sein.
• category – Slug der Produktkategorie.
• tag – Slug des Produkt-Tags.
• paginate – Aktiviert die Paginierung. Kann true oder false sein. Der Standardwert ist false.

Wenn du zum Beispiel die letzten acht Produkte in einem vierspaltigen Layout anzeigen möchtest, sortiert nach dem Datum, an dem sie hinzugefügt wurden, in absteigender Reihenfolge. Du kannst den folgenden Shortcode verwenden.

[products limit="8" columns="4" orderby="date" order="DESC"]

Wenn du auch die Paginierung aktivieren möchtest, damit der Nutzer auf andere Produkte zugreifen kann, während das Limit angezeigt wird, kannst du das Attribut paginate verwenden.

[products limit="8" columns="4" orderby="date" order="DESC" paginate="true"]

Vielleicht möchtest du auch Produkte aus einer bestimmten Kategorie anzeigen. Mit dem Attribut category kannst du das tun. Der Shortcode unten zeigt sechs Produkte aus der Kategorie „Zubehör“ in einem dreispaltigen Layout an:

[products category="accessories" limit="6" columns="3"]

Es werden fünf Produkte angezeigt, weil es derzeit nur fünf in der Kategorie gibt. Sieben werden verfügbar sein, wenn zwei weitere Produkte zu dieser Kategorie hinzugefügt werden, aber aufgrund der Begrenzung werden nur sechs angezeigt.

Der Shortcode [product] kann auch verwendet werden, um ein einzelnes Produkt auf der Grundlage von ID oder SKU anzuzeigen, indem du entweder das Attribut id oder sku hinzufügst. Der folgende Shortcode zeigt zum Beispiel das Produkt mit der ID 22 an.

[product id="22"]

Dies kann in einem Blogpost oder an einem anderen Ort eingefügt werden.

Wenn du mehr als ein Produkt selektiv anzeigen möchtest, kannst du die Attribute ids und skus verwenden.

[products columns="3" ids="22,35,26"]

Dieser Shortcode zeigt Produkte mit den IDs 22, 35 und 26 an.

Ein weiterer Shortcode, den du vielleicht brauchst, ist der [product_page] Shortcode. Dieser Shortcode ist ähnlich wie [product], zeigt aber die gesamte Produktseite an, einschließlich der Tabs, verwandten Produkte und Bewertungen. Ein Beispiel: Wir zeigen die gesamte Produktseite für das Produkt mit der ID 22 an.

[product_page id="22"]

Dies kann für einen Produktabschnitt auf einer Seite oder in einem Beitrag nützlich sein.

Du hast auch Zugriff auf das Attribut cat_operator, mit dem du festlegen kannst, wie die Produkte nach Kategorien gefiltert werden. Verfügbare Optionen für dieses Attribut sind:

• AND – Produkte in den gewählten Kategorien anzeigen.
• IN – Produkte anzeigen, die zu einer der gewählten Kategorien gehören (Standardwert).
• NOT IN – Produkte anzeigen, die nicht zu den gewählten Kategorien gehören.

Wenn du zum Beispiel Produkte aus den Kategorien „Kleidung“ und „Accessoires“ anzeigen möchtest, kannst du den Operator AND verwenden:

[products category="clothing, accessories" cat_operator="AND"]

Mit dem Operator NOT In kannst du auch Produkte aus einer bestimmten Kategorie ausschließen. Wenn du beispielsweise alle Produkte außer denen in der Kategorie „Kleidung“ anzeigen möchtest.

[products category="clothing" cat_operator="NOT IN"]

Shortcodes für den Warenkorb und den Checkout

WooCommerce bietet spezielle Shortcodes für wichtige E-Commerce-Seiten wie den Warenkorb, die Kasse und das Benutzerkonto.

Mit dem Shortcode [woocommerce_cart] kannst du zum Beispiel die Einkaufswagenseite mit allen Artikeln, Mengen und dem Gesamtpreis anzeigen.

Dieser Shortcode sollte auf der Seite platziert werden, die du als Warenkorbseite bezeichnest.

Ebenso zeigt der Shortcode [woocommerce_checkout] die Kassenseite an, auf der Kunden ihre Rechnungs- und Versanddaten eingeben und ihre Bestellung aufgeben können.

Dieser Shortcode sollte auf der Seite platziert werden, die du als Kassenseite vorgesehen hast.

Der Shortcode [woocommerce_my_account] kann verwendet werden, um das Konto des Nutzers anzuzeigen, einschließlich der Bereiche für Bestellungen, Downloads, Adressen und Kontodetails.

Mit dem Shortcode [woocommerce_order_tracking] kannst du ein Formular anzeigen, in das Kunden ihre Bestell-ID und ihre E-Mail-Adresse eingeben können, um ihre Bestellungen zu verfolgen.

Dieser Shortcode kann auf jeder Seite platziert werden, auf der Kunden ihre Bestellungen nachverfolgen können sollen.

Produktkategorie-Shortcodes

Wenn du eine Liste oder ein Raster von Produktkategorien anzeigen möchtest, kannst du den Shortcode [product_categories] verwenden. Er hat die folgenden Attribute, mit denen du sein Aussehen anpassen kannst:

• number – Anzahl der anzuzeigenden Kategorien.
• columns – Anzahl der Spalten.
• orderby – Reihenfolge der Kategorien nach bestimmten Kriterien.
• order – Reihenfolge der Kategorien. Sie kann ASC oder DESC sein.
• hide_empty – Leere Kategorien ausblenden. Es kann 1 (wahr) oder 0 (falsch) sein.

Wenn du zum Beispiel Produktkategorien in einem Raster anzeigen möchtest, kannst du den folgenden Shortcode verwenden:

[product_categories number="12" columns="4" orderby="name" order="ASC"]

Dieser Shortcode zeigt 12 Produktkategorien in einem vierspaltigen Raster an, sortiert nach Namen in aufsteigender Reihenfolge.

Wenn du Miniaturansichten hinzufügst, werden sie hier angezeigt und verbessern das Aussehen deiner Seite. Du kannst Vorschaubilder hinzufügen, indem du auf Produkte > Kategorien > eine bestimmte Kategorie bearbeitest und dann zum Feld Vorschaubild scrollst, um das Bild hochzuladen.

Wenn du Produkte aus einer bestimmten Kategorie anzeigen möchtest, kannst du den Shortcode [product_category] verwenden. Dieser akzeptiert das Attribut per_page, das die Anzahl der Produkte angibt, die pro Seite angezeigt werden sollen. Außerdem akzeptiert er category, um den Slug der Produktkategorie und die Spalten für die Anzahl der Spalten anzugeben.

Dieser Shortcode zeigt zum Beispiel acht Produkte aus der Kategorie „Kleidung“ in einem vierspaltigen Layout an.

[product_category category="clothing" per_page="8" columns="4"]

Erweiterte WooCommerce-Shortcodes

Neben den grundlegenden Shortcodes für die Produktanzeige bietet WooCommerce auch erweiterte Shortcodes, die dir mehr Kontrolle und Anpassungsmöglichkeiten bieten. Mit diesen Shortcodes kannst du die Anzeige und die Funktionen deines WooCommerce-Shops an deine speziellen Bedürfnisse anpassen.

Anpassen der Produktanzeige

Der Shortcode [products] ist sehr flexibel und ermöglicht verschiedene Kombinationen von Attributen, um Produkte unterschiedlich zu filtern und anzuzeigen.

Hier sind ein paar weitere Attribute, die du verwenden kannst:

• on_sale – Ob Produkte im Verkauf angezeigt werden sollen. true oder false.
• best_selling – Ob die meistverkauften Produkte angezeigt werden sollen. true oder false.
• top_rated – Ob die am besten bewerteten Produkte angezeigt werden sollen. true oder false.

Damit kannst du im Sale befindliche Produkte anzeigen.

[products on_sale="true" limit="8" columns="4"]

Du kannst auch die meistverkauften Produkte in einer Kategorie anzeigen, indem du den Shortcode unten verwendest:

[products category="accessories" best_selling="true" limit="6" columns="3"]

Dieser Shortcode zeigt sechs meistverkaufte Produkte aus der Kategorie „Zubehör“ in einem dreispaltigen Layout an.

Shortcodes für spezielle Anwendungsfälle

WooCommerce-Shortcodes können auf bestimmte Anwendungsfälle zugeschnitten werden und bieten dynamische Inhalte, die auf verschiedenen Kriterien basieren. Der Shortcode [recent_products] kann zum Beispiel verwendet werden, um kürzlich hinzugefügte Produkte in deinem WooCommerce-Shop anzuzeigen.

[recent_products limit="5" columns="5"]

Dieser Shortcode zeigt die fünf zuletzt hinzugefügten Produkte in einem fünfspaltigen Layout an.

Mit dem Shortcode [featured_products] kannst du Produkte anzeigen lassen, die in deinem WooCommerce-Shop als „featured“ markiert sind.

[featured_products limit="6" columns="3"]

Dieser Shortcode zeigt sechs besonders hervorgehobene Produkte in einem dreispaltigen Layout an.

Du kannst ein Produkt als besonders hervorgehoben markieren, indem du zur Produktseite navigierst und es mit einem Sternchen versiehst, wie in der Abbildung unten gezeigt.

Angenommen, du hast eine Verkaufsaktion für bestimmte Produkte. Du kannst den Shortcode [sale_products] verwenden, um Produkte anzuzeigen, die gerade im Angebot sind.

[sale_products limit="8" columns="3"]

Um einen Verkaufspreis für deine Produkte festzulegen, gehe zu Produkte > Alle Produkte und klicke auf den Artikel, den du mit einem Rabatt anbieten möchtest. Scrolle dann nach unten zum Abschnitt Produktdaten.

Wenn du einen beliebigen Wert in das Feld WooCommerce Verkaufspreis ($) eingibst, ist das der Preis, den die Besucher auf der Startseite des Shops sehen. Dieses Feld hat Vorrang vor dem Wert für den regulären Preis ($). Wenn du keinen Verkauf veranstaltest, solltest du das Feld leer lassen, damit du nicht versehentlich Produkte rabattierst.

Wenn du ein Plugin hast, mit dem du die meistverkauften Produkte einrichten kannst, kannst du auch den Shortcode [best_selling_products] verwenden, um die meistverkauften Produkte in deinem WooCommerce-Shop anzuzeigen.

[best_selling_products limit="10" columns="4"]

Mit dem Shortcode [top_rated_products] kannst du auch die am besten bewerteten Produkte in deinem WooCommerce-Shop anzeigen lassen.

[top_rated_products limit="4" columns="2"]

Zusammenfassung

WooCommerce-Shortcodes sind leistungsstarke Tools, die die Funktionalität deines Onlineshops erweitern. Wenn du diese Shortcodes beherrschst, kannst du die Produktanzeige anpassen, den Warenkorb verwalten und den Bestellvorgang optimieren.

Du kannst mit verschiedenen Shortcode-Kombinationen experimentieren, um das perfekte Setup für deinen Shop zu finden. Mit diesen Tools kannst du eine dynamische und ansprechende WooCommerce-Website erstellen, die die Bedürfnisse deiner Kunden erfüllt.

Nachdem du den perfekten Onlineshop für dein Unternehmen eingerichtet hast, solltest du vermeiden, dass dein Shop angegriffen wird, langsam ist oder gelegentlich offline geht, was das Geschäft beeinträchtigt.

Das WooCommerce-Plugin kann WordPress-Websites manchmal ausbremsen, vor allem bei großen Shops mit vielen Produkten. Mit Kinsta als Hosting-Anbieter für deinen WooCommerce-Shop musst du dir darüber keine Sorgen machen.