WooCommerce Shortcodes erklärt – mehr Individualität für deinen WordPress-Shop

wooshortcodes

Mit WordPress, WooCommerce und einem professionellen Shopping-Theme lässt sich relativ schnell ein schicker Onlineshop einrichten. Dieser bietet schon von Haus aus einige Konfigurationsmöglichkeiten. Wem das nicht genügt, dem stehen mit entsprechenden Programmierkenntnissen fast alle Möglichkeiten offen. Doch auch für Anwender gibt es einen weiteren Weg, um den Shop individueller zu gestalten: die sogenannten WooCommerce Shortcodes.

Wir zeigen dir in diesem Beitrag, was WooCommerce Shortcodes sind und wie du diese verwendest (mit und ohne extra Plugin). Zudem liefern wir dir am Ende des Beitrags zwei mögliche Anwendungsbeispiele. Und übrigens: wenn du im Besitz von zumindest grundlegenden PHP-Kenntnissen bist, kannst du dir auch eigene Shortcodes für deinen WooCommerce-Shop kreieren.

Hinweis: Eine komplette Liste der WooCommerce Shortcodes haben wir in diesem Beitrag veröffentlicht. Darin findest du eine detaillierte Erklärung der einzelnen Shortcodes.

Inhalt

Was sind Shortcodes?

Shortcodes sind erst einmal nichts Spezifisches von WooCommerce, es handelt sich vielmehr um ein grundlegendes WordPress Feature, das uns schon seit WordPress 2.5 das Leben leichter macht. Shortcodes sind eine Art Makro, womit innerhalb von Seiten und Beiträgen eine Funktion ausgeführt werden kann.

WordPress bietet von Haus aus ein paar (wenige) Shortcodes und auch Plugins und Themes kommen meist mit einem Shortcode-Set daher. Somit stehen beim Editieren von Inhalten viel mehr Möglichkeiten zur Verfügung, als der WordPress Editor hergibt. Und das auch ohne Programmierkenntnisse.

Wie Shortcodes zu verwenden sind und wie man mit ein bisschen PHP-Kenntnissen eigene erstellen kann, ist im WordPress Codex beschrieben, siehe hierzu die Beiträge Shortcode und Shortcode API im Codex. Zwar ebenfalls auf Englisch aber sehr verständlich führt der Artikel WordPress Shortcodes: A complete Guide auf smashingmagazine.com in das Thema ein.

Wir schauen uns das Thema kurz anhand der Standard-WordPress-Shortcodes gallery für die Bildergallerien und caption für die Bildunterschriften an.

Einfache Shortcodes

Shortcodes werden generell in eckigen Klammern notiert. Die einfachste Form eines Shortcodes ist der Name des Shortcodes in Klammern, beispielsweise:

Dieser Shortcode zeigt alle zu einer Seite oder einem Artikel über die Mediathek zugeordneten Bilder als Gallerie an.

Shortcodes mit Parameter

Shortcodes können auch Parameter besitzen. Im Falle des gallery-Shortcodes gibt es beispielsweise die Möglichkeit, die Bilder nach bestimmten Kriterien zu sortieren. Hierfür werden die Parameter order und orderby verwendet.

Die Bilder werden hiermit nach Datum des Hochladens sortiert und zwar von neu nach alt.

Shortcodes mit Inhalt

Gemeint sind hier Shortcodes mit einem öffnenden und einem schließenden Tag wie bei html-Elementen. Also beispielsweise:

Der caption Shortcode ist solch ein Shortcode mit Inhalt, der von WordPress beim Einfügen von Bildern über die Mediathek in einen Beitrag oder in eine Seite verwendet wird. Hierbei sind – vereinfacht gesagt – das Bild und die Bildunterschrift der Inhalt, der zwischen dem öffnenden und dem schließenden Tag angegeben wird.

Eigene Shortcodes erstellen

Was wäre WordPress ohne die Vielzahl an Möglichkeiten, das System zu erweitern? Dank der Shortcode API kannst du mit ein paar PHP- und HTML-Kenntnissen beliebige Shortcodes erstellen und diese dann in Seiten und Beiträgen verwenden – so oft du willst.

