WooCommerce mit Shortcodes: Einfache Einbindung in WordPress

Wer online Produkte verkaufen möchte, benötigt einen Shop, entweder als separate Lösung oder an die bestehende Website angedockt. Das eCommerce-Tool WooCommerce gehört zu den beliebtesten Shoplösungen. Es ist als Plugin für einen Onlineshop im CMS WordPress programmiert worden und in der Basis-Version kostenfrei. Mit sogenannten Shortcodes lassen sich Bestandteile von WooCommerce bequem in andere Elemente einer Website einbinden. Wir zeigen Ihnen wichtige Shortcodes mit Tipps zur Verwendung für Ihr E-Commerce.

Ein Shortcode ist eine Kurzform von größeren Code-Abschnitten. Shortcodes werden als Funktionen programmiert und erhalten dabei einen einzigartigen Namen. Mit diesen „kurzen Codes“ können definierte Bestandteile oder Abläufe ohne große Programmierkenntnisse in Elemente der Website eingebunden werden. Der Aufbau von Shortcodes in WordPress ist im CMS verankert: Sie stehen in eckigen Klammern, so zum Beispiel, um mit dem WordPress-Plugin „Responsive Lightbox & Gallery“ eine Galerie an beliebiger Stelle in eine bestehende Seite oder in einen Post einzufügen:

Die Zeichenfolge „rl_gallery“ ist der eigentliche Shortcode, nämlich der Platzhalter für die Anweisung „Hole eine Galerie genau an diese Position der Seite bzw. des Beitrags“. Die „ID“ legt fest, welche Galerie aus den bestehenden eingefügt wird. Die Form [shortcode attribut="123" argument="abc" … ] wird für alle Shortcodes verwendet.

Eine weitere Form von Shortcodes besteht aus der Zeichenfolge

Im Shopsystem WooCommerce werden Shortcodes für die selektive Darstellung von Shop-Inhalten verwendet. Durch vielfältige Zusatzangaben zu den einzelnen Shortcodes lassen sich viele spezielle Darstellungen kreieren, die den Verkauf von Produkten aus dem Shop fördern können. Dazu gehören z. B. Bestandteile von Seiten mit Inhalten wie „Kunden, die X kauften, entschieden sich auch für Y und Z“, „Das meistverkaufte Gerät in dieser Klasse“ oder „Nur noch 3 Tage im Sale – schnell zugreifen“. Wie das im Einzelnen realisiert wird, zeigen wir nachfolgend anhand eines kleinen WooCommerce-Mustershops.

Im praktischen Umgang mit WooCommerce sind nach der Installation des Plugins schon Seiten mit Shortcodes angelegt, etwa „Mein Konto“, „Warenkorb“ oder „Kasse“. Öffnet man im Dashboard die Seite „Warenkorb“, zeigt der visuelle Editor den Shortcode direkt an. Ein Blick in den Text-Editor zeigt, dass dieser Code von unsichtbarem HTML-Code umschlossen ist, der darauf verweist, dass ein Shortcode eingebettet ist. Dadurch ist der Shortcode auch im visuellen Editor sichtbar:

Mit dieser Produkt-ID lässt sich bereits ein erster Shortcode mit Argumenten verwenden. Um ein Produkt anhand seiner individuellen ID in eine Seite oder in einen Beitrag einzufügen, benutzen wir:

Sollen mehrere Produkte dargestellt werden, sind die IDs getrennt durch Kommas aneinanderzureihen:

Das Argument „ids“ wird immer in der Mehrzahl geschrieben, egal, ob eine oder mehrere IDs benutzt werden. Die Platzierung einzelner Produkte wird auch eher die Ausnahme bleiben, denn meist sind mehrere Produkte sinnvoller.

Mit dem products-Shortcode sind weitere Argumente anwendbar:

Die einzelnen Argumente bewirken:

• limit: Begrenzung der Anzahl der gezeigten Produkte
• orderby: verschiedene Möglichkeiten zum Sortieren der Ausgabe, z. B. nach ID, Datum, Beliebtheit (wenn im Shop verwendet), Auftreten in Posts oder zufällig
• order: auf- oder absteigende Sortierung (ASC/DESC) des gewählten orderby-Arguments
• visibility: Legt fest, ob die Produkte im Shop und in Suchergebnissen zu sehen sind
• paginate: Ermöglicht die Paginierung bei umfangreichen Produktangeboten. Das Attribut zur Aktivierung lautet „true“. Der Wert „false“ ist voreingestellt.
• columns: Die Anzahl der Spalten auf der Produktseite des Shops. Ein wichtiges Attribut, um die Seiten übersichtlich zu halten.

Weitere Argumente wie „attribute“, „terms“, „category“ oder „tag“ helfen, die Produktanzeige mit speziellen Kriterien nach Inhalten tiefer zu selektieren. Ein wichtiges Argument ist die sogenannte SKU – Stock Keeping Unit –, ein Begriff aus dem Einzelhandel. Dabei handelt es sich um einen eindeutigen Code, der einem einzelnen Produkt zugeordnet ist. Das Argument „sku“ ist ebenfalls auf products-Shortcodes in WooCommerce anwendbar. Zugleich ist die SKU ein probates Mittel, alle Produkte systematisch zu verwalten.

