So zeigen Sie WooCommerce-Produktempfehlungen an (+ verwandte Produkte) 

In einem WooCommerce-Shop, den ich verwaltete, ließ ich früher das Standardlayout entscheiden, was die Käufer sahen. Die Kunden verließen den Shop, ohne etwas anderes als das Produkt zu erkunden, auf dem sie gelandet waren.

Zwei kleine Änderungen haben das behoben: WooCommerce-Produktempfehlungen, um die besten Artikel dort zu platzieren, wo die Leute tatsächlich hinschauen, und verwandte Produkte, um einen sinnvollen nächsten Kauf vorzuschlagen. Zusammen führten sie zu mehr Klicks und größeren Bestellungen.

In diesem Leitfaden zeige ich Ihnen 3 Möglichkeiten, Produktempfehlungen anzuzeigen, und dann, wie Sie verwandte Produkte, Upsells und Cross-Sells einrichten und anpassen.

Was sind WooCommerce-Produkte in den Vordergrund?

Ein hervorgehobenes Produkt ist eines, das Sie in WooCommerce manuell markieren, um es hervorzuheben. Sobald Sie ein Produkt als „Hervorgehoben“ festlegen, können Sie es in speziellen Bereichen Ihrer Website anzeigen, getrennt von Ihrem regulären Katalog.

Die besten Produkte zum Hervorheben sind normalerweise Ihre Top-Seller, Neuheiten oder Artikel mit hoher Marge. Viele Shop-Betreiber wechseln die hervorgehobenen Produkte saisonal und präsentieren im Dezember Winterartikel oder im August Schulartikel.

Produktempfehlungen sind nicht dasselbe wie verwandte Produkte. Sie wählen Produktempfehlungen selbst aus, während WooCommerce verwandte Produkte automatisch basierend auf gemeinsamen Kategorien und Tags auswählt. Ich werde behandeln, wie man verwandte Produkte einrichtet später in diesem Leitfaden.

So fügen Sie hervorgehobene Produkte in WooCommerce hinzu

Bevor Sie hervorgehobene Produkte anzeigen können, müssen Sie sie zuerst in WooCommerce markieren. Dies können Sie tun, indem Sie ein beliebiges vorhandenes Produkt bearbeiten.

Gehen Sie in Ihrem WordPress-Adminbereich zu Produkte » Alle Produkte . Bewegen Sie dann die Maus über ein Produkt und klicken Sie auf die Option Bearbeiten .

Finden Sie als Nächstes das Feld „Veröffentlichen“ auf der rechten Seite des WordPress-Editors. Klicken Sie dort bei der Überschrift „Katalog-Sichtbarkeit“ auf Bearbeiten.

Klicken Sie auf das Kontrollkästchen „Dies ist ein empfohlenes Produkt“ und wählen Sie OK . Klicken Sie dann auf Aktualisieren , um Ihre Änderungen zu speichern.

Wiederholen Sie diesen Vorgang für jedes Produkt, das Sie als hervorgehoben festlegen möchten. Um Dinge zu beschleunigen, können Sie auf die Option Schnellbearbeitung klicken und das Kontrollkästchen „Hervorgehobenes Produkt“ in diesem Bereich finden.

Alternativ können Sie auf das Sternsymbol neben jedem Produkt klicken, um es hervorzuheben.

Sie sind sich nicht sicher, welche Artikel Sie präsentieren sollen? Beginnen Sie mit Ihren Topsellern oder saisonalen Angeboten auf Ihren Produktseiten.

Nachdem Sie Ihre Produkte als hervorgehoben markiert haben, gibt es drei Möglichkeiten, sie in Ihrem Shop anzuzeigen.

Methode 1: WooCommerce Featured Products mit SeedProd anzeigen

Diese erste Methode verwendet SeedProd, um mehrere hervorgehobene Produkte gleichzeitig in Ihrem Shop anzuzeigen.

SeedProd ist einer der besten WordPress-Website-Builder mit über 1 Million Nutzern. Sie können mit seinem Drag-and-Drop-Builder ein benutzerdefiniertes WordPress-Theme erstellen, ganz ohne Code.

