So fügen Sie ganz einfach einen gleitenden Seiten-Warenkorb in WooCommerce hinzu

Eine der größten Herausforderungen, mit denen WooCommerce-Shopbesitzer konfrontiert sind, ist der Warenkorbabbruch.

Kunden durchsuchen Ihre Produkte, legen Artikel in ihren Warenkorb und verschwinden dann, wenn sie zur Warenkorbseite weitergeleitet werden. Das passiert öfter, als Sie denken.

Eine einfache Möglichkeit, diese Erfahrung zu verbessern, ist das Hinzufügen eines schwebenden Seiten-Warenkorbs.

Dies hält die Kunden auf derselben Seite, während sie ihren Warenkorb in einem kleinen, ausklappbaren Bereich überprüfen können. Es ist schneller, weniger störend und macht den Kaufprozess reibungsloser.

Wir haben gesehen, dass viele Ladenbesitzer ihn nutzen, um ihren Checkout-Ablauf zu verbessern und mehr Verkäufe zu fördern.

In diesem Leitfaden zeigen wir Ihnen, wie Sie Ihrem WooCommerce-Shop einen schwebenden Seiten-Warenkorb mit einfachen Methoden hinzufügen, die keine technischen Kenntnisse erfordern.

Warum einen gleitenden Seitenkorb in WooCommerce hinzufügen?

Das Hinzufügen eines gleitenden Seitenkorbs ist eine der besten Möglichkeiten, Warenkorbabbrüche zu reduzieren und das Kundenerlebnis in Ihrem WooCommerce-Shop zu verbessern.

Indem Sie den Käufern ermöglichen, ihren Warenkorb anzuzeigen, ohne auf eine separate Seite weitergeleitet zu werden, entfernen Sie Reibungsverluste im Kaufprozess und erleichtern ihnen den Abschluss ihres Kaufs.

Ein gleitender Seitenkorb ist ein Panel, das normalerweise von der rechten Seite des Bildschirms erscheint, wenn ein Kunde einen Artikel in seinen Warenkorb legt. Sie können ihn auch jederzeit öffnen, indem Sie auf das Warenkorbsymbol klicken.

In diesem Panel können Käufer oft Artikel hinzufügen oder entfernen, Gutscheincodes anwenden und sehen, wie sich ihr Zwischensumme in Echtzeit aktualisiert.

Dies hält sie auf der Produkt- oder Shop-Seite und ermutigt sie, weiter einzukaufen oder direkt zur Kasse zu gehen.

In diesem Sinne sehen wir uns an, wie Sie einen gleitenden Seiten-Warenkorb in WooCommerce hinzufügen können. Verwenden Sie die Schnelllinks unten, um direkt zu der Methode zu springen, die Sie verwenden möchten.

• Method 1. How to Add a Sliding Side Cart in WooCommerce Using a Free Plugin
• Method 2. Add an Advanced Sliding Side Cart (With Upsells, Cross-Sells, and Rewards)
• Video-Tutorial
• Häufig gestellte Fragen zum Hinzufügen eines gleitenden Warenkorbs in WooCommerce

Lass uns anfangen!

Methode 1. So fügen Sie einen gleitenden Seiten-Warenkorb in WooCommerce mit einem kostenlosen Plugin hinzu

Der schnellste und einfachste Weg, einen gleitenden Seiten-Warenkorb zu erstellen, ist die Verwendung von Sliding WooCommerce Cart By FunnelKit. Dieses kostenlose Plugin ermöglicht es Ihnen, ein Warenkorb-Symbol in Ihrem Online-Shop hinzuzufügen.

Käufer können auf den Button klicken, um den schwebenden Warenkorb zu öffnen.

Sie können die Farben, Rahmen, Schaltflächen, Nachrichten und mehr des Warenkorbs ändern.

Es gibt eine Menge Optionen, sodass Sie einen Warenkorb erstellen können, der perfekt zu jedem WordPress-Theme passt.

Außerdem ergaben unsere Tests, dass Sie den Warenkorb-Button auf Ihrer gesamten Website anzeigen, ihn auf WooCommerce-Seiten beschränken oder den Button mit einem Shortcode zu bestimmten Seiten und Beiträgen hinzufügen können.

Schritt 1: Installieren und Aktivieren des FunnelKit-Plugins

Zuerst müssen Sie das Sliding WooCommerce Cart By FunnelKit Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unseren Leitfaden zur Installation eines WordPress-Plugins.

Schritt 2: Grundlegende Warenkorb-Einstellungen konfigurieren

Nach der Aktivierung gehen Sie zu FunnelKit » Warenkorb. Sie sehen eine Vorschau des gleitenden Seiten-Warenkorbs auf der rechten Seite des Bildschirms.