Der Shortcode im Mustershop

Für diese Aufgabe verwenden Sie [product_category]. Damit wird eine Kategorie gesammelt angezeigt, die mit kommaseparierten Attributen wie „ids“ oder „category“ zu versehen ist.

Der Shortcode [product_categories], also in der Mehrzahl, listet alle verfügbaren Kategorien im Shop auf. Das kann beispielsweise als Übersicht unter einem einzelnen Produkt sinnvoll sein, um weitere Kaufanreize zu schaffen.

Was mit Produkten funktioniert, lässt sich genauso gut mit weiteren Inhalten im WooCommerce-Universum realisieren. Mit diesem Shortcode gelingt das Einbinden eines einzelnen Produkts als Seite:

Das kann z. B. dann vorteilhaft sein, wenn im Blog ein artverwandtes Produkt rezensiert wird und man gern ohne große Umwege ein dazu passendes Produkt zum Verkauf anbieten möchte.

Beschreibt man das Produkt auf eine andere Weise, lässt sich die Funktion „Hinzufügen zum Warenkorb“ (in der Abbildung rechts) auch mit diesem Shortcode in die gewünschte WordPress-Seite oder den Beitrag integrieren:

Somit ist dieser Abschnitt des Kaufvorgangs auch an beliebigen Stellen einer Website einsetzbar. Gleiches trifft auf die Kasse zu, die mit dem Shortcode [woocommerce_checkout] eingebunden wird.

Mit [woocommerce_order_tracking] kann ein im Shop eingeloggter Kunde den Status seiner Bestellung einsehen. Dazu muss er seine Bestelldetails eingeben. Dieser Shortcode hat keine Argumente.

Alle Bestellungen werden auf der Seite „mein Konto“ mit dem Shortcode [woocommerce_my_account] gelistet. Die Anzahl anzuzeigender Bestellungen kann limitiert werden. Der Wert „-1“ zeigt alle Bestellungen an.

Um eigene Shortcodes in WordPress zu benutzen, ist ein Eingriff in die Datei functions.php nötig. Dort legt man mit selbst programmierten, eigenen Funktionen die gewünschten Shortcodes fest.

Eine Möglichkeit könnte wie folgt aussehen. Dies wurde in einer bestehenden WordPress-Website ohne Fehlermeldung getestet:

In jeder Seite und jedem Beitrag, wo der so definierte Shortcode [myshortcode] eingesetzt wird, erscheint als Ausgabe „Hallo, hier programmiert der Inhaber selbst“ als <h1>-Überschrift.

Der Gefahr, Fehler in den Code einer WordPress-Website zu schreiben, kann man recht elegant mit Plugins entgehen, die Shortcodes produzieren. Diese erzeugen – geprüft von der WordPress-Community – völlig gefahrlos Shortcodes, die individuelle Aufgabe erfüllen können und sich in der Namensgebung auch an die eigenen Erfordernisse anpassen lassen. Drei davon stellen wir Ihnen hier kurz vor.

Dieses Plugin hilft Ihnen dabei, einen WooCommerce-Shop mit mehr als 60 Funktionen und Shortcodes individuell anzupassen. Damit können neben den Standards schöne Shop- und Danke-Seiten eingerichtet werden. Weitere Möglichkeiten bestehen in der Beschränkung von Inhalten, Anpassungen an die Datenschutz-Grundverordnung oder Sicherheitsfeatures. Auch ein Nachrichtenversand nach einer definierten Anzahl von Bestellungen ist möglich. Dieses Plugin funktioniert nicht allein; es ist an eine WooCommerce-Installation gebunden.

Das Woocommerce-Shortcode-Plugin Shortcode Ultimate ermöglicht mehr als 50 Shortcodes inklusive einer Live-Vorschau. Das Plugin ist fit für Gutenberg und zudem responsiv. Der Entwickler verspricht, dass es mit jedem Theme zusammenarbeitet. Es gibt auch eine kostenpflichtige Premium-Version (kein Abonnement).

Dieses Plugin gestattet die Ausgestaltung von Vorgängen, die in einer übersichtlichen Liste gespeichert werden – ähnlich wie die Beiträge oder Seiten in WordPress. Der Shortcode bekommt eine Bezeichnung (ähnlich der Überschrift in einem Beitrag) und steht dann in der Liste mit den einfügbaren Shortcodes zur Verfügung. Die eigentlichen Shortcodes beginnen immer wie folgt:

Inhalte können HTML, JavaScript oder auch CSS sein. Zusätzliche Parameter erweitern die Möglichkeiten dieses Woocommerce-Shortcode-Plugins. Bearbeitet werden kann als Code, als Text oder auch im visuellen Modus – ein Plugin mit vielen Möglichkeiten.