Hinweis: Der folgende Artikel hilft Ihnen weiter: So zeigen Sie WooCommerce-Produkte auf der Homepage oder einer anderen Seite an
Möchten Sie Ihre vorgestellten Produkte auf mehreren Seiten Ihrer Website anzeigen? In diesem Blog zeigen wir Ihnen, wie Sie WooCommerce-Produkte auf der Startseite oder anderen Seiten in WordPress anzeigen.
Sobald Sie WooCommerce installiert haben, erstellt es automatisch eine Shop-Seite. Die WooCommerce-Shopseite zeigt alle Ihre E-Commerce-Produkte auf einer Seite.
Möglicherweise möchten Sie Ihre WooCommerce-Produkte aber auch auf anderen meistbesuchten Seiten Ihres Online-Shops anzeigen. Die Anzeige vorgestellter oder beliebter Produkte auf verschiedenen Seiten weckt die Neugier der Kunden und erhöht die Conversion-Rate.
Wir zeigen Ihnen zwei verschiedene Möglichkeiten, WooCommerce-Produkte auf der Startseite oder einer anderen Seite/einem anderen Beitrag Ihres Online-Shops anzuzeigen.
- Zeigen Sie WooCommerce-Produkte mithilfe von Shortcodes an
- Zeigen Sie WooCommerce-Produkte mithilfe von Blöcken an
Beginnen Sie mit der grundlegenden Abfrage-
Warum Ihre Produkte auf mehreren Seiten auf WooCommerce anzeigen?
Innerhalb von WooCommerce erhalten Sie eine eigene Shop-Seite, auf der Sie Ihre Produkte organisiert und mit den erforderlichen Details präsentieren können. Es ist jedoch keine gute Idee, Produkte nur auf der Shop-Seite anzuzeigen. Es kann das Kundenerlebnis einschränken, was sich direkt auf Ihr Endergebnis auswirkt.
Darüber hinaus sind digitale Kunden immer auf der Suche nach einer schnellen Lösung. Sie verpassen möglicherweise die Produktseite in Eile und wechseln zu einer anderen Website, ohne etwas über Ihre Produkte zu wissen. Aus diesem Grund sollten Sie Ihre Produkte, insbesondere die meistverkauften Produkte, auf verschiedenen Seiten Ihrer Website anzeigen.
Zum Beispiel, Sie können 5 meistverkaufte Produkte aus verschiedenen Kategorien als Abschnitt auf der Startseite hinzufügen. Eine weitere gute Idee ist es, Ihre beliebten Artikel auf den meistbesuchten Seiten Ihrer Website zu präsentieren. Auch für diese Produkte können Sie Sonderangebote anbieten.
So zeigen Sie WooCommerce-Produkte mithilfe von Shortcodes auf der Homepage oder anderen Seiten an
WooCommerce unterstützt eine umfangreiche Bibliothek mit Shortcodes. Sie können sie verwenden, um Inhalte in Beiträgen und Seiten hinzuzufügen. Fügen Sie diese Shortcodes an der gewünschten Position zwischen zwei Absätzen oder anderen Blöcken ein.
Jetzt fungiert Gutenberg als Standard-Seitenersteller für WordPress. Wählen Sie den Block „Shortcode“ und fügen Sie den richtigen Shortcode in das Feld ein. Auch Seitenersteller wie Elementor funktionieren auf die gleiche Weise.
Wenn Sie den Shortcode (folgen Sie dem Bild unten) zu einer beliebigen Seite hinzufügen, werden alle Produkte Ihrer Shop-Seite angezeigt. Produkte werden nach Beitrags-ID, SKU, Kategorien und Attributen angezeigt, mit Unterstützung für Paginierung, zufällige Sortierung und Produkt-Tags.
Angenommen, Sie möchten bestimmte Produkte auf einer Seite anzeigen. In diesem Fall können Sie Attribute verwenden, um die Produkte zu definieren. Erwähnen Sie diese Attribute zusammen mit Argumenten oder Attributwerten. So erhalten Sie erweiterte Kontrolle über die Produkte, die Sie auf einer Seite anzeigen möchten.
Sie können diese Attribute zusammen mit ihren Argumenten einfach in die Klammern des Shortcodes einfügen.
Sie möchten beispielsweise nur 5 Produkte auf Ihrer Homepage anzeigen. Mit diesem Shortcode können Sie die Anzahl der Produkte begrenzen.
[products limit=”5″]
Hier ist „Limit“ das Attribut und „5“ das Argument. Jedes Attribut unterstützt eine Reihe akzeptabler Argumente.
Jetzt möchten Sie 5 Produkte anzeigen, die im Angebot sind. Verwenden Sie den Shortcode-
[products limit=”5″ on_sale=”true”]
Sie können verschiedene Attribute einbinden, um Produkte nach individuellen Kriterien anzuzeigen. Wie zum Beispiel „best_selling“ oder „top_rated“, je nach Ihren Anforderungen. Sie müssen lediglich den Shortcode an der richtigen Stelle hinzufügen.
Verfügbare Produktattribute zum Anzeigen von WooCommerce-Artikeln
Nachfolgend finden Sie die Attribute, die in Verbindung mit dem verwendet werden können [‘products’] Shortcode. Wir unterteilen sie in drei Abschnitte, um sie leicht verständlich zu machen:
- Produktattribute anzeigen
- Inhaltsproduktattribute
- Besondere Produktattribute
1. Produktattribute anzeigen
Grenze: Geben Sie die Anzahl der anzuzeigenden Produkte an. Fügen Sie als Argument die Anzahl der Produkte hinzu, die Sie anzeigen möchten. Der Standardwert ist -1, um alle Produkte auf Ihrer Shop-Seite anzuzeigen.
Säulen: Definieren Sie die Anzahl der Spalten, um ein strukturelles Layout basierend auf Ihrem Site-Design festzulegen. Der Standardwert ist 4, Sie können jedoch eine beliebige Zahl als Argument verwenden.
paginieren: Schaltet die Paginierung ein. Es kann in Verbindung mit dem Limit verwendet werden. Argumentwerte sind wahr und falsch. Der Standardwert ist „false“, den Sie zum Paginieren auf „true“ setzen können.
Sortieren nach: Kategorisiert die angezeigten Produkte nach der eingegebenen Option. Mehrere Optionen können eingefügt werden, indem beide Slugs mit einem Leerzeichen dazwischen hinzugefügt werden. Verfügbare Optionen sind Datum, ID, Menüreihenfolge, Beliebtheit, Rand, Bewertung und Titel.
Kategorie: Sie haben die Möglichkeit, Produkte aus einer bestimmten Kategorie anzuzeigen. Verwenden Sie Kategorie-Slugs als Argumente. Außerdem können Sie Produkte aus mehreren Kategorien abrufen. Alles was Sie brauchen, um die Kategorie-Slugs durch Kommas zu trennen.
Schild: Zeigen Sie Produkte mit einem bestimmten Tag an. Verwenden Sie Tag-Slugs als Argumente. Mehrere Tags können abgerufen werden, indem eine Liste von Tag-Slugs durch Kommas getrennt wird.
Artikelnummer: Zeigen Sie Produkte mit einer bestimmten SKU an. Verwenden Sie SKU-Nummern als Argumente. Sie können mehrere Produkte definieren, indem Sie eine Liste von SKUs durch Kommas trennen.
Befehl: Definiert mithilfe der in orderby festgelegten Methode, ob die Produktreihenfolge aufsteigend (ASC) oder absteigend (DESC) erfolgt. Standardmäßig ist ASC.
Klasse: Enthält eine HTML-Wrapper-Klasse zum Anpassen der spezifischen Ausgabe mit benutzerdefiniertem CSS.
2. Content-Produktattribute
Attribut: Zeigen Sie Produkte mit dem angegebenen Attribut-Slug an. Verwenden Sie Attribut-Slugs als Argumente. Mehrere Attribute können definiert werden, indem eine Liste von Attribut-Slugs durch Kommas getrennt wird.
Bedingungen: Produktvielfalt anhand eines bestimmten Begriffs darstellen. Als Argument können Sie den Begriff Schnecken verwenden. Fügen Sie mehrere Begriffe hinzu, indem Sie eine Liste von Begriffsblöcken durch Kommas trennen.
terms_operator: Wird zum Vergleichen von Attributbegriffen verwendet. Die Optionen finden Sie hier: UND, IN und NICHT IN. UND zeigt Produkte aller ausgewählten Attribute an, IN zeigt Produkte mit den ausgewählten Attributen an und NICHT IN zeigt Produkte an, die nicht über die ausgewählten Attribute verfügen.
tag_operator: Wird zum Vergleichen von Tags verwendet. Die Optionen finden Sie hier: UND, IN und NICHT IN. UND zeigt Produkte aller ausgewählten Tags an, IN zeigt Produkte mit den ausgewählten Tags an und NICHT IN zeigt Produkte an, die nicht über die ausgewählten Tags verfügen.
Sichtweite: Es werden Produkte unter Berücksichtigung der gewählten Sichtbarkeit präsentiert. Zum Beispiel sichtbar, Katalog, Suche, ausgeblendet und hervorgehoben.
Kategorie: Wählen Sie Produkte mit einem bestimmten Kategorie-Slug aus.
Schild: Produkte mit dem angegebenen Tag-Slug anzeigen.
cat_operator: Wird zum Vergleichen von Kategoriebegriffen verwendet. Die Optionen finden Sie hier: UND, IN und NICHT IN.
IDs: Produkte mit einer bestimmten Produkt-ID anzeigen. Verwenden Sie Produkt-IDs als Argumente. Sie können auch mehrere Produkte abrufen, indem Sie eine Liste von Produkt-IDs durch Kommas trennen.
3. Besondere Produktattribute
Wenn Sie Ihre meistverkauften Produkte oder Produkte mit Sonderangeboten anzeigen möchten, verwenden Sie diese speziellen Produktattribute. Sie können diese Attribute jedoch nicht mit den oben erwähnten „Inhaltsattributen“ verwenden. Eine Vermischung kann zu Konflikten führen und dazu führen, dass die Produkte nicht richtig angezeigt werden.
Verwenden Sie jeweils nur eines der folgenden Sonderattribute:
- im Angebot: Zeigt Produkte an, die im Angebot sind. Legen Sie den Wert auf „true“ fest. Sie können dieses Attribut nicht in Verbindung mit best_selling oder top_rated verwenden.
- meistverkauft: Ruft die meistverkauften Produkte ab. Legen Sie den Wert auf „true“ fest. Sie können dieses Attribut nicht in Verbindung mit on_sale oder top_rated verwenden.
- bestbewertet: Zeigt nur am besten bewertete Produkte an. Verfügbare Argumente sind wahr und falsch. Sie können dieses Attribut nicht in Verbindung mit on_sale oder best_selling verwenden.
So funktionieren Produkt-Shortcodes auf Ihren Online-Shop-Seiten
Hier zeigen wir einige Beispiele für die Anzeige von Produkten mithilfe von Shortcodes, Attributen und Argumenten.
Beispiel 1: Zeigen Sie 4 aktuelle Produkte in 2 Spalten auf einer Seite an. Verwenden Sie den Shortcode-
[recent_products per_page=”4″ columns=”2″]
Der Shortcode „per_page“ bestimmt die Anzahl der Produkte, die auf der Seite angezeigt werden sollen, und das Spaltenattribut weist die Spaltennummer zu, in der Produkte angezeigt werden.
Beispiel 2: Zeigt 4 Produkte an, die in 2 Spalten als „hervorgehoben“ festgelegt wurden.
[featured_products per_page=”4″ columns=”2″]
Es werden 4 Ihrer vorgestellten Produkte in 2 Spalten angezeigt.
Beispiel 3: Wenn Sie Ihre WooCommerce-Produkte nach IDs anzeigen möchten, überprüfen Sie den folgenden Shortcode:
[products ids=”12, 24, 26, 28″]
Oder Sie können die Produkte nach ihren SKUs kategorisieren und nach Datum sortieren.
[products skus=”ABC123, XYZ123, DEF123″ orderby=”date” order=”desc”]
Sie können Gutenberg-Blöcke jedoch auch verwenden, um WooCommerce-Produkte auf verschiedenen Seiten zu präsentieren. Lassen Sie uns Ihnen den Prozess zeigen-
Zeigen Sie WooCommerce-Produkte mithilfe von Blöcken auf jeder Seite an
Wie Sie wissen, fungiert Gutenberg als Standardbrowser von WordPress. Sobald Sie WooCommerce auf Ihrer WordPress-Site installiert haben, werden Ihrem Editor automatisch einige zusätzliche Blöcke hinzugefügt. Mit diesen Blöcken können Sie Produkte zu einer Seite oder einem Beitrag hinzufügen.
Allerdings bieten Ihnen Blöcke nicht die gleiche Flexibilität wie Shortcodes. Hier können Sie Produkte nach Kategorien, Attributen und Tags hinzufügen. Wenn Sie Seitenersteller wie Elementor verwenden, können Sie die Anpassungsoptionen um eine Vielzahl von Anpassungen erweitern.
Nachdem Sie den gewünschten Block hinzugefügt haben, können Sie die Kategorien, Attribute oder Tags aus der Liste festlegen. Außerdem finden Sie auf der rechten Seite des Bildschirms ein Anpassungsfeld. Sie können die Anzahl der angezeigten Produkte mithilfe von Spalten und Zeilen verwalten.
Unter Inhalt gibt es Optionen zum Steuern der Details, die mit den Produkten angezeigt werden. Wählen Sie die Attribute aus, die Sie mit Ihren Produkten anzeigen möchten, z. B. Titel, Preis, Bewertung und Schaltflächen zum Hinzufügen zum Warenkorb. Sie können die Produkte auch unter Berücksichtigung von Neuheit, Preis, Bewertung, Umsatz und Titel bestellen.
FAQs
Warum sind meine Produkte nicht sichtbar?
Überprüfen Sie, ob Sie es in der „Katalogsichtbarkeit“ auf „Ausgeblendet“ gesetzt haben.
Wie finde ich die Produkt-ID?
Gehen Sie in Ihrem WordPress-Dashboard zur Registerkarte „Produkte“. Bewegen Sie den Mauszeiger über das Produkt, dessen ID Sie erfahren möchten, und überprüfen Sie, ob die ID wie unten gezeigt angezeigt wird.
Wie erstelle ich ein Produkt, das in WooCommerce vorgestellt wird?
Gehen Sie in Ihrem WordPress-Dashboard zu Produkte > Alle Produkte. Suchen Sie das Produkt, das Sie vorstellen möchten, und klicken Sie auf den Featured Star.
Zeigen Sie WooCommerce-Produkte auf der Homepage oder anderen Seiten Ihres Online-Shops an
WooCommerce unterstützt einen effektiven Weg dazu Produkte online herstellen und verkaufen. Es verfügt über eine Vielzahl nützlicher Funktionen und unbegrenzte Anpassungsmöglichkeiten. So können Benutzer die Funktionalitäten ganz einfach an ihre Anforderungen anpassen.
WooCommerce verfügt über eine Standard-Shop-Seite, um alle Produkte attraktiv darzustellen. Um das Benutzererlebnis zu erweitern, können Sie Ihre besonderen Produkte auch auf anderen wichtigen Seiten präsentieren.
Verwenden Sie WooCommerce-Shortcodes oder Gutenberg-Blöcke, um Produkte zu jedem Beitrag oder jeder Seite in Ihrem WooCommerce-Shop hinzuzufügen.
Wenn Sie weitere Fragen zur Anzeige von WooCommerce-Produkten auf der Startseite haben, nutzen Sie den Kommentarbereich unten.