Sie können den Warenkorb jetzt an Ihre Bedürfnisse anpassen.

Zunächst können Sie entscheiden, ob das Warenkorbsymbol auf Ihrer gesamten Website oder nur auf WooCommerce-Seiten angezeigt werden soll.

Wenn Sie „Gesamte Website“ auswählen, können Käufer den gleitenden Warenkorb von jeder Seite aus öffnen. Dies ist also eine gute Wahl für Online-Marktplätze und Geschäfte.

Ihre Website kann jedoch viele Nicht-E-Commerce-Inhalte enthalten. Sie betreiben zum Beispiel vielleicht einen beliebten WordPress-Blog, verkaufen aber über WooCommerce Merchandise an Ihre Fans.

Das Anzeigen eines Warenkorb-Buttons auf jedem einzelnen Blogbeitrag kann störend sein. In diesem Fall können Sie die Radio-Schaltfläche 'WooCommerce-Seiten' auswählen.

Eine weitere Option ist „Keine“, womit das Warenkorbsymbol vollständig ausgeblendet wird.

Wenn Sie die Option 'Keine' wählen, können Sie das Symbol mit einem Shortcode zu jeder Seite, jedem Beitrag oder jedem Widget-fähigen Bereich hinzufügen. Sie können das Symbol auch zu Ihrem Navigationsmenü hinzufügen.

Wir zeigen Ihnen später im Beitrag, wie das geht, aber Sie können „Keine“ auswählen, wenn Sie das Warenkorb-Symbol manuell hinzufügen möchten.

Nachdem Sie diese Entscheidung getroffen haben, wählen Sie 'Unten links' oder 'Unten rechts', je nachdem, wo Sie die Warenkorb-Schaltfläche anzeigen möchten. Hier kann es hilfreich sein, zu überprüfen, wie die Schaltfläche auf Ihrem Online-Shop aussehen wird, indem Sie 'Vorschau auf der Seite' auswählen.

Standardmäßig zeigt das Plugin oben im gleitenden Seiten-Warenkorb „Warenkorb überprüfen“ an.

Sie können dies durch Ihre eigene Nachricht ersetzen, indem Sie in das Feld 'Warenkorb-Überschrift' tippen.

Wenn Sie keine Überschrift anzeigen möchten, lassen Sie das Feld einfach leer.

Standardmäßig zeigt FunnelKit das Warenkorbsymbol an, bevor der Käufer Artikel in seinen Warenkorb legt.

Wenn Sie möchten, können Sie das Symbol ausblenden, bis der Besucher Artikel hinzufügt. Klicken Sie einfach auf den Umschalter „Warenkorb-Symbol ausblenden“, sodass er blau wird.

Das ist alles, was Sie brauchen, um einen einfachen gleitenden Seiten-Warenkorb zu erstellen, aber es gibt Einstellungen, die Ihnen noch mehr Verkäufe bringen können. Vor diesem Hintergrund werfen wir einen Blick auf die erweiterten Funktionen von FunnelKit.

Schritt 3: Gutscheine im gleitenden Warenkorb aktivieren

Gutscheine sind eine großartige Möglichkeit, mehr Verkäufe zu erzielen und die Kundenbindung aufzubauen.

Der gleitende Warenkorb ermöglicht es Käufern, Gutscheincodes direkt einzugeben. Diese Funktion funktioniert mit den Standardgutscheinen, die Sie in WooCommerce erstellen können. Sie ist auch mit Plugins wie Advanced Coupons kompatibel, wenn Sie komplexere Angebote erstellen möchten.

Wenn der Kunde auf „Anwenden“ klickt, zeigt der gleitende Warenkorb an, wie viel er gespart hat.

Indem Sie den Kunden den Rabatt sofort anzeigen, können Sie die Abbruchrate des Warenkorbs reduzieren und sie ermutigen, mehr Artikel in ihren Korb zu legen.

Sie können diese Codes mit der integrierten WooCommerce-Gutscheinfunktion oder einem Gutscheincode-Plugin erstellen.

Um das Gutscheinfeld hinzuzufügen, klicken Sie auf die Option 'Gutscheinfeld aktivieren', die es von Grau (deaktiviert) auf Blau (aktiviert) umstellt.

Danach können Sie zwischen den Layouts „Minimiert“ und „Erweitert“ wechseln.

Aktivieren Sie einfach das richtige Kontrollkästchen neben „Anzeigen“.

Minimiert nimmt weniger Platz ein, ist also weniger ablenkend, aber Käufer müssen den Gutscheinbereich erweitern, bevor sie Codes eingeben können.

Im folgenden Bild sehen Sie das minimierte Layout:

