{"id":70641,"date":"2024-07-17T09:14:01","date_gmt":"2024-07-17T08:14:01","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=70641&preview=true&preview_id=70641"},"modified":"2024-07-22T15:55:33","modified_gmt":"2024-07-22T14:55:33","slug":"woocommerce-shortcodes","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/woocommerce-shortcodes\/","title":{"rendered":"Vollst\u00e4ndiger Leitfaden f\u00fcr WooCommerce-Shortcodes"},"content":{"rendered":"

WooCommerce<\/a> ist das f\u00fchrende E-Commerce-Plugin<\/a> f\u00fcr WordPress und erm\u00f6glicht es Millionen von Unternehmen, ihre Websites in robuste Online-Shops zu verwandeln. Viele Menschen wissen jedoch nicht, dass es Shortcodes<\/a> gibt.<\/p>\n

In diesem Leitfaden erf\u00e4hrst du alles, was du \u00fcber WooCommerce-Shortcodes wissen musst: von wichtigen Shortcodes f\u00fcr die Anzeige von Produkten und die Verwaltung von Warenk\u00f6rben bis hin zu fortschrittlichen Anpassungen f\u00fcr ein ma\u00dfgeschneidertes Nutzererlebnis.<\/p>\n

Lass uns herausfinden, wie diese winzigen Codeschnipsel deine E-Commerce-Website<\/a> ma\u00dfgeblich beeinflussen k\u00f6nnen.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Was sind Shortcodes?<\/h2>\n

Shortcodes wurden in WordPress 2.5 im Jahr 2008<\/a> eingef\u00fchrt. Es handelt sich dabei um kleine Codeschnipsel, die in eckige Klammern eingeschlossen sind, z. B. so: [shortcode]<\/code>. Sie dienen als Platzhalter, die WordPress anweisen, eine bestimmte Funktion auszuf\u00fchren oder bestimmte Inhalte dynamisch anzuzeigen.<\/p>\n

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\u00e4lligkeit, so dass du deine Website leichter pflegen und aktualisieren kannst.<\/p>\n

Im Laufe der Jahre haben sich die Shortcodes weiterentwickelt und sind immer leistungsf\u00e4higer und vielseitiger geworden. WooCommerce macht sich diese Funktion zunutze und bietet eine Reihe von Shortcodes an, die speziell f\u00fcr E-Commerce-Funktionen zugeschnitten sind.<\/p>\n

Erste Schritte mit WooCommerce-Shortcodes<\/h2>\n

Um WooCommerce-Shortcodes auf deiner WordPress-Seite zu verwenden, musst du sicherstellen, dass das WooCommerce-Plugin<\/a> installiert und aktiviert ist.<\/p>\n

Logge dich dazu in dein WordPress-Dashboard ein, navigiere zu Plugins<\/strong> > Neu hinzuf\u00fcgen<\/strong> und suche nach „WooCommerce“. Klicke anschlie\u00dfend auf Jetzt installieren<\/strong> und aktiviere<\/strong> das WooCommerce-Plugin.<\/p>\n

Anschlie\u00dfend kannst du dem Einrichtungsassistenten von WooCommerce folgen, um grundlegende Einstellungen wie Ladendetails, Zahlungsarten und Versandoptionen zu konfigurieren.<\/p>\n

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

Die grundlegende Syntax von Shortcodes<\/h3>\n

WooCommerce-Shortcodes enthalten oft zus\u00e4tzliche Attribute, mit denen du ihre Ausgabe anpassen kannst. Hier ist die Grundstruktur:<\/p>\n

[shortcode attribute1=\"value1\" attribute2=\"value2\"]<\/code><\/pre>\n
Der Shortcode [products limit=\"4\" columns=\"2\"]<\/code> zeigt zum Beispiel vier Produkte in einem zweispaltigen Layout an.<\/p>\n
So f\u00fcgst du Shortcodes in Beitr\u00e4ge, Seiten und Widgets ein<\/h3>\n
Shortcodes k\u00f6nnen fast \u00fcberall in WordPress hinzugef\u00fcgt werden. Du kannst sie zu einem Beitrag oder einer Seite hinzuf\u00fcgen, indem du sie einfach in einen beliebigen Texteditor<\/a> in WordPress oder in einen Shortcode-Block eintippst, wenn du Gutenberg<\/a> oder einen anderen Page Builder<\/a> verwendest.<\/p>\n
F\u00fcr diesen Leitfaden verwenden wir Gutenberg:<\/p>\n
    \n
  1. Navigiere im WordPress-Dashboard<\/a> zu den Beitr\u00e4gen<\/strong> oder Seiten<\/strong>.<\/li>\n
  2. \u00d6ffne den Beitrag\/die Seite, zu dem\/der du den Shortcode hinzuf\u00fcgen m\u00f6chtest.<\/li>\n
  3. Klicke auf das +<\/strong> Symbol, um einen neuen Block hinzuzuf\u00fcgen.\n
    \"Schritte
    Schritte zum Hinzuf\u00fcgen eines Shortcodes mit Gutenberg-Bl\u00f6cken in WordPress<\/figcaption><\/figure><\/li>\n
  4. Suche nach dem Shortcode-Block und w\u00e4hle ihn aus.<\/li>\n
  5. F\u00fcge deinen Shortcode in den Block ein.<\/li>\n<\/ol>\n
    Nehmen wir an, du m\u00f6chtest auf deiner Startseite eine \u00dcbersicht \u00fcber deine neuesten Produkte anzeigen. Im Blockeditor<\/a> gibst du den Shortcode [products limit=\"3\" columns=\"3\"]<\/code> ein und aktualisierst<\/strong> oder ver\u00f6ffentlichst<\/strong> deine Seite.<\/p>\n
    Dadurch wird ein Raster mit drei Produkten in einer Spalte erstellt, das eine dynamische und attraktive M\u00f6glichkeit bietet, deine neuesten Angebote zu pr\u00e4sentieren.<\/p>\n
    \"Anzeige
    Anzeige eines Produktrasters mit einem Shortcode im WordPress-Blockeditor<\/figcaption><\/figure>\n
    Du kannst auch Shortcodes zu Widgets<\/a> hinzuf\u00fcgen, indem du zu Erscheinungsbild<\/strong> > Widgets<\/strong> navigierst. F\u00fcge ein Text-Widget<\/strong> in den gew\u00fcnschten Widget-Bereich ein (Seitenleiste, Fu\u00dfzeile usw.). Gib deinen Shortcode in das Textfeld des Widgets ein und speichere das Widget.<\/p>\n
    Wichtige WooCommerce-Shortcodes<\/h2>\n
    WooCommerce stellt eine Vielzahl von Shortcodes zur Verf\u00fcgung, mit denen du Produkte anzeigen, den Warenkorb<\/a> verwalten und den Bezahlvorgang verbessern kannst.<\/p>\n
    Im Folgenden stellen wir dir die wichtigsten WooCommerce-Shortcodes, ihre Eigenschaften und ausf\u00fchrliche Beispiele vor, damit du sie in deinem Shop effektiv einsetzen kannst.<\/p>\n
    Shortcodes f\u00fcr die Produktanzeige<\/h3>\n
    Der Shortcode [products]<\/code> ist einer der vielseitigsten WooCommerce-Shortcodes. Er erm\u00f6glicht es dir, eine Liste von Produkten nach verschiedenen Kriterien anzuzeigen.<\/p>\n
    Er hat so viele Attribute, dass du die Produkte so anzeigen kannst, wie du willst:<\/p>\n