Mit WooCommerce Shortcodes können Sie Informationen aus Ihrem Shop auf neue und aufregende Weise anzeigen. WooCommerce ist mit Shortcodes vorinstalliert, und Sie können Plugins installieren, um weitere hinzuzufügen. Egal, ob Sie Produkte in einer Tabelle auflisten, den Warenkorb an einer beliebigen Stelle auf Ihrer Website anzeigen oder etwas anderes – Sie sind an der richtigen Stelle!
Du bist wahrscheinlich schon einmal auf Shortcodes gestoßen, egal ob du neu in WordPress bist oder es schon seit einiger Zeit benutzt. Shortcodes sind, wie der Name schon sagt, kurze Codeteile, die eine Art Funktion erfüllen. Mit WooCommerce-Shortcodes können Sie beispielsweise WordPress-Seiten, Beiträgen, Seitenleisten und widgetisierten Bereichen auf Ihrer Website nette WooCommerce-bezogene Funktionen hinzufügen.
Wenn Sie nach einer Möglichkeit suchen, das Einkaufserlebnis zu vereinfachen, können Sie dies mit WooCommerce Shortcodes tun. Sie können Ihnen helfen, den Einkauf von Benutzerströmen zu verbessern und Ihren Online-Shop für Conversions zu optimieren.Zum Beispiel können Sie WooCommerce Shortcodes verwenden, um:
- Eine Liste Ihrer am besten bewerteten Produkte auf Ihrer Homepage anzuzeigen.
- Präsentieren Sie verwandte Produkte, wenn ein Kunde Interesse an einem Produkt bekundet.
- Markieren Sie ausgewählte Produkte in Gutenberg-Blöcken, Seitenleisten und anderen widgetisierten Bereichen.
Vor diesem Hintergrund erklären wir in diesem vollständigen Handbuch, wie Sie WooCommerce-Shortcodes verwenden können, um bessere Benutzererlebnisse zu erzielen und Ihr Endergebnis zu steigern. Auf dem Weg dorthin erklären wir auch, wann (und warum) Sie jeden Shortcode verwenden sollten. Wir werden uns die Shortcodes ansehen, die mit WooCommerce selbst geliefert werden, und Shortcodes, die Sie mit anderen Plugins hinzufügen können.
Verwendung von WooCommerce-Shortcodes
Shortcodes sehen und klingen ein wenig technisch, sind aber eigentlich für jedermann gedacht. Sie benötigen keine Programmierkenntnisse.
Fügen Sie den Shortcode einfach in einen beliebigen Texteditor in WordPress oder in einen „Shortcode“ -Block ein, wenn Sie Gutenberg oder einen Seitenersteller wie Elementor oder Visual Composer verwenden:
Sie können Shortcodes kombinieren und mehrere Shortcodes auf einer einzigen Seite anzeigen. Sie können beispielsweise den Shortcode für die Auftragsverfolgung mit dem Shortcode für das Benutzerkonto kombinieren. Sie müssen lediglich beide Shortcodes auf derselben Seite einfügen. Es würde ungefähr so aussehen:
WooCommerce product list Shortcodes
Es gibt auch Shortcodes, um Produkte auf verschiedene Arten in Ihrem Geschäft aufzulisten. Diese bieten zusätzliche Flexibilität, sodass Sie nicht mit den eingeschränkten Ansichten auf den Shop- und Kategorieseiten hängen bleiben. Stattdessen können Sie WooCommerce-Shortcodes verwenden, um ein oder mehrere Produkte buchstäblich überall auf Ihrer WordPress-Site aufzulisten – entweder in einer Raster- oder tabellenbasierten Listenansicht.
WooCommerce Produkte Shortcode
WooCommerce hat einen Shortcode, mit dem Sie bestimmte Produkte in einem Rasterlayout auflisten können:
. Sie können auch andere Parameter hinzufügen (z. B. orderby und columns ), um das Erscheinungsbild des Frontends anzupassen.
Sie können die Anzahl der Produkte auswählen, die pro Zeile aufgelistet werden sollen. Wenn Sie beispielsweise sechs Produkte in drei Spalten nach Datum in aufsteigender Reihenfolge anzeigen möchten, verwenden Sie den Shortcode: . Um Produkte in absteigender Reihenfolge anzuzeigen, ersetzen Sie einfach ASC durch DESC .
WooCommerce Quick View Shortcode
Der Shortcode funktioniert nahtlos mit dem WooCommerce Quick View Pro Plugin. Dadurch werden der Liste der Produkte Schnellansichtsschaltflächen hinzugefügt, damit Benutzer schnell einkaufen können, ohne die aktuelle Seite zu verlassen:
Sie müssen lediglich das WooCommerce Quick View Pro-Plugin auf Ihrer WordPress-Site installieren und dem Frontend automatisch Schnellansichtsschaltflächen hinzufügen. Auf diese Weise können Kunden Produktattribute und -variationen anzeigen und Produkte in den Warenkorb legen, ohne zur einzelnen Produktseite navigieren zu müssen.
Lesen Sie unsere vollständige Anleitung zum WooCommerce Quick View Pro Shortcode.
WooCommerce product table Shortcode
Während der integrierte WooCommerce products Shortcode ziemlich flexibel ist, können Sie ihn nur in einem Rasterlayout anzeigen. Dies ist nicht ideal für Geschäfte, die mehr Produkte pro Seite anzeigen möchten, z. B. wenn Sie ein schnelles einseitiges Bestellformular oder einen Großhandelsladen erstellen. In diesem Fall sind Sie möglicherweise besser mit einem Produkttabellen-Shortcode dran.
Während WooCommerce selbst keinen Product Table Shortcode hat, können Sie mit dem WooCommerce Product Table Plugin ganz einfach einen hinzufügen. Der grundlegende Shortcode ist und Sie können dies mit über 50 Shortcode-Optionen konfigurieren.
Zeigen Sie die vollständige Liste der Shortcode-Optionen an, die Sie mit der WooCommerce-Produkttabelle erhalten.
WooCommerce in den Warenkorb Shortcode
WooCommerce verfügt über einen integrierten Shortcode, mit dem Sie einen Add-to-Cart-Button für ein bestimmtes Produkt an einer beliebigen Stelle einfügen können. Fügen Sie einfach die ID und / oder SKU des Produkts hinzu, für das Sie die Schaltfläche In den Warenkorb legen anzeigen möchten:
Wenn Sie den Produktpreis angeben möchten, verwenden Sie:
Bei einfachen Produkten wird eine Schaltfläche zum Warenkorb hinzufügen angezeigt.
Für variable Produkte wird eine Schaltfläche „Optionen auswählen“ angezeigt:
Ich persönlich mag das nicht, weil Kunden die einzelne Produktseite besuchen müssen, um ihre Variationen auszuwählen. Es ist besser, WooCommerce Product Table zu verwenden, um ein oder mehrere variable Produkte in einer Tabelle mit Variations-Dropdowns aufzulisten:
Auf diese Weise können Kunden Optionen auswählen und von der Seite, auf der sie sich gerade befinden, in den Warenkorb legen.
Shortcode für Produktkategorie
Der Shortcode für Produktkategorie listet Produkte aus einer bestimmten Kategorie in einem Standardrasterlayout auf.
Dies ist der Shortcode dafür:
Wenn Ihnen das Rasterlayout nicht gefällt oder Sie mehr Kontrolle darüber haben möchten, welche Informationen zu jedem Produkt angezeigt werden sollen, können Sie die WooCommerce Produkttabelle Shortcode statt. Das WooCommerce Product Table Plugin enthält eine Kategorie-Shortcode-Option, mit der Sie nur Produkte aus bestimmten Kategorien auflisten können:
Im Gegensatz zum integrierten Shortcode, der mit WooCommerce geliefert wird, können Sie auswählen, welche Informationsspalten zu jedem Produkt angezeigt werden sollen, und Kunden können Variationen und Mengen direkt aus der Produkttabelle auswählen. Dies macht das Einkaufen viel schneller und steigert Ihre Conversion-Rate.
WooCommerce product categories Shortcode
Die Shortcodes für Produktkategorien listen Ihre Produktkategorien anstelle der darin enthaltenen Produkte auf. Beispielsweise:
listet alle 4 Ihrer WooCommerce-Kategorien auf, sortiert nach Namen.
Werfen wir einen Blick auf einige der Attribute und Shortcodes, die zu Produktkategorien gehören:
- limit steuert die Anzahl der angezeigten Kategorien.
- orderby steuert die Sortierreihenfolge; „name“ und „date“ sind gültige Optionen.
- order repräsentiert die Reihenfolge der Produktkategorien, d.h. „ASC“ oder „DESC“.
- Spalten zeigt die Anzahl der Spalten an, in denen die Kategorien angeordnet sind.
- hide_empty wird verwendet, um Produktkategorien ohne Produkte auszublenden.Mit
- parent können Sie nur Produktkategorien der obersten Ebene präsentieren.
- Ids stellen dar, dass Kategorie-IDs nur für die Ausgabe bestimmter Ergebnisse festgelegt werden können.
Aktuelle Produkte
Der WooCommerce-Shortcode für aktuelle Produkte zeigt die Produkte an, die Sie kürzlich zu Ihrem Online-Shop hinzugefügt haben.
Dies ist der Shortcode für aktuelle Produkte:
Wenn Sie jedoch das tatsächliche Datum anzeigen möchten, an dem das Produkt zu Ihrem Online-Shop hinzugefügt wurde, oder wenn Sie mehr Kontrolle wünschen, können Sie die WooCommerce Produkttabelle Plugin statt.
Ordnen Sie die Produkttabelle einfach nach Datum in absteigender Reihenfolge und steuern Sie anhand der Produktlimitnummer, wie viele Produkte enthalten sein sollen:
Wenn Sie eine Datumsspalte in die Tabelle aufnehmen, können Kunden leicht sehen, welche Produkte kürzlich zum Geschäft hinzugefügt wurden.
Vorgestellte Produkte
Mit dem Shortcode für vorgestellte Produkte für WooCommerce können Sie vorgestellte Produkte getrennt vom Rest Ihres Shops auflisten. Verwenden Sie es, um vorgestellte Produkte an einer beliebigen Stelle aufzulisten, z. B. in Blogposts oder anderen Seiten.
Empfohlene Produkte sind WooCommerce-Produkte, neben denen auf der Seite Alle Produkte ein blaues Sternsymbol angezeigt wird:
Dies ist der Shortcode für die Präsentation ausgewählter Produkte: . Die Ausgabe sollte ungefähr so aussehen:
Wenn Ihnen das Bildraster nicht gefällt, können Sie die vorgestellten Produkte stattdessen mit dem WooCommerce Product Table Plugin Shortcode auflisten:
Dies listet die vorgestellten Produkte in einem Tabellenlayout auf, wobei spalten mit Informationen, die Sie auf der Plugin-Einstellungsseite ausgewählt haben.
WooCommerce Sale products Shortcode
Mit dem Shortcode Sale products können Sie Produkte präsentieren, die derzeit zum Verkauf stehen. Sie können sie ganz einfach mit dem Shortcode anzeigen:
Bestseller-Shortcode
Verwenden Sie den folgenden WooCommerce-Shortcode, um Ihre meistverkauften Produkte aller Zeiten in einem Raster anzuzeigen:
Die Schaltflächen für die Schnellansicht werden im Frontend angezeigt, wenn Sie das WooCommerce Quick View Pro-Plugin auf Ihrer WordPress-Site installiert haben.
Wenn Sie ein Tabellenlayout bevorzugen, können Sie auch Bestseller oder beliebte Produkte mit dem WooCommerce Product Table Shortcode wie folgt auflisten:
Lesen Sie unser vollständiges Tutorial zum Auflisten beliebter Produkte mit WooCommerce Product Table.
Bestbewertete Produkte
Sie können den Shortcode für bestbewertete Produkte zusammen mit der integrierten Bewertungs- und Bewertungsfunktion von WooCommerce verwenden, um Ihre bestbewerteten Produkte zu präsentieren. Verwenden Sie den Shortcode:
Sie können die am besten bewerteten Produkte auch in einer Tabellenansicht mit dem WooCommerce Product Table Shortcode auflisten:
Verwandte Produkte Shortcode
Verwandte Produkte sind eine Liste von Produkten, die dem Produkt ähneln, das der Kunde durchsucht. Diese werden direkt unter dem Hauptprodukt auf der einzelnen Produktseite angezeigt, aber Sie können den WooCommerce-Shortcode für verwandte Produkte verwenden, um verwandte Produkte an anderer Stelle aufzulisten.
Verwenden Sie den Shortcode , um verwandte Produkte überall auf Ihrer WordPress-Site anzuzeigen.
In den Warenkorb Button Shortcode
Mit dem WooCommerce Shortcode können Sie den Preis anzeigen und die Schaltfläche In den Warenkorb legen für ein einzelnes Produkt basierend auf seiner ID. Hier ist, wie es auf dem Front-End aussieht:
Sie könnten erwägen, dies zu einem widgetized Bereich auf Ihrem Online-Shop oder einem Blog-Post hinzuzufügen.
Dieser Shortcode funktioniert mit dem WooCommerce Quick View Pro Plugin. Wenn Sie beide Plugins zusammen verwenden, werden Schnellansichtsschaltflächen neben den Schaltflächen zum Warenkorb hinzufügen angezeigt. Dies ist ideal, wenn Sie variable Produkte anzeigen oder wenn Sie möchten, dass Kunden die Menge ändern können, bevor Sie sie in den Warenkorb legen. Kunden können zusätzliche Informationen zum Produkt anzeigen, Mengen und Variationen auswählen und über eine Schnellansicht-Lightbox in den Warenkorb legen. Dadurch bleiben sie auf der Originalseite, anstatt sie auf eine separate Produktseite zu bringen.
Wenn Sie lieber Schaltflächen zum Hinzufügen zum Warenkorb für mehrere Produkte anzeigen möchten oder wenn Ihnen das Standardformat mit dem großen Bild nicht gefällt, können Sie stattdessen die WooCommerce-Produkttabelle verwenden.
Wählen Sie aus, welche Spalten Sie in die Produkttabelle aufnehmen möchten (stellen Sie sicher, dass Sie die Add-to-Cart-Spalte einfügen!) und verwenden Sie den Shortcode, um ihn an einer beliebigen Stelle einzufügen. Verwenden Sie die Include-Option, um auszuwählen, welche Produkte eingeschlossen werden sollen, zum Beispiel:
Kann ich Shortcodes innerhalb von Shortcodes anzeigen?
Manchmal möchten Sie vielleicht Shortcodes verschachteln – zum Beispiel, um den WordPress Audio Player Shortcode hinzuzufügen, so dass es einen eingebetteten Musik-Player zur Liste der Produkte hinzufügt.
Sie können die WooCommerce-Shortcodes normalerweise nicht verschachteln. Sie können dies jedoch erreichen, indem Sie den WooCommerce-Shortcode für die Produkttabelle verwenden, um Produkte aufzulisten, und den Feldern, die Sie in der Produkttabelle anzeigen, weitere Shortcodes hinzufügen.
Angenommen, Sie möchten 8 Produkte mit jeweils einem eingebetteten Audioplayer auflisten. Sie können den Audioplayer zu den Feldern Produktkurz- oder Langbeschreibung hinzufügen und diese als Spalten in der Tabelle anzeigen. Sie verwenden dann den WooCommerce Product Table Shortcode, um diese spezifischen Produkte aufzulisten, einschließlich der kurzen oder langen Beschreibungsspalte, die die Audioplayer enthält.
Damit Shortcodes von anderen Plugins in der Produkttabelle funktionieren, stellen Sie sicher, dass Sie die Option „Shortcodes“ auf der Einstellungsseite der WooCommerce-Produkttabelle aktivieren:
WooCommerce-Seiten-Shortcodes
Werfen wir zunächst einen Blick auf einige der häufigsten WooCommerce-Seiten-Shortcodes. Diese erstellen automatisch ganze Seiten, wie den Warenkorb oder die Kasse.
WooCommerce Warenkorb
Mit dem WooCommerce Warenkorb-Shortcode – – können Sie den Warenkorb des Kunden im Frontend Ihrer WordPress-Website anzeigen. Sie können es zu WordPress-Seiten oder -Beiträgen hinzufügen oder in widgetisierten Bereichen (z. B. der Seitenleiste) anzeigen.
Auf dem Front-End sieht es ungefähr so aus:
Wenn Sie WooCommerce auf Ihrer WordPress-Website installieren und aktivieren, werden automatisch einige Seiten für Sie erstellt – einschließlich der Warenkorbseite, die diesen Shortcode verwendet. Sie können den Shortcode verwenden, um den Warenkorb zu weiteren Teilen Ihrer Website hinzuzufügen.
WooCommerce Checkout page
Sie können den WooCommerce Checkout Shortcode – – verwenden, um eine vollständige Checkout-Seite auf Ihrer E-Commerce-Website zu generieren. Diese Seite wird auch automatisch für Sie erstellt, wenn Sie WooCommerce installieren. Sie können den Shortcode auch verwenden, um den Checkout an anderer Stelle einzufügen (z. B. unter einer Produkttabelle, um einen einseitigen Einkauf zu erstellen).
Der WooCommerce-Checkout-Shortcode enthält Rechnungsdetails, Bestelldetails und die Option, an eine andere Adresse zu versenden.
WooCommerce order tracking
Mit WooCommerce können Ladenbesitzer eine Bestellverfolgungsseite mit dem Shortcode erstellen. Obwohl diese Seite nicht standardmäßig mit WooCommerce geliefert wird, können Sie einfach eine neue Seite erstellen und den Shortcode in den Texteditor einfügen, um Ihre eigene zu erstellen. Im Frontend sollte es ungefähr so aussehen:
WooCommerce-Benutzerkontoseite
WooCommerce erstellt automatisch eine Seite Mein Konto, wenn Sie sie zum ersten Mal auf Ihrer Website installieren. Dies geschieht mit dem Shortcode . Sie können den Shortcode verwenden, um den Kontobereich an zusätzlichen Stellen auf Ihrer Website einzufügen.
Der Shortcode Mein Konto dient gleichzeitig als Anmelde- und Registrierungsformular für abgemeldete Benutzer. Daher können Sie dies auch als WooCommerce-Login-Shortcode verwenden.
Fügen Sie WooCommerce-Shortcodes einfacher mit einer Symbolleistenschaltfläche hinzu
Während Sie alle Arten von WooCommerce-Shortcode-Plugins im Web finden, empfehlen wir die Verwendung des kostenlosen WooCommerce-Shortcode-Plugins von WooThemes. Nach der Installation und Aktivierung fügt dieses Plugin dem WordPress-Texteditor eine TinyMCE-Dropdown-Schaltfläche hinzu, mit der Sie einfach auf alle integrierten WooCommerce-Shortcodes zugreifen können. Dies erspart Ihnen das Kopieren und Einfügen der Shortcodes.
Nachdem Sie das WooCommerce Shortcodes Plugin aktiviert haben, sehen Sie eine neue Shortcode-Schaltfläche in Ihrem WordPress-Texteditor. Sobald Sie auf diese Schaltfläche klicken, wird eine Dropdown-Liste mit allen Standard-WooCommerce-Shortcodes angezeigt:
Fehlerbehebung bei WooCommerce-Shortcodes
Manchmal fügen Sie den richtigen WooCommerce-Shortcode in den Texteditor ein, zeigen jedoch nicht die richtige Ausgabe an. Stellen Sie in diesem Fall sicher, dass Sie den Shortcode nicht versehentlich in <pre> -Tags eingebettet haben. Sie können diese Tags entfernen, indem Sie in den HTML-Texteditor gehen.
Beste WooCommerce-Shortcodes für die Produkttabelle
Bevor wir fertig sind, finden Sie hier eine kurze Aufschlüsselung der nützlichsten integrierten WooCommerce-Shortcodes, die Sie mit dem WooCommerce Product Table-Plugin und dem WooCommerce Quick View Pro-Plugins:
| Plugin Required | Shortcode name | WooCommerce shortcode | Description |
| None | Shopping Cart | Displays a shopping cart on the front-end of the website | |
| None | Checkout Page | Displays a complete checkout page. | |
| None | Order Tracking | Displays an order tracking form for your e-commerce website. | |
| Keine | Benutzerkontoseite | Zeigt eine ‚Mein Konto‘-Seite für Benutzer an | |
| WooCommerce-Produkttabelle | Schaltfläche Produktpreis / Warenkorb | Fügt der Produkttabelle eine Schaltfläche Produktpreis (oder in den Warenkorb) hinzu. | |
| WooCommerce Quick View Pro | Shortcode für mehrere Produkte | Zeigt mehrere (ausgewählte) Produkte auf einer Seite oder einem Beitrag mit Schnellansichtsschaltflächen an. | |
| WooCommerce Quick View Pro | Produktkategorie | Zeigt bestimmte Produktkategorien im Frontend der Website an. | |
| WooCommerce Quick View Pro | Produktkategorie nach Slug | Zeigt Produkte aus einer bestimmten Produktkategorie zusammen mit Schnellansichtsschaltflächen an. | |
| WooCommerce Quick View Pro | Aktuelle Produkte | Zeigt eine Liste der neuesten Produkte an, die Sie Ihrem Online-Shop hinzugefügt haben, zusammen mit Schnellansichtsschaltflächen. | |
| WooCommerce Quick View Pro | Vorgestellte Produkte | Zeigt eine Liste der vorgestellten Produkte mit Schaltflächen für die Schnellansicht an. | |
| WooCommerce Quick View Pro | Verkaufsprodukt | Zeigt eine Liste aller verkauften Produkte mit Schnellansichtsschaltflächen an. | |
| WooCommerce Quick View Pro | Meistverkauftes Produkt | Zeigt eine Liste Ihrer meistverkauften Produkte mit Schnellansichtsschaltflächen an. | |
| WooCommerce Quick View Pro | Am besten bewertetes Produkt | Zeigt eine Liste Ihrer am besten bewerteten Produkte mit Schnellansichtsschaltflächen an. | |
| WooCommerce Quick View Pro | Verwandtes Produkt | Zeigt eine Liste verwandter Produkte mit Schnellansichtsschaltflächen auf einzelnen Produktseiten an. | |
| WooCommerce Quick View Pro | Zeigt eine Schaltfläche „In den Warenkorb“ auf einem einzelnen Produkt mit der Produkt-ID an |
Laden Sie Ihren WooCommerce-Shop mit Shortcodes auf!WooCommerce Shortcodes sind winzige Code-Schnipsel, mit denen Sie Ihrem Online-Shop nette Funktionen hinzufügen können. Sie können sie zu Shop-Seiten, Posts oder Widgetized-Bereichen auf Ihrer Website (z. B. der Seitenleiste) hinzufügen. Einige WooCommerce-Shortcodes unterstützen auch Parameter, mit denen Sie die Ausgabe anpassen können.
Allerdings bieten nicht alle WooCommerce-Shortcodes eine gute Benutzererfahrung. Anstatt sie unverändert einzufügen, können Sie sie zusammen mit dem WooCommerce Product Table-Plugin oder dem WooCommerce Quick View Pro-Plugin verwenden.
Nur so können Kunden beispielsweise Mengen und Variationen außerhalb der Produktseite auswählen, zusätzliche Informationen zu jedem Produkt anzeigen und die Bildgröße steuern. Wenn Sie zusätzliche Flexibilität wünschen, können Sie WooCommerce Product Table installieren und mit den über 50 Shortcode-Optionen experimentieren. Dadurch erhalten Sie ein ordentlicheres und organisierteres Erscheinungsbild im Front-End und stellen gleichzeitig sicher, dass Ihre Website das Einkaufserlebnis des Kunden verbessert.
Mit WooCommerce-Shortcodes können Sie die Reise des Käufers verbessern, mehr Produkte auf einmal anzeigen und Kunden die schnelle Navigation durch den Checkout-Prozess erleichtern. Sie können auch andere WooCommerce Shortcode-Plugins (wie WooCommerce Coupon Shortcodes) ausprobieren, mit denen Sie erweiterte Funktionen wie das Hinzufügen von Gutscheincodes zu Ihrem Online-Shop nutzen können.