Nach der Auswahl eines Layouts können Sie den Text ändern, den FunnelKit für die Überschrift der Gutscheinbox, den Platzhaltertext für den Rabatt und den Schaltflächentext verwendet.

Schritt 4: Warenkorb-Zusammenfassung anpassen

Die Warenkorbzusammenfassung zeigt den Kunden, wie viel ihr Einkauf kosten wird. Dies hilft, die Abbruchrate des Warenkorbs zu reduzieren, da es beim Bezahlen keine bösen Überraschungen gibt.

Aus diesem Grund empfehlen wir, die Option 'Zwischensumme anzeigen' zu aktivieren.

Wenn Sie jedoch den Seitenkorb vereinfachen möchten, können Sie auf den Schalter 'Zwischensumme anzeigen' klicken, um ihn zu deaktivieren.

Sie können auch alle Einsparungen anzeigen, für die der Kunde qualifiziert ist, einschließlich Rabatten von Gutscheinen, die er angewendet hat.

Auf diese Weise können Sie FOMO zur Steigerung der Konversionen nutzen, insbesondere wenn die Einsparungen zeitlich begrenzt sind.

Sie können beispielsweise Coupons in WooCommerce planen, sodass der Kunde sie nur für eine begrenzte Zeit verwenden kann.

Wenn Sie diese Informationen lieber aus dem gleitenden Seiten-Warenkorb entfernen möchten, können Sie das 'Ersparnisse anzeigen'-Toggle deaktivieren.

Sie können auch den 'Spartext' und den 'Versandtext' durch Ihre eigenen benutzerdefinierten Nachrichten ersetzen.

Schritt 5: Call-to-Action des Warenkorbs anpassen

Der gleitende Seiten-Warenkorb verfügt über eine standardmäßige Checkout-Schaltfläche, aber Sie können diese Call-to-Action-Schaltfläche anpassen, um mehr Conversions zu erzielen. Zunächst können Sie ein Checkout-Symbol über den Umschalter „Checkout-Symbol aktivieren“ hinzufügen.

Dies kann besonders nützlich sein, wenn Sie eine mehrsprachige WordPress-Website erstellen.

Sie können den Warenkorb-Preis auch über den Schalter „Warenkorb-Preis aktivieren“ zum Checkout-Button hinzufügen.

Dies hilft den Käufern, die Kosten des Warenkorbs zu verfolgen, insbesondere wenn Sie den Zwischensummenbetrag aus dem Warenkorb-Zusammenfassungsbereich entfernt haben.

Standardmäßig fügt FunnelKit am unteren Rand des gleitenden Seiten-Warenkorbs einen Link „Weiter einkaufen“ hinzu. Sie können diesen Text durch Ihre eigene Nachricht ersetzen, indem Sie in das Feld „Text für ‚Weiter einkaufen‘“ eingeben.

Wählen Sie danach aus, ob dieser Link nur das Seiten-Warenkorb-Panel schließen oder den Käufer zu Ihrer WooCommerce-Shop-Seite weiterleiten soll.

Die meisten Käufer erwarten, den Schiebe-Warenkorb zu verlassen. Daher empfehlen wir die Auswahl der Schaltfläche „Seiten-Warenkorb schließen“.

Wenn Sie 'Zum Shop weiterleiten' auswählen, möchten Sie möglicherweise den Text 'Weiter einkaufen' ändern, damit klar ist, was passiert, wenn Kunden auf den Link klicken.

Schritt 6: Benutzerdefinierten leeren Warenkorb-Bildschirm erstellen

Es ist möglich, die Warenkorb-Schaltfläche auszublenden, bis der Käufer mindestens einen Artikel in seinen Warenkorb gelegt hat, indem Sie dem oben beschriebenen Prozess folgen. Wenn Sie die Schaltfläche jedoch nicht ausblenden, sehen Kunden manchmal einen leeren Warenkorb-Bildschirm.

Sie können den Titel, die Beschreibung und den Schaltflächentext mithilfe der Einstellungen im Abschnitt 'Leerer Warenkorb' ändern. Typischerweise möchten Sie die Kunden zum Einkaufen ermutigen. Zum Beispiel könnten Sie Dinge erwähnen, die Sie anbieten, wie z. B. kostenlosen Versand oder eine Geld-zurück-Garantie.

Sie könnten dem Käufer sogar einen Gutscheincode geben, wie z. B. einen Kaufe eins, erhalte eins gratis-Rabatt.

Sie können auch wählen, ob der Button „Jetzt einkaufen“ den Kunden zur WooCommerce-Shop-Seite weiterleitet oder einfach das Seitenfeld schließt.

