So erstellen Sie einen WooCommerce-Mini-Warenkorb: 3 Methoden

Suchen Sie nach einer einfachen Möglichkeit , einen WooCommerce-Mini-Warenkorb einzurichten ? Wenn Ihr Bezahlvorgang träge und sich wiederholend ist, kann dies das Einkaufserlebnis Ihrer Kunden beeinträchtigen. Die Verbesserung des Ablaufs Ihres Checkout-Prozesses ist ein wesentlicher Bestandteil der Verbesserung Ihrer Lead-Conversions, und ein Mini-Warenkorb kann eine großartige Lösung dafür sein.

Um Ihnen dabei zu helfen, einen zu Ihrer Website hinzuzufügen, finden Sie hier eine Anleitung zum Erstellen eines WooCommerce-Mini-Warenkorbs. Aber zuerst werfen wir einen Blick darauf, was genau ein Mini-Wagen ist und warum Sie möglicherweise einen verwenden müssen.

Was ist ein WooCommerce Mini-Warenkorb?

Ihr WooCommerce Mini-Warenkorb ist nur eine kleine Form Ihrer eigentlichen WordPress-Warenkorbseite. Es enthält die Produkte, die Ihrem Warenkorb hinzugefügt wurden, sowie einige weitere Details. Der Inhalt des Mini-Warenkorbs hängt von Ihrem aktiven WordPress-Theme ab, umfasst jedoch im Allgemeinen:

• Ihre Produktliste
• Zwischensumme
• Produkt-Thumbnails
• Produktmenge

Unabhängig von den Details, die Ihr WooCommerce-Mini-Warenkorb anzeigt, ist dies ein entscheidender Teil der Benutzererfahrung Ihrer Kunden beim Surfen in Ihrem WooCommerce-Shop. Es ist ein zugängliches Tool, mit dem Ihre Kunden von jedem Teil Ihrer Website direkt zur Checkout-Seite wechseln können, und hilft dabei, die Artikel im Einkaufswagen zu verfolgen.

Sogar wir verwenden den Miniwagen bei QuadLayers. Wenn Sie ein Produkt in den Warenkorb legen, können Sie den Mini-Warenkorb anzeigen, indem Sie mit der Maus auf das Warenkorb-Symbol im Kopfmenü fahren.

Wenn Sie sich den Screenshot unten ansehen, haben wir das Produkt WooCommerce Checkout Manager in den Warenkorb gelegt. Diese wird zusammen mit Menge und Zwischensumme auch im Mini-Warenkorb angezeigt.

Warum einen Mini-Warenkorb für Ihre WooCommerce-Website erstellen?

Standardmäßig verfügt Ihr WooCommerce-Design möglicherweise über einen eigenen WooCommerce-Mini-Warenkorb. Und selbst wenn dies der Fall ist, können seine Position und sein Stil selbst möglicherweise nicht vollständig über Ihre Designeinstellungen angepasst werden. Darüber hinaus ist es möglicherweise auch nicht der perfekte Ort für Ihren Mini-Wagen.

Einige unserer Leser ziehen vielleicht in Betracht, einen schwimmenden Mini-Wagen hinzuzufügen, während andere ihn der Seitenleiste oder der Fußzeile hinzufügen. Es gibt verschiedene mögliche Mini-Cart-Ansätze, die Sie vielleicht in Betracht ziehen sollten. Darüber hinaus müssen Sie Ihren Mini-Warenkörben möglicherweise weitere Inhalte hinzufügen, z. B. Versandpreise, zusätzliche Warenkorbdetails, benutzerdefinierte Nachrichten und mehr.

Der einfache Komfort bei der Verwendung Ihres Einkaufswagens kann auch für Sie und Ihre Kunden wichtig sein, um Ihren tatsächlichen Umsatz zu steigern. Ein individueller, verkaufsfertiger Checkout, der perfekt zu Ihrer Website-Ästhetik passt, kann ein Wendepunkt für Ihre WooCommerce-Website sein. Wenn Sie also Ihren benutzerdefinierten Mini-Warenkorb erstellen und zu verschiedenen Seiten Ihrer Website hinzufügen möchten, dann suchen Sie nicht weiter!

So erstellen Sie einen WooCommerce-Mini-Warenkorb in WordPress