Für Shop-Betreiber ist der nützliche Teil die WooCommerce-Integration. Sie können Live-Produktdaten überall auf Ihrer Website anzeigen, und die flexiblen Produktgitter machen es einfach, benutzerdefinierte Layouts ohne Code zu erstellen.

Hier erfahren Sie, wie Sie SeedProd verwenden, um Ihre hervorgehobenen WooCommerce-Produkte anzuzeigen.

Schritt 1. SeedProd installieren und aktivieren

Beginnen Sie mit der Installation und Aktivierung von SeedProd auf Ihrer WordPress-Website.

Sie können dieser Anleitung folgen, wie man ein WordPress-Plugin installiert, falls Sie Hilfe benötigen.

Nach der Aktivierung von SeedProd gehen Sie zu SeedProd » Einstellungen und geben Sie Ihren SeedProd-Lizenzschlüssel ein.

Sie finden den Lizenzschlüssel in Ihrem Konto-Dashboard im Abschnitt „Downloads“ auf der SeedProd-Website.

Nachdem Sie Ihren Lizenzschlüssel eingegeben haben, klicken Sie auf die Schaltfläche Schlüssel überprüfen, um Ihre Kontoinformationen zu speichern.

Schritt 2. Erstellen Sie ein WooCommerce-Theme

Richten Sie als Nächstes Ihren WooCommerce-Shop ein.

SeedProd bietet Ihnen zwei Möglichkeiten, dies zu tun:

• Vorgefertigtes WooCommerce-Theme: Importieren Sie eine fertige WooCommerce-Themevorlage, und SeedProd erstellt automatisch alle Ihre Shop-Seiten.
• Individuelle Theme-Teile: Erstellen Sie jeden Teil Ihres Shops einzeln mit der Schaltfläche „Theme-Vorlagen“.

Wir verwenden für diese Anleitung das vorgefertigte Theme, da es alles mit einem Klick einrichtet.

Um ein neues WooCommerce-Theme zu erstellen, gehen Sie zu SeedProd » Theme Builder und klicken Sie auf die Schaltfläche Themes.

Dies öffnet die Theme-Bibliothek von SeedProd. Jedes Theme ist mobilfreundlich und Sie können das Design im Drag-and-Drop-Builder bearbeiten.

Fahren Sie mit der Maus über ein beliebiges Design und klicken Sie auf das Häkchen, um es zu importieren. Wir verwenden hier das „WooCommerce Starter Theme“.

Nach dem Import sehen Sie alle Vorlagen, aus denen Ihre Website besteht. Sie können jede einzelne im Builder von SeedProd bearbeiten, z. B. die Shop-Seite anpassen.

Schritt 3. Fügen Sie das WooCommerce Featured Product Grid hinzu

In diesem Schritt bearbeiten Sie die Shop-Seite und fügen ein Produkt-Raster hinzu, das nur Ihre empfohlenen Produkte anzeigt.

Finden Sie die Shop-Seiten-Vorlage im Theme Builder und klicken Sie auf Design bearbeiten.

Der Seiten-Builder von SeedProd zeigt Blöcke und Abschnitte links und eine Live-Vorschau rechts an.

Klicken Sie auf ein beliebiges Element, um dessen Einstellungen zu bearbeiten.

Klicken Sie auf ein Produkt, um das Produktgitter-Panel zu öffnen, wo Sie:

• Die Spaltenanzahl ändern können
• Produkte nach Typ oder Kategorie anzeigen für fokussiertere Produktlayouts
• Paginierung anzeigen können
• Die Produktreihenfolge ändern können

Sie können Schriftarten, Schriftgrößen, Farben, Abstände und mehr im Tab „Erweitert“ anpassen.

Das Hinzufügen von Inhalten funktioniert auf die gleiche Weise. Ziehen Sie einen Block aus dem linken Bereich und legen Sie ihn auf der Seite ab.

Scrollen Sie im linken Seitenbereich nach unten zum WooCommerce-Blöcke-Panel. Finden Sie dann den Block Hervorgehobene Produkte und ziehen Sie ihn auf Ihre Seite.

Klicken Sie auf den Block, um seine Einstellungen zu öffnen. Er filtert Ihre Produkte automatisch nach dem Status „Empfohlen“.