Wir empfehlen die Auswahl von „Zum Shop weiterleiten“, da dies es den Käufern erleichtert, Artikel in ihren Warenkorb zu legen.

Schritt 7: Warenkorb-Symbol überall auf Ihrer Website hinzufügen

Wenn Sie mehr Kontrolle darüber haben möchten, wo das Warenkorb-Symbol erscheint, können Sie es mit einem Shortcode (ein kleiner Codeausschnitt in eckigen Klammern, der dynamische Inhalte zu Ihrer Website hinzufügt) zu jeder Seite, jedem Beitrag oder jedem Widget-Bereich hinzufügen.

Sie können es auch zu Ihrem Website-Menü hinzufügen. Dies ist eine gute Wahl, wenn Sie im Einstellungsbereich 'Icon Visibility' 'None' ausgewählt haben, nachdem Sie den oben beschriebenen Prozess befolgt haben.

Wenn Sie „WooCommerce-Seiten“ ausgewählt haben, gibt es auch eine Möglichkeit, das Warenkorbsymbol zu anderen wichtigen Bereichen Ihrer Website hinzuzufügen. Zum Beispiel könnten Sie das Symbol zu Ihrer benutzerdefinierten Homepage oder zum Kontaktformular hinzufügen.

Zuerst können Sie 'Warenkorb-Menü' auswählen und dann den Schalter 'Warenkorb-Menü aktivieren' umlegen.

Sie können jetzt ändern, wie das Symbol aussieht, indem Sie eine der Symbolvorlagen auswählen und entscheiden, ob die Produktanzahl und der Warenkorb-Gesamtbetrag als Teil des Symbols angezeigt werden sollen. Diese Informationen können Besuchern helfen, ihre Warenkörbe im Auge zu behalten.

Sie können auch die Symbol- und Textgrößen ändern. Während Sie Änderungen vornehmen, wird die kleine Vorschau automatisch aktualisiert, sodass Sie verschiedene Einstellungen ausprobieren können, um zu sehen, was am besten aussieht.

Wenn Sie mit dem Aussehen des schwebenden Warenkorbsymbols zufrieden sind, klicken Sie auf die Schaltfläche „Speichern“.

Sie können das Symbol jetzt mit dem Code neben „Shortcode einbetten“ zu jeder Seite, jedem Beitrag oder jedem Widget-Bereich hinzufügen.

Weitere Informationen zum Platzieren des Shortcodes finden Sie in unserem Leitfaden zum Hinzufügen eines Shortcodes in WordPress.

Eine andere Möglichkeit ist, das Symbol zu Ihrem Navigationsmenü Ihrer Website hinzuzufügen. Auf diese Weise ist der schwebende Seiten-Warenkorb immer leicht zugänglich, ohne vom Hauptseiteninhalt abzulenken.

Um dies zu tun, öffnen wir das Dropdown-Menü „Zum Menü hinzufügen“ und wählen das Menü aus, das Sie verwenden möchten.

Klicken Sie danach einfach auf die Schaltfläche „Speichern“.

Wenn Sie nun Ihre WordPress-Website besuchen, sehen Sie das Warenkorbsymbol im Navigationsmenü.

Schritt 8: Eigene Farben und Branding hinzufügen

Möglicherweise möchten Sie die Farben des gleitenden Seiten-Warenkorbs ändern, damit sie besser zu Ihrem WooCommerce-Theme oder Branding passen.

Um die Textfarbe, Buttonfarbe, Linkfarbe und mehr zu ändern, klicken Sie auf „Styling“.

Und um eine der Standardfarben zu ändern, klicken Sie einfach darauf. Dies öffnet ein Popup, in dem Sie verschiedene Farben ausprobieren können.

Im folgenden Bild passen wir zum Beispiel den Rand an.

Eine weitere Option ist die Eingabe eines Hex-Codes in das Feld „Hex“. Dies ist perfekt, wenn Sie bereits einen bestimmten Farbton im Sinn haben.

Wenn Sie nicht wissen, welchen Hex-Code Sie verwenden sollen, kann es hilfreich sein, eine Website wie HTML Color Codes zu verwenden. Hier können Sie verschiedene Farben erkunden und dann einen Code erhalten, den Sie einfach in das FunnelKit-Plugin einfügen können.

Wenn Sie sich immer noch nicht sicher sind, welche Farben Sie verwenden sollen, dann finden Sie in unserem Leitfaden zur Auswahl eines perfekten Farbschemas für Ihre WordPress-Website.

Beachten Sie, dass das endgültige Erscheinungsbild je nach Ihrem WordPress-Theme variieren kann, aber Sie können diese Styling-Optionen verwenden, um eine perfekte Anpassung zu erzielen.

Schritt 9: Einen responsiven gleitenden Seiten-Warenkorb erstellen