Um Ihren WooCommerce Mini-Warenkorb zu erstellen und hinzuzufügen , können Sie 3 verschiedene Methoden verwenden :

1. Warenkorb-Widget hinzufügen
2. Verwendung eines WordPress-Plugins
3. Programmatisch

Werfen wir einen Blick auf jede Methode und die damit verbundenen Schritte, beginnend mit der Standardmethode zur Verwendung von WordPress-Widgets.

1. Erstellen Sie einen WooCommerce-Mini-Warenkorb mit WordPress-Widgets

Standardmäßig können Sie WooCommerce-Mini-Warenkörbe mit dem WooCommerce-Warenkorb-Widget erstellen. Da wir ein Widget verwenden, kann es nur in den verfügbaren Widget-Bereichen des Themas positioniert werden. Zu den häufigsten Bereichen gehören:

• Widgets-Seitenleiste
• Unten Kopfzeile
• Fußzeilen

Abhängig von Ihrem Thema kann es mehr Widget-Bereiche geben. Achte aber bitte darauf, dass du auch eines der WooCommerce-kompatiblen Themes verwendest.

1.1. Wählen Sie den Widget-Bereich aus

Um ein Warenkorb-Widget hinzuzufügen, müssen Sie zuerst einen Widget-Bereich auswählen. Öffnen Sie also Ihr WP Admin Dashboard und gehen Sie zu Appearance > Widgets . Dann wählen Sie den Widget-Bereich für Ihren Mini-Warenkorb.

Für unsere Demo verwenden wir die Sidebar . Sie können jedoch den Widget-Bereich verwenden, der für Sie am bequemsten ist.

1.2. Warenkorb-Widget zum Widget-Bereich hinzufügen

Nachdem Sie den Widget-Bereich für Ihren Mini-Warenkorb ausgewählt haben, klicken Sie auf die Schaltfläche + , um das Widget hinzuzufügen. Verwenden Sie die Suchleiste, um nach Einkaufswagen zu suchen, und klicken Sie darauf, um das Widget hinzuzufügen .

Wenn Sie das Widget nicht sehen können, vergewissern Sie sich bitte, dass Sie WooCommerce auf Ihrer Website richtig eingerichtet haben.

Hier können Sie auch die Option Ausblenden, wenn der Warenkorb leer ist aktivieren oder deaktivieren. Wir empfehlen Ihnen, es zu aktivieren, da Ihr Sidebar-Warenkorb ausgeblendet wird, wenn der Warenkorb Ihres Kunden leer ist. Dadurch wird Ihre Website auch funktionaler aussehen.

Nachdem Sie das Einkaufswagen-Widget hinzugefügt haben, aktualisieren Sie Ihre Widgets, um Ihre Änderungen zu speichern. Jetzt sollte Ihr Seitenleisten-Miniwagen auf Ihrem Frontend erscheinen.

Natürlich können Sie Ihren Mini-Warenkorb auch einem anderen Widget-Bereich hinzufügen. Wählen Sie einfach den Ort auf der Widget-Seite aus und Sie können das Widget einfach unter Ihrer Kopfzeile oder in der Fußzeile hinzufügen.

Dies ist zwar der einfachste Weg , um Ihren WooCommerce-Mini-Warenkorb zu erstellen, es gibt jedoch eine ganze Reihe von Einschränkungen . Zum einen gibt es keine Anpassungen für Ihren Mini-Wagen. Sie sind sehr eingeschränkt in Bezug darauf, wie Ihr Mini-Warenkorb aussieht und wie Ihre Kunden darauf zugreifen.

Die Mini-Cart-Positionen sind auf die von Ihrem Thema bereitgestellten Widget-Bereiche beschränkt. Darüber hinaus sind Funktionen wie Pop-up-Mini-Warenkörbe oder benutzerdefinierte Felder für den Warenkorb für die Kunden oder den Website-Eigentümer ebenfalls nicht verfügbar. Wenn Sie also einen anpassbareren Mini-Wagen wünschen, empfehlen wir Ihnen, weiterzulesen und stattdessen die folgenden Methoden in Betracht zu ziehen.

2. Erstellen Sie einen WooCommerce-Mini-Warenkorb mit einem WordPress-Plugin