Alles, was bleibt, ist die Anpassung des Produktgitters an Ihre Bedürfnisse. Sie können hervorgehobene Produkte hervorheben, indem Sie die Abzeichenfarbe, den Bildrand ändern oder eine Überschrift über dem Gitter hinzufügen.

Wenn Sie mit dem Layout zufrieden sind, klicken Sie auf die grüne Schaltfläche Speichern.

Sie können diesen Vorgang wiederholen, um den Rest Ihres Themes anzupassen, einschließlich:

• Produktarchive
• Produktseite
• Kopf- & Fußzeile
• Blog-Seite
• Seitenleiste
• Startseite

Schritt 4. Veröffentlichen Sie Ihr WooCommerce-Theme

Sobald Sie die Einrichtung Ihrer empfohlenen Produkte abgeschlossen haben, sind Sie bereit, live zu gehen.

Gehen Sie dazu zu SeedProd » Theme Builder und schalten Sie den Schalter SeedProd Theme aktivieren auf „Ein“.

Das ist alles! Sie können jetzt Ihren Shop in der Vorschau anzeigen und Ihre hervorgehobenen Produkte live sehen.

Methode 2: Verwenden Sie den WooCommerce Produktempfehlungs-Block

WooCommerce verfügt über einen integrierten Block für hervorgehobene Produkte, den Sie zu jeder Seite oder jedem Beitrag Ihres Online-Shops hinzufügen können. Kein zusätzliches Plugin erforderlich.

Er hat weniger Optionen als SeedProd, ist aber schnell eingerichtet, wenn Sie nur eine einfache Anzeige benötigen.

Um diese Methode zu verwenden, erstellen oder bearbeiten Sie eine Seite und klicken Sie auf das Pluszeichen (+) im WordPress-Blockeditor, um einen neuen Block hinzuzufügen. Geben Sie dann „WooCommerce“ in das Suchfeld ein und klicken Sie auf den Block Hervorgehobenes Produkt.

Wählen Sie von dort ein Produkt zur Anzeige aus und klicken Sie auf Fertig.

Ihr Produkt erscheint sofort auf der Seite.

Die Blockeinstellungen ermöglichen es Ihnen, Folgendes zu steuern:

• Beschreibung
• Preis
• Überlagerung
• Deckkraft der Überlagerung

Der Block „Hervorgehobenes Produkt“ zeigt jeweils ein Produkt an. Für ein Gitter mit mehreren hervorgehobenen Artikeln fügen Sie stattdessen den Block Produktkollektion hinzu und wählen Sie dessen Sammlung „Hervorgehobene Produkte“, die für Sie nach hervorgehobenem Status filtert.

Klicken Sie auf "Veröffentlichen" oder "Aktualisieren", wenn Sie fertig sind. Vorschau Ihrer Seite, um die Produkte live zu sehen.

Wenn Ihr Shop ein klassisches Theme verwendet, können Sie denselben Block verwenden, um hervorgehobene Produkte in Ihrer WooCommerce-Seitenleiste anzuzeigen. Gehen Sie zu Darstellung » Widgets, klicken Sie auf das Pluszeichen in einer beliebigen Seitenleiste und fügen Sie den Block dort hinzu.

Speichern Sie Ihre Änderungen und besuchen Sie dann eine beliebige Seite mit dieser Seitenleiste, um das Widget zu sehen.

Methode 3: Verwenden Sie den WooCommerce Featured Product Shortcode

Die dritte Methode verwendet einen Shortcode. Er funktioniert im klassischen WordPress-Editor oder wenn Sie hervorgehobene Produkte direkt in eine WordPress-Theme-Vorlage einfügen möchten.

Bearbeiten oder erstellen Sie eine Seite und fügen Sie diesen Shortcode in den Editor ein.

[featured_products]

Wenn Sie die Seite in der Vorschau anzeigen, sehen Sie alle Ihre hervorgehobenen Produkte in einem Raster.

Sie können steuern, wie viele Produkte angezeigt werden und wie viele Spalten verwendet werden. Zum Beispiel:

[featured_products limit="2" columns="2"]