Laut unserem Internetnutzungsbericht nutzen über 90 % der weltweiten Internetnutzer ein Mobilgerät, um online zu gehen. Vor diesem Hintergrund sollten Sie sicherstellen, dass der gleitende Seiten-Warenkorb auf Smartphones und Tablets genauso gut aussieht wie auf Desktop-Computern.

Hier kann es hilfreich sein, die Breite des Warenkorbs zu ändern, damit er den kleinen Bildschirm eines Mobilgeräts nicht vollständig ausfüllt. Dazu müssen Sie den Tab „Styling“ öffnen und dann nach „Cart Preview Mobile Width“ suchen.

Möglicherweise möchten Sie verschiedene Werte in dieses Feld eingeben. Wenn Sie die Standardeinstellungen ändern, ist es eine gute Idee, die mobile Version Ihrer WordPress-Website vom Desktop aus zu überprüfen, um sicherzustellen, dass Sie mit den Ergebnissen zufrieden sind.

Während Sie sich auf diesem Bildschirm befinden, können Sie auch die Breite des gleitenden Seiten-Warenkorbs auf dem Desktop ändern. Ändern Sie dazu einfach die Zahl im Feld „Warenkorb-Vorschau-Desktop-Breite“.

Schritt 10: Ihren gleitenden Seiten-Warenkorb veröffentlichen

Wenn Sie mit der Einrichtung des schwebenden Seitenkorbs zufrieden sind, ist es an der Zeit, ihn live zu schalten. Klicken Sie einfach auf den Schieberegler 'Warenkorb aktivieren', damit er blau wird.

Wenn Sie jetzt Ihren Online-Shop besuchen, sehen Sie den schwebenden Warenkorb live.

Wenn Sie den schwebenden Seiten-Warenkorb jederzeit entfernen möchten, gehen Sie einfach zurück zu FunnelKit » Warenkorb im WordPress-Dashboard. Klicken Sie dann auf „Warenkorb-Slider aktivieren“ zum Deaktivieren.

Methode 2. Erweiterten schwebenden Seiten-Warenkorb hinzufügen (mit Upsells, Cross-Sells und Prämien)

Wenn Sie den durchschnittlichen Bestellwert in Ihrem Shop erhöhen möchten, können Sie dem Schiebe-Warenkorb leistungsstarke Upsell-, Cross-Selling- und Belohnungsfunktionen hinzufügen. Diese erweiterten Optionen sind in der Premium-Version von FunnelKit Cart verfügbar.

Mit diesem Plugin können Sie verwandte Produkte empfehlen, wann immer ein Kunde einen Artikel in seinen Warenkorb legt.

Sie können auch einzigartige Belohnungen erstellen, wie z. B. Gutscheincodes und kostenlose Geschenke, und diese dann im gleitenden Warenkorb bewerben.

FunnelKit kann sogar verfolgen, wie viel mehr der Kunde ausgeben muss, um die nächste Belohnung freizuschalten.

Schritt 1: Installieren und Aktivieren Sie die FunnelKit Pro Plugins

Um diese erweiterten Funktionen zu erhalten, benötigen Sie das Paket FunnelKit Funnel Builder Pro (das Plus-Abonnement oder höher). Dieses Paket enthält drei separate Plugins, die zusammenarbeiten, und Sie müssen alle installieren:

• FunnelKit Funnel Builder: Dies ist das Kern-Plugin.
• FunnelKit Funnel Builder Pro: Dies ist das Premium-Add-on, das Upsells, Belohnungen und andere Funktionen freischaltet.
• FunnelKit Cart: Dies ist das spezifische Modul, das den gleitenden Seiten-Warenkorb antreibt.

Nach dem Kauf eines Abonnements melden Sie sich bei Ihrem FunnelKit-Konto an, um die drei Plugins herunterzuladen. Dann können Sie sie installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unseren Leitfaden zur Installation eines WordPress-Plugins.

Schritt 2: Aktivieren Sie Ihren Lizenzschlüssel

Gehen Sie nach der Aktivierung zu FunnelKit » Einstellungen und fügen Sie Ihren Lizenzschlüssel in das Feld „FunnelKit Funnel Builder Pro“ ein.

Diese Informationen finden Sie, indem Sie sich auf der FunnelKit-Website in Ihr Konto einloggen. Klicken Sie dann auf 'Aktivieren'.

Gehen Sie danach einfach zu FunnelKit » Warenkorb.

Sie können den Seiten-Warenkorb jetzt konfigurieren und anpassen, indem Sie den gleichen Prozess wie in Methode 1 beschrieben befolgen. Wenn Sie mit der Einrichtung des schwebenden Seiten-Warenkorbs zufrieden sind, können Sie Upsells, Cross-Sells und Belohnungen hinzufügen.