Die Verwendung eines WordPress-Plugins ist eine der einfachsten Möglichkeiten, Ihr Warenkorberlebnis zu kuratieren. Mit Hilfe von Plugins können Sie dafür sorgen, dass Ihre Kunden jederzeit problemlos auschecken können. Sie ermöglichen es Ihnen auch, das Checkout-Erlebnis Ihrer Website zu vereinfachen.

Die Mini-Cart-Plugins bieten raffinierte Funktionen, um Ihren Produktverkauf zu fördern und Ihre Lead-Generierung zu verbessern. Zum Beispiel:

• Sie können schwebende Warenkorbsymbole und Popups für den Mini-Warenkorb aktivieren. So können Ihre Kunden jederzeit darauf zugreifen, während der Rest des Shop-Contents sauber und ablenkungsfrei bleibt.
• Dem Mini-Warenkorb selbst können viele Warenkorb- und Produktelemente hinzugefügt werden. Zum Beispiel zusätzliche Produktinformationen, Änderung der Menge, Bearbeiten der Warenkorb-Zwischensumme und Gesamtanzeige und vieles mehr.
• Mit Plugins können Sie einige intelligente Funktionen hinzufügen, z. B. das Hinzufügen von Coupons direkt aus dem Mini-Warenkorb, spezielle Produkte und empfohlene Produktvorschläge.

Wir empfehlen daher dringend, ein WordPress-Plugin zu verwenden, das dem Hinzufügen und Anpassen Ihres WooCommerce-Mini-Warenkorbs gewidmet ist.

Für unsere Demo verwenden wir das Woocommerce Cart All in One Plugin . Es ist eines der besten Plugins, um einen Mini-Warenkorb auf Ihrer Website zu erstellen. Das Plugin ist auch sehr einfach zu bedienen und verfügt über alle Funktionen, die Sie benötigen, wie ein Mini-Warenkorb-Popup, einen Seitenleisten-Warenkorb oder Anpassungsoptionen für den Menü-Warenkorb.

Wir haben auch eine Liste der besten WooCommerce Mini-Cart-Plugins. Wenn Sie ein anderes Plugin verwenden möchten, können Sie es sich auch ansehen.

2.1. Installieren und aktivieren Sie das Plugin

Beginnen wir mit der Installation und Aktivierung des Plugins.

Öffnen Sie Ihr WP Admin Dashboard und gehen Sie dann in Ihrer Seitenleiste zu Plugins > Neu hinzufügen.

Verwenden Sie dann die Suchleiste oben rechts, um nach Cart All In One For WooCommerce zu suchen.

Nachdem Sie das Plugin gefunden haben, klicken Sie auf Jetzt installieren, um das Plugin zu installieren. Aktivieren Sie schließlich das Plugin, sobald es installiert ist.

Wenn Sie ein Premium-Plugin verwenden möchten, müssen Sie es manuell hochladen und installieren. Weitere Informationen finden Sie in unserer ausführlichen Anleitung zur manuellen Installation eines WordPress-Plugins.

Jetzt müssen wir das Plugin konfigurieren, um Ihren WooCommerce-Mini-Warenkorb zu aktivieren.

2.2. Konfigurieren Sie das Cart All in One For WooCommerce-Plugin

Um den WooCommerce-Mini-Warenkorb des Plugins zu konfigurieren, klicken Sie in Ihrem WP Admin Dashboard auf die Registerkarte Warenkorb All in One . Dies öffnet die Dashboard-Seite des Plugins.

In der kostenlosen Version des Plugins können Sie einen Sidebar - Mini-Warenkorb oder einen Menü-Mini-Warenkorb aktivieren. Sie können auch eine AJAX-Schaltfläche „Zum Warenkorb hinzufügen“ hinzufügen und konfigurieren, aber konzentrieren wir uns vorerst nur auf die Mini-Warenkorb-Optionen.

Um das Mini-Warenkorb-Popup auf Ihrer Website zu aktivieren, öffnen Sie den Seitenleisten-Warenkorb und klicken Sie auf Aktivieren . Sie können auch die Option „ Mobil aktivieren“ verwenden, um das Mini-Einkaufswagen-Popup auf Mobilgeräten zu aktivieren/deaktivieren. Speichern Sie schließlich Ihre Änderungen.