Sie können auch nach Kategorie filtern mit category="slug", die Sortierreihenfolge mit orderby="date" oder orderby="popularity" ändern und die Richtung mit order="ASC" oder order="DESC" festlegen.

Die aktuelle Dokumentation von WooCommerce listet nur [products visibility="featured"] auf, was die gleiche Aufgabe erfüllt. Beide Shortcodes funktionieren, aber die Version mit products ist die dokumentierte.

Probieren Sie verschiedene Werte aus, bis Sie ein Layout finden, das funktioniert. Die Optionen sind im Vergleich zu SeedProd begrenzt, aber es ist der schnellste Weg, hervorgehobene Produkte ohne Einrichtung anzuzeigen.

So richten Sie verwandte Produkte in WooCommerce ein (kein Plugin erforderlich)

Hervorgehobene Produkte präsentieren Ihre besten Artikel den Käufern. Verwandte Produkte erledigen die entgegengesetzte Aufgabe: Sie schlagen vor, was jemand als Nächstes wünschen könnte, basierend auf dem Produkt, das er gerade ansieht.

WooCommerce generiert seinen Abschnitt „Verwandte Produkte“ automatisch aus gemeinsamen Kategorien und Tags, sodass Sie diese Vorschläge nicht ohne ein Plugin von Hand auswählen können. Was Sie steuern können, sind Upsells und Cross-Sells, die Sie pro Produkt festlegen.

Ein Upsell ist eine teurere Version des Produkts, das jemand gerade ansieht. Ein Cross-Sell ist ein Produkt, das zu dem im Warenkorb befindlichen passt, wie z. B. eine Hülle, die neben einem Telefon vorgeschlagen wird.

Hier ist, wie sich die Standardeinrichtung mit der Anpassung Ihrer verwandten Produkte mit SeedProd vergleicht:

Merkmal	Standard-WooCommerce	SeedProd Builder
Einrichtungsaufwand	Mittel (Produkt für Produkt)	Einfach (Drag & Drop)
Gestaltungskontrolle	Eingeschränkt	Volle visuelle Kontrolle
Platzierungsoptionen	Nur Produktseite	Produkt, Warenkorb oder irgendwo
Benutzerdefinierte Layouts	Nicht unterstützt	Vollständig anpassbar
Upsells & Cross-Sells	Ja	Ja
Mobile Vorschau	Nein	Ja
Plugin erforderlich?	Nein	Ja (SeedProd)

Beginnen wir mit dem integrierten Weg.

Schritt 1. Verknüpfte Produkte im WooCommerce-Editor hinzufügen

Gehen Sie in Ihrem WordPress-Admin zu Produkte » Alle Produkte und bearbeiten Sie ein beliebiges WooCommerce-Produkt. Scrollen Sie im Produktoptionen-Bereich nach unten zum Abschnitt Produktdaten und finden Sie den Tab Verknüpfte Produkte.

Schritt 2. Upsells und Cross-Sells für jedes Produkt auswählen

Der Abschnitt Verknüpfte Produkte hat 2 Optionen: Upsells und Cross-Sells.

Beginnen Sie, Produktnamen in das gewünschte Feld einzugeben, und klicken Sie auf die richtigen Artikel, wenn sie erscheinen.

Schritt 3. Verwandte Produkte auf der Produktseite in der Vorschau anzeigen

Nachdem Sie Cross-Sells oder Upsells zu Ihren WooCommerce-Produkten hinzugefügt haben, scrollen Sie nach oben und klicken Sie auf die Schaltfläche Änderungen vorschau. Sie sehen die verwandten Produkte unter Ihrer aktuellen Produktbeschreibung.

Diese Methode bietet nicht viele Anpassungsoptionen, aber sie ist eine schnelle Möglichkeit, mit dem Upselling und Cross-Selling zu beginnen. Wenn Sie die Kontrolle darüber haben möchten, wo Vorschläge erscheinen und wie sie aussehen, behandelt der nächste Abschnitt dies.

So passen Sie WooCommerce-verwandte Produkte mit SeedProd an

Der Standardabschnitt für verwandte Produkte befindet sich nur auf Ihren Produktseiten und Sie können sein Aussehen nicht ändern. Mit SeedProd können Sie Produktempfehlungen auf Ihrer Warenkorbseite, Produktseiten oder überall sonst platzieren und sie an Ihren Shop anpassen.