Schritt 3: Aktivieren Sie Upsells und Cross-Sells

Wenn Kunden den gleitenden Seiten-Warenkorb öffnen, können Sie ihnen einzigartige Upsell- und Cross-Sell-Angebote basierend auf den Artikeln in ihrem Warenkorb anzeigen.

Upselling ist, wenn Sie Käufer ermutigen, ein höherpreisiges Produkt anstelle desjenigen zu kaufen, das sie bereits in ihrem Warenkorb haben.

Stellen Sie sich zum Beispiel vor, ein Kunde legt eine wasserdichte Jacke in seinen Warenkorb. Sie könnten eine hochwertigere Jacke vorschlagen, die haltbarer, vielseitiger und in verschiedenen Farben erhältlich ist.

Cross-Selling bedeutet, dass Sie ein Produkt bewerben, das mit etwas zusammenhängt, das der Kunde bereits kauft. Wenn er zum Beispiel eine Grußkarte in seinen Warenkorb legt, könnten Sie ihn ermutigen, auch Schokolade oder Blumen zu kaufen.

WooCommerce verfügt über eine Funktion für verknüpfte Produkte, mit der Sie Upsells und Cross-Sells erstellen können. Weitere Informationen finden Sie in unserem Leitfaden zum Upselling von Produkten in WooCommerce.

Sie können jedoch auch Upsells und Cross-Sells direkt vom FunnelKit-Dashboard aus erstellen. Dies ist die schnellste Option, daher werden wir sie in dieser Anleitung verwenden.

Zunächst müssen Sie auf die Option „Upsells“ klicken und dann „Warenkorb-Upsells aktivieren“ auswählen.

Schritt 4: Ordnen Sie Upsells und Cross-Sells Produkten zu

Scrollen Sie danach zum Abschnitt „Upsells und Cross-Sells“.

Hier sehen Sie alle Produkte in Ihrem Online-Shop.

Klicken Sie einfach auf den Artikel, zu dem Sie ein oder mehrere verknüpfte Produkte hinzufügen möchten.

Dann können Sie entweder auf „Upsell hinzufügen“ oder „Cross-Sell hinzufügen“ klicken, je nachdem, welche Art von Aktion Sie erstellen möchten.

Geben Sie im Popup das Produkt ein, das Sie als Upsell oder Cross-Sell verwenden möchten. Wenn das richtige Produkt erscheint, klicken Sie einfach darauf.

Um mehrere Produkte anzubieten, folgen Sie einfach demselben oben beschriebenen Prozess.

Wenn das erledigt ist, klicken Sie einfach auf die Schaltfläche 'Hinzufügen'.

Sie können jetzt einzigartige Cross-Selling- und Upselling-Kampagnen für jedes Produkt in Ihrem Shop erstellen, indem Sie einfach denselben oben beschriebenen Prozess befolgen.

Schritt 5: Passen Sie die Anzeige von Upsells und Cross-Sells an

Jetzt sind Sie bereit, anzupassen, wie die Upsell- und Cross-Sell-Angebote auf Ihrem gleitenden Seiten-Warenkorb angezeigt werden.

Versuchen Sie zunächst, zwischen verschiedenen Stilen zu wechseln, indem Sie auf die Optionsfelder neben „Anzeige“ klicken.

Die Live-Vorschau wird automatisch aktualisiert, sodass Sie verschiedene Stile ausprobieren können, um zu sehen, welcher Ihnen am besten gefällt.

Standardmäßig zeigt FunnelKit sowohl Upsells als auch Cross-Sells im schwebenden Seiten-Warenkorb an. Wenn Sie möchten, können Sie nur Upsells oder nur Cross-Sells über die Radio-Buttons unter „Produkttyp-Empfehlung“ anzeigen.

Als Nächstes können Sie die Überschrift ändern, die FunnelKit über der Upsell- oder Cross-Sell-Werbung anzeigt, indem Sie sie in das Feld 'Überschrift' eingeben.

Beachten Sie einfach, dass FunnelKit für beide Arten von Aktionen die gleiche Überschrift verwendet.

Danach können Sie die maximale Anzahl der vorgeschlagenen Produkte festlegen, die FunnelKit anzeigen soll, indem Sie in das Feld „Maximale Upsells anzeigen“ eingeben.

Wo immer möglich, ist es eine gute Idee, für jedes Produkt einzigartige Upsell- und Cross-Sell-Angebote zu erstellen. Wenn Ihr Online-Shop jedoch viele Artikel hat, ist dies möglicherweise nicht möglich.