Gehen Sie jetzt und laden Sie das Frontend Ihrer Website neu. Sie sollten Ihr neues Mini-Warenkorb-Symbol auf Ihrer Webseite sehen. Sie können einfach darauf klicken, um Ihren Mini-Warenkorb zu öffnen.

Darüber hinaus können Sie jedem Ihrer Menüs einen Menüwagen hinzufügen. Öffnen Sie einfach die Registerkarte Menüwagen und aktivieren Sie sie wie in den vorherigen Schritten. Sie können es bei Bedarf auch in den mobilen Menüs aktivieren.

Als nächstes müssen Sie die WordPress-Menüs dort hinzufügen, wo Sie den Menükorb auf Ihrer Website anzeigen möchten. Wählen Sie einfach die Menüs, die Sie Ihrem WooCommerce-Mini-Einkaufswagen hinzufügen möchten, im Feld Menüs aus. Klicken Sie dann auf Speichern .

Sie sollten jetzt Ihren Menü-Mini-Warenkorb auf Ihrer Website sehen. Es wird den Menüs hinzugefügt, die Sie für den Mini-Einkaufswagen ausgewählt haben.

2.3. Passen Sie Ihren WooCommerce Mini Cart mit dem Plugin an

Die Anpassung ist eine Schlüsselfunktion des Cart All-in-One-Plugins . Sie können Ihren Sidebar-Warenkorb sowie den Menü-Warenkorb frei anpassen. Dazu gehören Farben, Mini-Warenkorb-Stile, Positionen, benutzerdefinierte Animationen, Mini-Warenkorb-Symbole, Seitenleisten-Menüstile und vieles mehr.

Um auf die Anpassungsoptionen zuzugreifen, gehen Sie in Ihrem WP Admin Dashboard zu Aussehen > Anpassen . Sie werden zu Ihrem Theme-Customizer weitergeleitet. Klicken Sie hier auf Cart All in One For WooCommerce und Sie sollten alle Anpassungsoptionen für den Mini-Warenkorb sehen.

Für diese Demo passen wir den Sidebar-Wagen an. Klicken Sie also auf Sidecart Cart und Sie sollten alle Optionen dafür sehen. Im Moment aktivieren wir einen kleineren Mini-Warenkorb mit der Option Inhalt der Seitenleiste anzeigen und ändern die Position des Seitenleisten-Warenkorbs.

Sie können Ihren Mini-Warenkorb jedoch mit diesen Optionen weiter anpassen, je nachdem, wie er zu Ihrer Website passt. Es gibt noch viel zu bearbeiten, wie die Interaktion mit dem Warenkorb-Symbol selbst, sodass der Mini-Warenkorb angezeigt wird, wenn Sie mit der Maus über das Symbol fahren, das Ladesymbol anpassen und vieles mehr.

Wenn Sie mit Ihren Änderungen fertig sind, klicken Sie auf Veröffentlichen und speichern Sie sie. Sie können all diese Anpassungen Ihres Mini-Warenkorbs auf Ihrer Website sehen.

Und das ist der Grundgedanke beim Anpassen Ihres Mini-Wagens mit dem Plugin. Wenn Sie mehr über alle vom Plugin bereitgestellten Anpassungsoptionen erfahren möchten, empfehlen wir Ihnen dringend, die Dokumentation zu lesen .

3) Erstellen Sie programmgesteuert einen WooCommerce-Mini-Einkaufswagen

Angenommen, Sie möchten lieber kein Plugin verwenden, um Ihren WooComerce Mini-Warenkorb hinzuzufügen, um ein leichtes Framework Ihrer Website beizubehalten. Dann können Sie stattdessen auch eine programmgesteuert erstellen.

Dazu müssen Sie einen benutzerdefinierten Shortcode mit einer benutzerdefinierten Funktion erstellen und ihn in die Datei functions.php Ihres Themes einfügen. Dann können Sie den Shortcode in jedem Teil Ihrer Website verwenden oder ihn sogar zu einer Ihrer WordPress- oder WooCommerce-Vorlagendateien hinzufügen, um den WooCommerce-Mini-Warenkorb direkt hinzuzufügen.

Da wir einige der Kerndateien ändern werden, ist es am besten, dass Sie Ihre Website sichern und auch ein untergeordnetes Design programmgesteuert oder mithilfe eines der untergeordneten Design-Plugins erstellen. Dadurch wird sichergestellt, dass Sie Ihre benutzerdefinierten Codes nicht verlieren, wenn Sie das WordPress-Theme aktualisieren.

