Was sind WooCommerce Shortcodes und wie man sie verwendet

Andrei Iordache

Andrei Iordache

WordPress Entwickler

🚀 Ich helfe Menschen online gefunden zu werden | WordPress Entwicklung, Core Web Vitals, Sicherheit&Wartung

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?

WooCommerce Checkout Shortcode ist ein Stück Code, der es Ihnen erlaubt, die WooCommerce Checkout-Seite auf Ihrer gewünschten Checkout-Seite zu verwenden. Der Shortcode akzeptiert zwei Argumente:
  1. die ID des WooCommerce-Produkts, das Sie im Kassenfenster anzeigen möchten, und
  2. 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.

Vorheriger Beitrag
Umbenennen des WooCommerce Admin-Menüs in WordPress
Nächster Beitrag
18 Gründe, warum WooCommerce ist am besten für ein Online-Geschäft?
Lusi StudiosLusi Studios
15:32 22 Jun 22
Andrei did an amazing job! He helped in a very rushed time and he excelled at everything. Thanks again!
I am grateful and I would to thank Websites Seller for their support in site recovery and site transfer. Websites Seller just saved my business. Thank you!
Wouter GhysensWouter Ghysens
11:52 10 Sep 21
Looking for a Wordpress transfer from site A to site B, I found back Andrei from Wesites Seller on Google.He was very proactive in his approach, came with hundreds of ideas and lifetime experiences from other migrations. He knows the wordpress, the hosting and php database as the back of his pocket.And we worked out this migration very smooth. Together we solved it, and myself and my business are very pleased with his approach.100% recommendation & kudo's from out of Belgium!
Ioachim CiobanuIoachim Ciobanu
18:39 14 Jul 21
Websites Seller built my resume site. Deliverables were quickly completed, and I was asked for my feedback at each stage of development. All feedback I gave was implemented in a short time.Another great thing is that he comes with smart solutions, regarding stuff which I didn't initially think of (site security, Google site speed optimization and so on). Basically, he was great, staying in touch, keeping me updated and paid attention to what was most important for my site.Overall, I am very happy with the work done. I highly recommend this developer!
K CollinsK Collins
09:11 19 May 21
I needed help with website speed - to improve my core web vitals - without compromising the usability of my site. Andrei was extremely responsive, proactive and fast. And more importantly, he increased by website speed. Highly recommend him, and I will be using him going forward on all my projects.
js_loader

Dienstleistungen

WordPress Website Maintenance Services

WordPress Wartungsdienste

WordPress Website Wartungs Service, der Cloud Backups, Notfall Support, wöchentliche Website Updates, Geschwindigkeit und vieles mehr bietet.

sally

WordPress Migrationsdienst

Übertragen Sie Ihre WordPress-Website sicher an einen neuen Standort für $75. … Migrieren Sie Ihre Website zu ihrem neuen Hoster.

lawyer-office

Anwalts Web design

Wir sind spezialisiert auf Website-Design, Internet-Marketing und SEO für Anwälte und Juristen in ganz Europa und den USA.