Hierzu sind lediglich zwei Dinge notwendig:

  • eine sogenannte Callback-Funktion, die den auszuführenden Code bereitstellt, und
  • der Aufruf der Funktion add_shortcode, die aus der Callback-Funktion einen Shortcode generiert. add_shortcode bekommt dabei zwei Parameter mitgeliefert: den Namen des Shortcodes und den Namen der Callback-Funktion.

Der Code gehört dann in die functions.php deines Themes beziehungsweise Child Themes.

Ein einfacher Shortcode, der beispielsweise eine kleine Anzeige im Blogbeitrag ausgibt, könnte so realisiert werden:

Die CSS-Stile dazu können im Child-Theme, oder mittels Plugin zugesteuert werden:

Wenn der Anzeigentext länger ausfallen kann, macht es vielleicht Sinn, die Shortcode-Variante mit umschließenden Tags anzuwenden. Dabei können auch gleich die Parameter für die Überschriften wegfallen; die Überschriften kommen einfach mit in den umschlossenen Text.

Shortcode mit den Inhalt umschließenden Tags

Der gleiche Shortcode, aber diesmal für einen längeren Anzeigentext, der von einem öffnenden und einem schließenden Shortcode-Tag umschlossen wird:

Die Erstellung komplexer Shortcodes mit Parameter und Inhalt sind ausführlich im WordPress Codex oder im oben verlinkten Beitrag auf smashingmagazine.com erklärt.

Shortcodes in Widgets

Von Haus aus kann WordPress Shortcodes in Beiträgen, Seiten oder benutzerdefinierten Inhaltstypen (custom post types) interpretieren. Möchtest du die Shortcodes auch in den Sidebar Text-Widgets verwenden, so lässt sich dies mit einem zusätzlichen Filter für die functions.php erreichen, wie im WordPress Codex Beitrag zu den Shortcodes beschrieben.

Alternativ kann man diese Funktionalität mit dem Plugin Shortcodes in Sidebar Widgets aktivieren. Der Anfangs verlinkte Artkel auf Smashing Magazine beschreibt sogar die Shortcode-Verwendung in Kommentaren und Auszügen – auch das geht.

Das WooCommerce Shortcode Plugin

Wer WooCommerce schon länger kennt, erinnert sich vielleicht an den WooCommerce Shortcode Button, der früher im visuellen Editor zu finden war. Über diesen ließen sich die vorhandenen Shortcodes leicht hinzufügen, ohne die Dokumentation wälzen zu müssen. Er wurde mit WooCommerce 2.2 leider entfernt.

Wer ihn zurück haben möchte, muss nicht darauf verzichten, denn die Funktionalität findet sich nun in dem Plugin WooCommerce-Shortcodes. Ob WooThemes dieses Plugin fleißig weiterpflegen wird, das bleibt abzuwarten. Wenn du das Plugin installierst solltest du ab sofort den Shortcode Button oben im Text-Editor in der Button-Leiste sehen:

Der WooCommerce-Shortcodes Button im Editor.
Der WooCommerce-Shortcodes Button im Editor.

WooCommerce-Shortcodes im Einsatz – Zwei Anwendungsbeispiele

Was fängt man nun mit den vielen WooCommerce-Shortcodes am besten an? Wir haben zwei einfache Beispiele für euch zusammengestellt, das Ganze unter Verwendung des Standard-Themes Twenty Thirteen, damit ihr diese auch problemlos nachstellen könnt.

Eine Shop-Anzeige im Blogbeitrag

Das erste Beispiel ist eine Werbung für den Shop in einem Blogbeitrag. Hier haben wir explizit darauf geachtet, das Ganze auch als Anzeige zu markieren, so wie es in einem redaktionellen Beitrag notwendig ist. Hier zunächst einmal ein Screenshot unserer Anzeige:

Eine Anzeige im Blogbeitrag realisiert mit einem WooCommerce Shortcode.

… und hier der Code, den wir in einen Blogbeitrag platziert haben:

Wir haben den WooComemrce Shortcode recent_products verwendet, um die drei neuesten Produkte aus dem Shop nach Datum sortiert auszugeben. Der Shortcode recent_products zeigt neu hinzugefügte Produkte an, sortiert nach verschiedenen Kriterien. Die Sortierung erfolgt über die WordPress-spezifischen Parameter order und orderby, die im WordPress Codex erklärt werden. Für die Darstellung lässt sich die Anzahl der pro Seite angezeigten Produkte ( per_page) und die Anzahl der Spalten ( columns) festlegen.

Das Ganze mit der Überschrift „Neu im Shop eingetroffen“ versehen, inklusive dem Hinweis „Anzeige“. Damit sich die Anzeige besser vom restlichen Inhalt abhebt, haben wir sie noch mit einem Rahmen versehen.

Eine Sale-Seite für deinen WooCommerce-Shop

Beim zweiten Beispiel handelt es sich um eine Sale-Seite, also um eine statische Seite, die die aktuellen Sonderangebote in deinem Shop anzeigt. Diese kannst du bei Bedarf über den Customizer auch als Startseite festlegen.

Auch hier zunächst der Screenshot:

Eine Sale Seite, realisiert mit einem Woocommerce-Shortcode.
Eine Sale-Seite, realisiert mit einem Woocommerce Shortcode.

… und hier der Code:

Wir haben für dieses Beispiel eine statische Seite erstellt – mit dem Titel „Sale – die müssen raus!“ – und obigen Code über den Editor eingefügt. Hier wird der WooCommerce Shortcode sale_products genutzt, um drei Sale-Produkte auszugeben. Darüber und darunter haben wir Text platziert, den wir etwas formatiert haben, um das Ganze aufzulockern.

Der Shortcode sale_products zeigt neu hinzugefügte Produkte an. Auch hier können die Produkte über die Parameter order und orderby sortiert werden, sowie die Anzahl der pro Seite angezeigten Produkte ( per_page) und die Anzahl der Spalten ( columns) angegeben werden.

Du siehst, auch für Anwender lässt sich mit den WooCommerce-Shortcodes schon viel erreichen. Programmierkenntnisse sind oft gar nicht oder nur in geringem Maße notwendig. Du musst dich nicht auf die Template-Vorgaben von WooCommerce beziehungsweise deines Themes beschränken.

Zum Schluss sind wir gespannt auf eure Ideen. Wie setzt ihr die WooCommerce-Shortcodes ein? Wir freuen uns auf eure Kommentare!

Beitrag teilen

Author Avatar

Familie, WordPress und Schokolade machen das Leben schöner. MarketPress Supporterin, Bloggerin, Mitgründerin des WordPress Meetup Franken und last but not least: Google ist mein Freund und Helfer.

Auch interessant:

Neue Produktfilter WordPress

Plugins angetestet: WooCommerce Products Filter - Erweiterte Produktfilter

von Michael Firnkes

WooCommerce enthält bereits die wichtigsten Funktionen, damit deine Kunden Produkte nach Preis, Kategorie etc. filtern können. Wem diese Möglichkeiten n ...

Weiterlesen
youtube

Neu: Video-Tutorials für German Market

von Michael Firnkes

Du willst wissen, wie sich die einzelnen Module in unserer Rechtssicherheits-Suite German Market für WooCommerce bedienen lassen? Dann helfen wir dir jetz ...

Weiterlesen
woonews20

WooCommerce Wochenrückblick #20: Conversion, Produktkonfigurator und Woo-Argumente

von Michael Firnkes

Wir sammeln Argumente für das führende Onlineshop-System und für Open Source. Und: Einen Produktkonfigurator kannst du auch mit WooCommerce umsetzen. Di ...

Weiterlesen
cyberblog

Cyber Monday Wochenende: 50 % Rabatt auf German Market und unsere Themes

von Michael Firnkes

Rechnungserstellung, Anbindung an deine Buchhaltung, neue Benutzeroberfläche und vieles mehr: Unsere Rechtssicherheits-Suite German Market für WooCommerc ...

Weiterlesen

Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML Tags verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">