3.1. Fügen Sie den benutzerdefinierten Shortcode zu Ihren Themenfunktionen hinzu

Wir fügen die benutzerdefinierten Codes aus dem Designdatei-Editor in die Designdateien Ihrer Website ein. Wenn Sie sich beim Hinzufügen von Codes zu WooCommmerce nicht ganz sicher sind, empfehlen wir Ihnen, zuerst diesen Artikel durchzugehen.

Sobald Sie fertig sind, öffnen Sie Ihren Theme-Editor über Appearance > Theme File Editor in Ihrem WP Admin Dashboard . Verwenden Sie die Seitenleiste der Themendateien auf der rechten Seite und klicken Sie auf functions.php . Dadurch wird die Datei functions.php in Ihrem Theme-Editor geöffnet.

Fügen Sie nun den folgenden Code in Ihren Design-Editor ein:

 Funktion custom_mini_cart() {
echo '<a href="#" class="dropdown-back" data-toggle="dropdown"> ';
echo '<i class="fa fa-shopping-cart" aria-hidden="true"></i>';
echo '<div class="basket-item-count">';
echo '<span class="cart-items-count count">';
echo WC()->Warenkorb->get_cart_contents_count();
echo '</span>';
echo '</div>';
echo '</a>';
echo '<ul class="dropdown-menu dropdown-menu-mini-cart">';
echo '<li> <div class="widget_shopping_cart_content">';
woocommerce_mini_cart();
echo '</div></li></ul>';

}
add_shortcode( 'quadlayers-mini-cart', 'custom_mini_cart' ); 

Nachdem Sie den Code hinzugefügt haben, klicken Sie auf Datei aktualisieren . Dadurch wird ein benutzerdefinierter Shortcode mit dem Titel „[quadlayers-mini-cart]“ für Ihre Website erstellt. Jetzt können Sie diesen Shortcode auf jedem Beitrag, jeder Seite oder jedem Widget verwenden, um Ihren benutzerdefinierten WooCommerce-Mini-Warenkorb hinzuzufügen.

3.2. Verwenden Sie den Shortcode in einer WooCommerce-Vorlage

Sie können auch das folgende Code-Snippet verwenden, um Ihren benutzerdefinierten Mini-Warenkorb zu einer beliebigen Designvorlagendatei oder WooCommerce-Vorlage hinzuzufügen.

 <?php echo do_shortcode('[quadlayers-mini-cart]'); ?>

Lassen Sie uns diesen Code beispielsweise zu Ihrer WooCommerce-Produktarchiv-Vorlagendatei hinzufügen. Um Ihre WooCommerce-Vorlagendatei zu öffnen, gehen Sie in Ihrem WordPress-Dashboard zu Plugins > Plugin-Datei-Editor .

Verwenden Sie dann die Option Select Plugin to Edit oben rechts und wählen Sie WooCommerce und klicken Sie auf Select. Klicken Sie im Menü Plugin-Dateien auf Vorlagen > archive-product.php.

Fügen Sie als Nächstes die folgende Codezeile zu einem geeigneten Teil der Vorlage hinzu.

 echo do_shortcode('[quadlayers-mini-cart]');

Für unsere Demo fügen wir die Codezeile unter do_action( 'woocommerce_before_main_content' ) ; Linie. Sie können das Snippet jedoch zu jeder der Vorlagendateien und wo immer nötig hinzufügen.

Aktualisieren Sie schließlich die Datei , nachdem Sie die Codes im Plugin-Editor hinzugefügt haben. Der Mini-Warenkorb wird auf Ihren angegebenen WooCommerce-Seiten angezeigt. In unserem Fall ist dies die Seite Shop/Produktarchiv.

Dieser Ansatz fügt Ihren Mini-Warenkorb der Vorlage hinzu. Der Mini-Warenkorb sieht jedoch möglicherweise nicht genau so aus, wie Sie es möchten, und erfordert möglicherweise zusätzliches Styling mit dem Datei-Stylesheet Ihres Designs. Diese Methode wird also nur empfohlen, wenn Sie an das Codieren gewöhnt sind und über ein gewisses Wissen verfügen, um PHP und CSS zu WordPress hinzuzufügen.