Sie benötigen SeedProd, das mit einem importierten WooCommerce-Theme installiert ist. Wenn Sie dies noch nicht getan haben, folgen Sie zuerst Schritt 1 und 2 in Methode 1.

Schritt 1. Verwandte Produkte zu Ihrem Warenkorbseiten-Layout hinzufügen

Die Warenkorbseite ist ein intelligenter Ort für Empfehlungen, da Käufer dort bereits beschlossen haben zu kaufen. Um Ihre zu bearbeiten, gehen Sie zum Theme Builder-Dashboard, finden Sie die Warenkorb-Vorlage, fahren Sie mit der Maus darüber und klicken Sie auf Design bearbeiten.

Ihre Warenkorbseite wird im selben visuellen Editor geöffnet, den Sie zuvor verwendet haben. Wenn Sie irgendwo auf die Vorschau klicken, können Sie die Einstellungen dieses Blocks anpassen, wie z. B. Typografie, Schaltflächenstile und Feld-Farben des Warenkorb-Blocks.

Scrollen Sie nun zum Abschnitt WooCommerce-Vorlagentags in der linken Seitenleiste und finden Sie den Block Verwandte Produkte. Ziehen Sie den Block per Drag & Drop an die gewünschte Stelle in Ihrer Seitenvorschau.

Innerhalb der Blockeinstellungen können Sie die Spalten anpassen und die Anzahl der verwandten Produkte ändern. Sie können Produkte auch nach Datum, Beliebtheit, Bewertung, Titel und mehr sortieren.

Im Tab Erweitert können Sie das Styling Ihres Blocks für verwandte Produkte anpassen, wie Typografie, Farben, Schaltflächen und Bildschatten.

Wenn Sie mit dem Aussehen zufrieden sind, klicken Sie in der oberen rechten Ecke Ihres Bildschirms auf die Schaltfläche Speichern.

Schritt 2. Upsell-Angebote auf einzelnen Produktseiten anzeigen

Um WooCommerce-Produkte zu verkaufen, verwenden Sie den Block Upsells von SeedProd. Er zieht die Upsells, die Sie zuvor in Ihren WooCommerce-Produkteinstellungen verknüpft haben, also legen Sie diese zuerst fest.

Der Upsells-Block funktioniert nur auf Einzelproduktseiten-Vorlagen. Kehren Sie also zum Theme Builder-Dashboard zurück und bearbeiten Sie Ihre Produktseiten-Vorlage.

Die Vorlage, die wir verwenden, enthält bereits Produktempfehlungen. Entfernen wir also die verwandten Produkte, indem wir auf das Mülleimer-Symbol klicken, um Platz für die Upsells zu schaffen.

Finden Sie als Nächstes den Block Upsells im Abschnitt WooCommerce-Vorlagentags und ziehen Sie ihn auf Ihre Seite.

Sie sehen keine Live-Vorschau dieses Blocks, aber Sie können ihn wie den Block für verwandte Produkte anpassen. Vergessen Sie nicht, auf Speichern zu klicken, wenn Sie fertig sind.

Schritt 3. Veröffentlichen und Vorschau Ihrer verwandten Produkte

Wenn Ihr SeedProd-Theme noch nicht live ist, schalten Sie den Schalter SeedProd-Theme aktivieren ein, genauso wie in Methode 1. Vorschau Ihrer Produkt- und Warenkorbseiten, um die Empfehlungen zu sehen.

Hier ist ein Beispiel für verwandte Produkte auf der Warenkorbseite:

Und hier sind die Upsells auf der Produktseite:

Wenn Sie verwandte Produkte ausblenden möchten, entfernen Sie den Block aus Ihrer Vorlage und speichern Sie erneut.

FAQs zu WooCommerce-Produktempfehlungen und verwandten Produkten

Wie entferne ich den hervorgehobenen Status von einem Produkt in WooCommerce?