In diesem Sinne können Sie ein Standard-Upsell-Produkt festlegen, das FunnelKit bewirbt, wenn keine verknüpften Produkte verfügbar sind. Geben Sie dazu einfach den Namen eines Produkts in das Feld 'Standard-Upsells' ein. Wenn das richtige Produkt erscheint, klicken Sie einfach darauf.

Wenn Sie mit den erstellten Upsell- und Cross-Sell-Angeboten zufrieden sind, vergessen Sie nicht, auf 'Speichern' zu klicken, um Ihre Änderungen zu speichern.

Schritt 6: Erstellen und konfigurieren Sie freischaltbare Belohnungen

Kunden einen Grund zu geben, mehr auszugeben, kann oft den durchschnittlichen Bestellwert erhöhen. FunnelKit ermöglicht es Ihnen, verschiedene Belohnungen zu erstellen, die Kunden freischalten, sobald ihr Warenkorb-Zwischensumme einen bestimmten Betrag erreicht.

Sie könnten zum Beispiel kostenlosen Versand anbieten, wenn der Kunde einen Mindestumsatz überschreitet. FunnelKit zeigt dem Kunden sogar an, wie viel er noch ausgeben muss, um seinen Preis freizuschalten.

Dies ist eine einfache Möglichkeit, mehr Verkäufe zu erzielen und Kundenbindung mit Gamification aufzubauen.

FunnelKit ermöglicht es Ihnen, drei verschiedene Belohnungen anzubieten: kostenlosen Versand, einen Rabatt und ein kostenloses Geschenk.

Um kostenlosen Versand anzubieten, müssen Sie den Versand bereits in Ihrem WooCommerce-Shop eingerichtet haben. Schritt-für-Schritt-Anleitungen finden Sie in unserem Leitfaden WooCommerce ganz einfach.

In der Zwischenzeit wendet die 'Rabatt'-Belohnung automatisch einen Gutschein an, wenn der Kunde den Mindestumsatz erreicht. Wenn Sie diese Belohnung anbieten möchten, müssen Sie einen prozentualen Rabattgutschein erstellen, entweder mit der integrierten WooCommerce-Gutscheinfunktion oder einem WordPress-Gutschein-Plugin.

Schritt-für-Schritt-Anleitungen finden Sie in unserem Leitfaden zur Erstellung von Smart-Gutscheinen.

Danach sind Sie bereit, eine Prämie zu erstellen, indem Sie in den FunnelKit-Einstellungen 'Prämien' auswählen und dann auf 'Prämie erstellen' klicken.

Sie können nun das Dropdown-Menü „Typ“ öffnen und die Art der Belohnung auswählen, die Sie erstellen möchten: Kostenloser Versand, ein Rabatt oder ein kostenloses Geschenk.

Unabhängig davon, welche Option Sie wählen, können Sie den Text, den FunnelKit den Kunden anzeigt, ändern, indem Sie in das Feld „Nachricht“ eingeben.

Wenn Sie Änderungen vornehmen, seien Sie vorsichtig, dass Sie {{remaining_amount}} nicht bearbeiten, da FunnelKit damit anzeigen kann, wie viel der Kunde noch ausgeben muss.

Wenn Sie einen Rabatt anbieten, stellen Sie sicher, dass Sie die Nachricht ändern, um anzuzeigen, wie viel der Kunde sparen wird.

Wenn dies erledigt ist, geben Sie eine Zahl in das Feld „Betrag für Belohnung“ ein. Dies ist der Betrag, den Käufer ausgeben müssen, um die Belohnung freizuschalten.

Wenn Sie einen prozentualen Rabatt anbieten, müssen Sie angeben, welchen Gutschein FunnelKit automatisch anwenden soll.

Geben Sie im Feld „Gutschein“ den Gutschein ein, den Sie verwenden möchten. Wenn der richtige Code angezeigt wird, klicken Sie darauf.

Nun wendet FunnelKit den Gutschein automatisch an, wenn jemand den Mindestbetrag erreicht.

Bieten Sie stattdessen ein kostenloses Geschenk an? Dann können Sie mit der Eingabe des Namens des Geschenks in das Feld „Produkt“ beginnen.

Wenn das richtige Produkt angezeigt wird, klicken Sie darauf.

Nun fügt FunnelKit diesen Artikel sofort dem Warenkorb des Kunden hinzu, sobald dieser den Mindestumsatz erreicht hat.

Um weitere Prämien hinzuzufügen, klicken Sie einfach auf 'Weitere Prämie erstellen'.

Sie können nun die Belohnung für Rabatt, kostenloses Geschenk oder kostenlosen Versand konfigurieren, indem Sie denselben Prozess wie oben beschrieben befolgen.