Bonus: So überspringen Sie die Warenkorbseite in WooCommerce

Wenn Sie möchten, dass Ihre Kunden einen schnelleren Checkout-Prozess haben, können Sie die Warenkorbseite auch ganz überspringen . Da der Mini-Warenkorb Ihren Kunden bereits zur Verfügung gestellt wird, besteht keine große Notwendigkeit für die Warenkorbseite. So können Sie Ihre Kunden direkt auf die Checkout-Seite umleiten, wenn sie einen Kauf tätigen möchten.

Sie können dies entweder mit einem speziellen Plugin oder mit einer benutzerdefinierten Funktion tun. Im Moment behandeln wir, wie Sie die Warenkorbseite programmgesteuert überspringen können.

Aber bevor Sie fortfahren, müssen Sie in Ihrem WP-Dashboard zu WooCommerce > Einstellungen gehen und die Registerkarte Produkte öffnen. Deaktivieren Sie unter den allgemeinen Optionen beide Verhaltensoptionen für das Hinzufügen zum Einkaufswagen . Dadurch wird sichergestellt, dass unsere benutzerdefinierte Funktion nicht beeinträchtigt wird.

Öffnen Sie nun die Datei functions.php Ihres Child Themes noch einmal mit dem gleichen Schritt wie oben. Gehen Sie einfach zum Designeditor von Aussehen > Designdatei-Editor und klicken Sie auf die Datei functions.php .

Fügen Sie dann das folgende Code-Snippet hier ein.

 add_filter('add_to_cart_redirect', 'ql_skip_cart_page');
Funktion ql_skip_cart_page () {
globaler $woocommerce;
$redirect_checkout = $woocommerce->cart->get_checkout_url();
Rückgabe $redirect_checkout;
} 

Jedes Mal, wenn Ihre Kunden Ihrem Warenkorb ein Produkt hinzufügen, werden sie jetzt direkt zur Checkout-Seite anstatt zur Warenkorbseite weitergeleitet.

Um diesen Vorgang zu vereinfachen, können Sie auch ein Plugin wie Direct Checkout für WooCommerce verwenden. Wenn Sie mehr darüber erfahren möchten und warum Sie es in Betracht ziehen sollten, können Sie sich hier unseren speziellen Leitfaden ansehen.

Fazit

Und damit endet unser Leitfaden zum Erstellen eines WooCommerce-Mini-Warenkorbs. Das Einrichten und Anpassen von WooCommerce Mini Cart ist kein langwieriger Prozess und Sie können verschiedene Methoden dafür wählen. Fassen wir die Methoden zusammen, die wir im heutigen Leitfaden zum Hinzufügen und Anpassen unseres WooCommerce-Mini-Warenkorbs verwendet haben:

• Warenkorb-Widgets verwenden
• Mit einem speziellen WordPress-Plugin
• Programmgesteuert mit einem benutzerdefinierten Shortcode und Vorlagendateien

Wenn Sie sich nicht sicher sind, welchen Prozess Sie verwenden sollen, empfehlen wir Ihnen dringend , ein Plugin zu verwenden, um Ihren WooCommerce-Mini-Warenkorb zu erstellen. Diese Methode ist nicht nur sicherer und einfacher, sondern Sie erhalten auch unzählige spezielle Anpassungs- und Personalisierungsoptionen für Ihren Mini-Wagen. Wenn Sie ein WordPress-Anfänger sind und einen WooCommerce-Mini-Warenkorb mit minimalen Einschränkungen hinzufügen möchten, empfehlen wir Ihnen dringend, ein spezielles Plugin zu verwenden.

Wenn Sie außerdem nach zusätzlichen Mitteln suchen, um Ihren Checkout-Prozess zu verkürzen und Ihren Umsatz zu steigern, lesen Sie doch einige unserer anderen Artikel:

• Beste Plugins zum Anpassen der WooCommerce-Warenkorbseite
• So erstellen Sie WooCommerce One Page Checkout
• So erstellen Sie einen direkten Checkout-Link für WooCommerce

Können Sie Ihrer Website jetzt einen Mini-Warenkorb hinzufügen? Oder hast du es schon hinzugefügt? Wir freuen uns, darüber in den Kommentaren zu erfahren.