Gehen Sie in Ihrem WordPress-Dashboard zu Produkte » Alle Produkte und klicken Sie auf das Sternsymbol neben dem Produkt, um den hervorgehobenen Status zu deaktivieren. Sie können auch "Schnellbearbeitung" verwenden und das Kontrollkästchen Hervorgehobenes Produkt deaktivieren und dann speichern. Das Produkt wird nicht mehr in hervorgehobenen Produktdarstellungen oder Shortcodes angezeigt.

Wie zeige ich nur hervorgehobene Produkte auf meiner WooCommerce-Shop-Seite an?

Der einfachste Weg ist die Verwendung von SeedProd, um Ihre WooCommerce-Shopseite anzupassen und einen Block für hervorgehobene Produkte hinzuzufügen, der automatisch nach hervorgehobenem Status filtert. Wenn Sie die Standard-Shop-Schleife bevorzugen, benötigen Sie ein Plugin oder Code-Snippet, das Produkte nach dem hervorgehobenen Flag filtert.

Kann ich die Anzahl der angezeigten hervorgehobenen Produkte begrenzen?

Ja. Mit der Shortcode-Methode fügen Sie limit="4" hinzu, um die Anzahl festzulegen: [featured_products limit="4"]. Mit dem Produktraster-Block von SeedProd legen Sie die Produktanzahl direkt im Einstellungsbereich des Blocks fest, ohne Code zu benötigen.

Erscheinen hervorgehobene WooCommerce-Produkte automatisch auf meiner Homepage?

Nein. Das Markieren eines Produkts als hervorgehoben gibt ihm nur diesen Status in WooCommerce. Sie müssen immer noch einen Block, Shortcode oder ein Widget zu einer Seite hinzufügen, damit sie angezeigt werden. Die meisten Shop-Besitzer fügen hervorgehobene Produkte manuell zu ihrer Shop-Seite oder Homepage hinzu, indem sie eine der drei Methoden in dieser Anleitung verwenden.

Was ist der Unterschied zwischen Upsells und Cross-Sells in WooCommerce?

Upsells sind höherwertige oder verbesserte Versionen des aktuellen Produkts und werden auf der einzelnen Produktseite angezeigt. Cross-Sells sind ergänzende Produkte, die auf der Warenkorbseite während des Checkouts erscheinen. Sie können beides im Abschnitt Verknüpfte Produkte beim Bearbeiten eines Produkts hinzufügen.

Gibt es eine Begrenzung für verwandte Produkte in WooCommerce?

Es gibt keine strenge Grenze, aber es ist am besten, es bei 3 bis 5 Artikeln zu belassen. Zu viele können Käufer überfordern und die Seite unübersichtlich machen. Mit Tools wie SeedProd können Sie genau auswählen, wie viele verwandte Produkte angezeigt werden sollen und wo sie angezeigt werden sollen.

Weitere Möglichkeiten zur Anpassung von WooCommerce

Möchten Sie mehr mit Ihrem WooCommerce-Shop machen?

Hier sind einige Anleitungen, die Ihnen helfen können:

• So passen Sie den WooCommerce-Tab „Zusätzliche Informationen“ an
• So passen Sie Ihre WooCommerce-Warenkorbseite an
• So fügen Sie Produktseiten in WooCommerce Sternebewertungen hinzu
• So zeigen Sie Produktkategorien und -tags in WooCommerce an
• So erhalten und zeigen Sie Produktbeschreibungen in WooCommerce an
• So fügen Sie benutzerdefinierte In-den-Warenkorb-Schaltflächen in WooCommerce hinzu
• So erstellen Sie eine WooCommerce-Dankesseite (einfach)
• So beheben Sie, dass WooCommerce „Warenkorb anzeigen“ nicht funktioniert
• So blenden Sie nicht vorrätige Produkte in WooCommerce aus

Sie wissen jetzt, wie Sie hervorgehobene Produkte auf drei Arten anzeigen und wie Sie verwandte Produkte, Upsells und Cross-Sells genau dort platzieren, wo Käufer sie sehen werden. Wählen Sie die Methode, die zu Ihrem Shop passt.

Bereit, Ihren Produktempfehlungen einen individuellen Look zu geben? Sie müssen keine einzige Zeile Code anfassen. Holen Sie sich SeedProd und beginnen Sie noch heute mit der Gestaltung Ihres Shops.

Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.