Standardmäßig zeigt FunnelKit die folgende Nachricht an, sobald ein Kunde alle Auszeichnungen erhalten hat: „Glückwunsch! Sie haben alle Belohnungen freigeschaltet.“

Um stattdessen eine andere Nachricht anzuzeigen, geben Sie einfach in das Feld „Wenn alle Belohnungen freigeschaltet sind“ ein. Sie könnten dem Kunden sogar einen besonderen Bonus für das Freischalten aller Ihrer Belohnungen anbieten, z. B. einen exklusiven Gutscheincode für seinen nächsten Einkauf.

Wenn Sie mit der Einrichtung Ihrer Prämien zufrieden sind, klicken Sie auf die Schaltfläche „Speichern“.

Schritt 7: Veröffentlichen Sie Ihren erweiterten gleitenden Seiten-Warenkorb

Wenn Sie bereit sind, den gleitenden Seiten-Warenkorb live zu schalten, klicken Sie einfach auf den Schalter „Warenkorb aktivieren“.

Wenn Sie den gleitenden Seiten-Warenkorb jederzeit entfernen möchten, kehren Sie einfach im WordPress-Dashboard zu FunnelKit » Warenkorb zurück. Klicken Sie dann auf das 'Warenkorb aktivieren'-Toggle, um es zu deaktivieren.

Video-Tutorial

Bevor Sie gehen, möchten Sie vielleicht unser Video-Tutorial darüber ansehen, wie Sie einen Schiebe-Warenkorb zu Ihrem WooCommerce-Shop hinzufügen.

WPBeginner abonnieren

Häufig gestellte Fragen zum Hinzufügen eines gleitenden Warenkorbs in WooCommerce

Hier sind einige Fragen, die unsere Leser häufig gestellt haben, bevor sie einen gleitenden Warenkorb zu ihren WooCommerce-Shops hinzugefügt haben:

Ersetzt ein gleitender Seiten-Warenkorb die Standard-Warenkorbseite von WooCommerce?

Nein, es ersetzt nicht die Standard-Warenkorbseite. Der gleitende Seiten-Warenkorb bietet Kunden eine alternative, bequemere Möglichkeit, ihren Warenkorb von jeder Seite aus anzuzeigen und zu verwalten.

Die Hauptseite des Warenkorbs (ihrewebsite.de/warenkorb) wird weiterhin bestehen, und die meisten gleitenden Warenkörbe enthalten eine Schaltfläche, die zu ihr verlinkt, für Benutzer, die sie sehen möchten.

Verlangsamt das Hinzufügen eines gleitenden Seiten-Warenkorb-Plugins meine Website?

Ein gut codiertes Plugin wie FunnelKit ist auf Leistung ausgelegt und sollte keine spürbaren Auswirkungen auf die Geschwindigkeit Ihrer Website haben. Diese Plugins sind so konzipiert, dass sie ihre Skripte effizient laden.

Es ist jedoch immer eine gute Praxis, die Geschwindigkeit Ihrer Website vor und nach dem Hinzufügen eines neuen Plugins zu testen, um sicher zu sein.

Lohnt sich das Upgrade auf FunnelKit Pro nur wegen der Funktionen des gleitenden Warenkorbs?

Ob sich das Upgrade lohnt, hängt von Ihren Geschäftszielen ab. Wenn Ihr Hauptziel darin besteht, den durchschnittlichen Bestellwert (AOV) zu erhöhen, dann sind die Pro-Funktionen sehr leistungsfähig.

Die Möglichkeit, gezielte Upsells, Cross-Sells und gamifizierte Belohnungen (wie „Sie sind 10 $ von kostenlosem Versand entfernt!“) direkt im Warenkorb anzuzeigen, kann den Umsatz erheblich steigern.

Was passiert, wenn der gleitende Seiten-Warenkorb mit meinem WordPress-Theme in Konflikt gerät?

Konflikte mit modernen, gut codierten Themes sind selten, können aber vorkommen. Wenn Sie Anzeigeprobleme feststellen, sollten Sie zuerst die Einstellungen für das ‚Styling‘ des Plugins überprüfen, da kleinere Probleme oft dort behoben werden können.

Wenn das Problem weiterhin besteht, ist der beste Ansatz, sich an das Support-Team des Plugins zu wenden, um Hilfe zu erhalten.

Wir hoffen, dieser Artikel hat Ihnen geholfen, einen gleitenden Warenkorb in WooCommerce hinzuzufügen. Möglicherweise möchten Sie auch unseren Leitfaden zum Thema Erstellen eines WooCommerce-Popups zur Umsatzsteigerung und unsere Expertenauswahl der besten WooCommerce-Plugins für Ihren Shop prüfen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.