Wenn Sie einige Zeit mit WordPress verbracht haben, bin ich mir sicher, dass Sie bereits über Shortcodes Bescheid wissen. Wenn Sie jedoch nicht wissen, was Shortcodes sind, werde ich Ihnen eine grundlegende Erklärung geben.
Was ist ein Shortcode und wie verwende ich Shortcodes in WooCommerce?
Um Fehler zu vermeiden, vergewissern Sie sich beim Kopieren und Einfügen der Shortcodes, dass Sie den leeren Raum zwischen den Klammern löschen: [ c123 ] – falsch, [c123] – gut.
Ein Shortcode ist, wie der Name schon sagt, eine kurze Zeichenfolge, die normalerweise in rechte Klammern geschrieben wird. Sein Hauptzweck ist es, WooCommerce-Nutzern zu helfen, dynamische Inhalte einzufügen oder zu ändern, ohne den visuellen Editor verlassen zu müssen.
Noch einfacher ausgedrückt: Er hilft Ihnen bei der Implementierung und Änderung der Werte von interaktiven Elementen, Anmeldeformularen, Benutzerprofilen und -einstellungen, Warenkorbstatus, Kassenseiten und so ziemlich jedem Element, das Ihnen einfällt.
Ein gutes Beispiel für einen WooCommerce-Shortcode wäre:
[ woocommerce_cart ] – eingefügt in den WordPress-Post-Editor, wird dieser Shortcode den WooCommerce-Warenkorb und den aktuellen Benutzer hinzugefügt Artikel zurück.Es gibt viele Erweiterungen und Mods, die erstellt wurden, um den Bedarf an Shortcodes in WordPress zu decken. Die beliebteste ist der Visual Composer, der auf über 350.000 Websites eingesetzt wird. Für WooCommerce hingegen gibt es das Plugin „WooCommerce Shortcodes“, eine Erweiterung der Plattform, die eine visuell freundlichere Umgebung für die Verwendung von Shortcodes schafft.
Einmal installiert und aktiviert, implementiert das WooCommerce Shortcodes-Plugin eine Woo-Schaltfläche in Ihrem Post-Editor, über die Sie alle in WooCommerce verfügbaren Shortcodes einfach verwalten und ihre Werte nach Ihren Wünschen ändern können.
Welche Shortcodes sind in WooCommerce enthalten?
Ich habe mit dem [ woocommerce_cart ] begonnen, aber es gibt noch viele weitere Shortcodes, die alle ziemlich intuitiv sind. Eine weitere Regel, die für alle Shortcodes innerhalb von WooCommerce gilt: Sie beginnen alle mit WooCommerce, gefolgt von einem Unterstrich und dem eigentlichen Shortcode-Namen.
Außerdem ist es erwähnenswert, dass einige dieser Shortcodes auch die Übergabe von Argumenten erlauben. Zum Beispiel die Anzahl der Produkte, die angezeigt werden sollen, oder die Anzahl der Kategorien, die pro Seite angezeigt werden sollen.
WooCommerce Checkout Seite
Was ist der WooCommerce-Kassen-Shortcode?
- die ID des WooCommerce-Produkts, das Sie im Kassenfenster anzeigen möchten, und
- Ein boolescher Wert, der festlegt, ob Sie die Schaltfläche „Jetzt auschecken“ anzeigen möchten oder nicht.
Wie finde ich meinen WooCommerce-Shortcode?
Es ist ganz einfach: Ich werde sie weiter unten veröffentlichen:
[ woocommerce_checkout ]
Benutzerprofil und Kontoverwaltung
Dieser Shortcode wird Ihnen helfen, eine der wichtigsten Shopseiten zu erstellen: Die Seite Mein Konto. Auf dieser Seite können die Kunden frühere Bestellungen einsehen, Adressen und Zahlungsdetails bearbeiten. Mein Konto ist das zentrale Kunden-Dashboard in einem WooCommerce-Shop.
Wie finde ich meinen WooCommerce-Shortcode?
Ganz einfach: Kopieren Sie einfach den unten stehenden Shortcode und fügen Sie ihn auf der gewünschten „Mein Konto“-Seite ein:
[ woocommerce_my_account ]
Wie der Name schon sagt, werden hier die Details des aktuellen Benutzerkontos und die Möglichkeiten, diese zu ändern, angezeigt. Außerdem kann der Nutzer auf dieser Seite Details zu früheren Bestellungen sehen. Dies ist ein Shortcode, der Argumente akzeptiert, daher können Sie wählen, wie viele Bestellungen pro Seite angezeigt werden sollen.
Die Standardanzahl der Bestellungen ist 15, aber Sie können sie auf jede beliebige Anzahl einstellen. Wenn Sie alle Bestellungen anzeigen möchten, sollte Ihr Shortcode wie folgt aussehen:
[ woocommerce_my_account order_count=”-1″ ]
Wenn Sie 10 Aufträge anzeigen möchten
[ woocommerce_my_account order_count=”10″ ]
Produkte und Produktkategorien anzeigen
Es gibt viele Variationen von WooCommerce-Shortcodes, mit denen Sie Produkte anzeigen können. So können Sie die neuesten Produkte, vorgestellte Produkte, ein einzelnes Produkt oder mehrere Produkte aus bestimmten Kategorien anzeigen.
a. Wie kann ich ein einzelnes Produkt in WooCommerce anzeigen?
Hierfür benötigen Sie entweder die eindeutige Produkt-ID oder die SKU (Stock Keeping Unit), eine eindeutige Kennung für das Produkt.
ID example: [ product id=”1234″ ] SKU example: [ product sku=”pro” ]
Wie findet man die WooCommerce Produkt-ID?
Gehen Sie zu Admin Dashboard > Produkte (unter der Schaltfläche WooCommerce auf der linken Seite) > Bewegen Sie die Maus über einen Produkttitel. Die Produkt-ID erscheint zuerst, in der gleichen Zeile wie „Schnellbearbeitung“, „Bearbeiten“ usw.
b. Anzeige mehrerer bestimmter WooCommerce-Produkte
Dies ist ein weiterer Shortcode, der Argumente akzeptiert, und dies sind die order und orderby-Argumente. Ansonsten ist dieser Shortcode genau derselbe wie der für ein einzelnes Produkt, nur dass Sie in diesem Fall IDs und SKUs durch ein Komma trennen.
ID example: [ products ids = “1, 2, 3”] SKU example: [ products skus = “pro, rba, abc ”]
c. Anzeige von WooCommerce Featured Products
Wie Sie vielleicht wissen, können Sie mit WooCommerce vorgestellte Produkte einrichten, also Produkte, die Sie für die Werbung auswählen. Jetzt können Sie entscheiden, welche Produkte Sie zeigen und wie viele Sie auf einer Seite anzeigen möchten.
Um dies zu tun, verwenden wir den [featured_products] Shortcode. Dies ist ein dynamischer Shortcode, der Argumente wie per_page und columns akzeptiert.
Um sie zu nutzen:
Beispiel: Zeigen Sie 15 vorgestellte Produkte in 3 Spalten
[ featured_products per_page=”15″ columns=”3″]
d. Wie man die neuesten Produkte in WooCommerce anzeigt
Wenn Sie die neuesten Produkte aus Ihrem WooCommerce-Shop anzeigen möchten, können Sie den Shortcode [recent_products] verwenden, der 2 Argumente erlaubt: per_page und columns
Beispiel: Zeigen Sie die letzten 30 Produkte aus Ihrem Geschäft auf 3 Spalten
[ recent_products per_page=”10″ columns=”3″]
e. WooCommerce Vollständige Produktseite
Dies ist ziemlich ähnlich wie „Einzelprodukt anzeigen“, nur dass Sie eine vollständige Produktseite anzeigen.
ID example: [ product_page id=”25″] SKU example: [ product_page sku=”25″]
f. Gesamte Produktkategorie anzeigen
Sie können alle Produkte einer bestimmten Kategorie anzeigen, indem Sie den Shortcode [product_category] verwenden. Der Shortcode akzeptiert 5 Argumente:
- per_page – Anzahl der Beiträge pro Seite
- columns – Anzahl der Spalten für Produkte
- orderby – Titel, Datum usw.
- order – aufsteigend oder absteigend
- category – die Kategorie der Produkte, die Sie präsentieren möchten
Beispiel: Zeige 16 Produkte aus der Kategorie Notebooks, sortiert nach Datum, aufsteigend nach 4 Spalten
[product_category category=”notebooks” columns=”4″ per_page=”16″ orderby=”date” order=”asc”]
g. Wie kann ich die meistverkauften Produkte in WooCommerce anzeigen?
Dies sind die Produkte mit den höchsten Verkaufszahlen. Sie können sie mit dem Shortcode [best_selling_products] anzeigen. Er akzeptiert das Argument per_page.
Beispiel: Anzeige der 15 meistverkauften Produkte in Ihrem Geschäft
[ best_selling_products per_page=”15″]
h. Nur zum Verkauf stehende Produkte anzeigen
[sale_products] – zeigt nur die zum Verkauf stehenden Produkte an. Es akzeptiert 4 Argumente:- pro_seite
- Spalten
- orderby
- Bestellung
Beispiel: Anzeige von 20 Verkaufsprodukten nach Titel in absteigender Reihenfolge in 2 Spalten
[sale_products per_page=”20″ orderby=”title” order=”desc” columns=”2″]
i. Verwandte WooCommerce-Produkte anzeigen
Dies ist eine gute Möglichkeit, die Anzahl der Seitenaufrufe auf Ihrer Website zu erhöhen und mehr Aufmerksamkeit für weniger beliebte Produkte zu erzeugen. Sie können verwandte Produkte mit dem Shortcode anzeigen.
Der Shortcode akzeptiert 3 Argumente:
- per_page
- columns
- orderby
Beispiel: Um 5 verwandte Produkte anzuzeigen, verwenden Sie einfach den Shortcode
Schaltfläche „In den Warenkorb“ und URL
Ein sehr wichtiger Shortcode, der Ihnen hilft, das Aussehen Ihrer WooCommerce-Schaltfläche „In den Warenkorb“ anzupassen, und der Ihnen hilft, sie dort zu platzieren, wo Sie es für nötig halten. Sie können ihn auf anderen Beiträgen oder Seiten platzieren, da er produktabhängig ist.
Um also eine Schaltfläche „In den Warenkorb“ anzuzeigen, müssen Sie den Shortcode verwenden, der 3 Argumente unterstützt: id, style und sku.
Beispiel: Um eine Schaltfläche "In den Warenkorb" für ein Produkt mit der ID-Nummer 25 mit dem Stil border:2px solid #ccc; background:#999; color:#000; 12px; mit SKU - pro anzuzeigen
[ add_to_cart id=”25″ style=”border:2px solid #ccc; background:#999; color:#000; 12px;” sku=”pro”]
Wenn Sie die Schaltfläche für das Hinzufügen zum Warenkorb nicht benötigen und nur eine URL brauchen, können Sie den Shortcode [add_to_cart_url] verwenden, der id und sku unterstützt.
example: [ add_to_cart_url id=”25″ sku=”pro”]
Dies gibt die vollständige URL zurück, damit der Benutzer ein bestimmtes Produkt mit der id=25 in seinen Warenkorb legen kann.
Bitte beachten Sie
Wenn Sie WooCommerce-Shortcodes sowie WordPress-Shortcodes verwenden, achten Sie darauf, dass Sie diese nicht zwischen den Tags <pre> und </pre> platzieren, da WordPress diese mit Code verwechselt und Ihren Shortcode nicht ausführt. Stellen Sie außerdem sicher, dass Sie die Leerzeichen zwischen den Klammern löschen, wie ich am Anfang des Artikels angegeben habe: [ c123] – falsch, [c123] – gut.
