So richten Sie einen WordPress-Warenkorb mit WooCommerce ein
Veröffentlicht: 2022-10-28Sie sind also fast fertig mit der Erstellung Ihrer brandneuen WooCommerce-Einkaufswebsite. Sie haben die Erstellung des Produktlayouts des Hauptmarktplatzes, des Auswahlmenüs für die Produktkategorie und der Kopfzeile mit funktionalen Navigationshinweisen abgeschlossen.
Der wichtigste Aspekt jeder E-Commerce-Website ist die Möglichkeit, Kunden von überall auf der Website weiterzuleiten und ihnen dabei zu helfen, Produkte in ihren Warenkorb zu legen, bis hin zum Bezahlvorgang bis zur Auftragsbestätigung.
Dies mag nach einer schwierig zu integrierenden Funktion in WordPress E-Commerce-Websites klingen, ist es aber in Wirklichkeit nicht. WordPress hat eine große Community, die seine Entwicklung unterstützt, und Sie können diese Funktion zu Ihrer Website hinzufügen, indem Sie ein WooCommerce-Einkaufswagen-Plugin verwenden , das nahtlos mit jedem WordPress WooCommerce-Theme zusammenarbeitet .
Inhaltsverzeichnis
Wie funktioniert der WooCommerce-Warenkorb?
Wenn Produkte in WooCommerce in den Warenkorb gelegt werden, werden sie mit der vom Kunden gewählten Variante und Menge in eine separate Liste aufgenommen. Dies hilft Benutzern, ihre ausgewählten Produkte im Auge zu behalten, und diese Funktion lässt sie auch automatisch den berechneten Gesamtpreis der Bestellung sehen, mit der sie beim Bezahlen fortfahren. Außerdem bietet es Benutzern die Möglichkeit, die WooCommerce-Warenkorbseite zu bearbeiten.
Die Vorteile eines Einkaufswagens in WooCommerce
Die Verwendung eines Einkaufswagens in einer WooCommerce-Einkaufsplattform bietet einige große Vorteile. Bevor wir zu einer Schritt-für-Schritt-Anleitung zum Erstellen einer WooCommerce-Warenkorbseite kommen, sind einige davon:
- Entwickelt, um Kunden bei der Auswahl eines oder mehrerer Produkte zum Kauf und bei der Suche nach anderen Produkten zu unterstützen.
- Es hilft, den Gesamtwert der Produkte zu berechnen, während Sie sie weiter in den Warenkorb legen.
- Zeigt die Menge und Variationen eines von Ihnen ausgewählten Produkts an und berechnet den Gesamtwert entsprechend.
- Es kann Kunden mit einem Klick auf die Checkout-Seite umleiten.
- Es kann mit zusätzlichen WooCommerce-Warenkorbfunktionen wie Bestellhistorie, Speichern eines Warenkorbs für später usw. ausgestattet sein.
- Benutzer können ein WooCommerce-Cart-Plugin erhalten, das mit atemberaubenden Designelementen ausgestattet ist.
So fügen Sie einen Einkaufswagen zu WooCommerce hinzu
Lassen Sie uns nun den Prozess des Hinzufügens eines Einkaufswagens zu WooCommerce durchgehen. Am Ende dieses Artikels können Sie mit dem Verkauf einer Vielzahl von Produkten mit einer funktionierenden E-Commerce-Plattform beginnen, die das beste Warenkorb-Plugin für WordPress enthält.
Schritt 1: Installation der Voraussetzungen
Um mit der Warenkorberstellung und den WooCommerce-Warenkorbeinstellungen zu beginnen, müssen Sie bestimmte Plugin-Elemente in Ihrem WordPress-Konto installiert und aktiviert haben. Dazu benötigen Sie die neuesten Versionen von WordPress , WooCommerce , Elementor Page Builder und das ShopReady WooCommerce Shop Builder Plugin.
Um die Plugins zu installieren, melden Sie sich bei Ihrem WordPress-Konto an, gehen Sie zum WordPress-Dashboard > Plugins > Neu hinzufügen und suchen Sie nacheinander nach den Plugins und klicken Sie dann auf Klicken Sie nun auf Aktivieren , wenn der Installationsvorgang abgeschlossen ist. Gehen Sie genauso vor, um alle erforderlichen Plugins und Programme zu installieren.
Schritt 2: Verwenden eines WooCommerce-Warenkorbdesigns
Um nun unseren Prozess zum Erstellen von Warenkorbfunktionen voranzutreiben, müssen Sie ein funktionierendes WooCommerce-Design für einige zusätzliche Funktionen installiert haben. In diesem Fall können wir anstelle eines WooCommerce-WordPress-Themes eine WooCommerce-Warenkorbvorlage verwenden.
Dies wird die Zeit für die Anpassung und Veröffentlichung der Website erheblich verkürzen.
Um eine funktionierende E-Commerce-Vorlage auf Ihrer Website zu installieren, erstellen Sie zunächst eine neue Seite und geben Sie ihr einen Titel aus dem WordPress-Dashboard > Seiten > Neu hinzufügen und klicken Sie auf Sie werden zum Elementor-Editor -Bildschirm weitergeleitet. Hier finden Sie das Symbol ShopReady – Elementor-Vorlagenbibliothek . Klicken Sie auf das Symbol, um Zugriff auf die Vorlagenbibliothek zu erhalten. Wählen Sie eine beliebige Vorlage aus, die zu Ihrer Markenidentität passt, und klicken Sie auf Einfügen , um die Vorlage anzuwenden.
Warten Sie, bis die Vorlage ihren Importvorgang abgeschlossen hat.
Sollte in etwa so aussehen.
Ihr Produktbereich kann leer aussehen, wenn Sie keine Produkte zu WooCommerce hinzugefügt haben. Sie sollten die Produkte, die Sie präsentieren möchten, sofort auf Ihrer WooCommerce-Plattform hinzufügen. Folgen Sie dazu unserer vorherigen Anleitung zum Hinzufügen von Produkten zu einem WooCommerce-Shop .
Jedes WooCommerce-Produkt kann mit dem Produkttitel, der Beschreibung, den Preisen, den ermäßigten Preisen, Bildern, Metadaten, Variationen usw. aus dem WooCommerce-Produkt-Dashboard angepasst werden.
Schritt 3: Anpassung der Produktseite
Um mit der Personalisierung Ihrer Produktseite zu beginnen, gehen Sie zum Dashboard von ShopReady – WooCommerce Builder und wählen Sie die Option Vorlagen. Von dort aus können Sie eine grundlegende Produktseite erstellen, die Sie als Ausgangspunkt für Ihre Anpassungen verwenden können. Aktivieren Sie die Kategorie „Produktvorlage“ und suchen Sie in dieser Kategorie nach der Einrichtung eines einzelnen Produkts. Wählen Sie nun das Bearbeiten-Symbol aus der Symbolleiste.
Und danach wird der Bildschirm, der den Elementor-Editor anzeigt , für Sie geladen. Klicken Sie einfach auf das Pluszeichen, das in der oberen rechten Ecke der Elementor-Benutzeroberfläche zu sehen ist, um mit dem Anpassen der Seite zu beginnen. Wenn es um das Aussehen Ihrer Seite und die Widgets geht, die Sie verwenden möchten, haben Sie eine Vielzahl von Optionen zur Verfügung, wenn es um die Elementor-Abschnitte geht, die Sie darin einfügen können.
Schritt 3: Verwenden von Elementor-Widgets zum Anpassen der Produktseite des WooCommerce Store
Hinzufügen eines Produkttitels
Da Sie mit Elementor bereits eine primäre Abschnittsstruktur für Ihre WooCommerce-Produktseite eingerichtet haben, können Sie jetzt mit dem Hinzufügen eines Produkttitels beginnen. Um dieses Ziel zu erreichen, müssen Sie das Produkttitel-Widget per Drag-and-Drop an der gewünschten Stelle auf der Produktseite positionieren.
Zeigen Sie den richtigen Produkttitel an, indem Sie zur Elementor-Navigationsleiste gehen, die Registerkarte Inhalt auswählen und dann im darauffolgenden Untermenü nach den Optionen zum Aktualisieren des Editors suchen. Um das entsprechende Produkt auszuwählen, klicken Sie im Dropdown-Menü unter Demoprodukt auf seinen Namen.
Sie müssen in das WooCommerce-Produkt-Dashboard gehen und dort die wesentlichen Produktinformationen entweder hinzufügen oder ändern, damit diese Daten den richtigen Produkttitel anzeigen. Dies kann entweder durch Klicken auf die Schaltflächen „Hinzufügen“ oder „Bearbeiten“ erfolgen.
Hinzufügen eines empfohlenen Bildes zur Produktseite
Anschließend sollten Sie sicherstellen, dass Ihr Produkt sowohl eine Bildergalerie als auch ein ausgewähltes Bild enthält. Um dies zu erreichen, können Sie eines der verschiedenen Bild-Widgets verwenden, die im All-in-One-Plugin für E-Commerce enthalten sind, das mit Elementor geliefert wird.
Für diese Demonstration verwenden wir das ShopReady-Thumbnail mit Zoom-Widget, das, wie der Name schon sagt, über eine Zoom-Funktion verfügt. Wenn Sie dieses Widget verwenden, können Sie Ihren Kunden eine WooCommerce-Produkt-Hover-Zoom-Version Ihres Produktbilds anzeigen, wenn sie ihre Maus über das Bild Ihres Produkts bewegen.
Auf die gleiche Weise wie zuvor können Sie das entsprechende Produktbild auswählen, indem Sie auf die Registerkarte Inhalt der Option Demoprodukt klicken.
Hinzufügen eines Blocks für das Preisgestaltungs-Widget
Der Produktpreisblock ist eine weitere wesentliche Komponente, die auf Ihrer E-Commerce-Produktseite vorhanden sein sollte. Um dies zu erreichen, müssen Sie die WooCommerce-Produktattribute mit den entsprechenden Anpassungen ändern und das ShopReady-Preis-Widget verwenden, das unter dem Produkttitel positioniert werden muss.
Um sicherzustellen, dass die korrekten Preise angezeigt werden, wählen Sie den Produkttitel aus dem Dropdown-Menü in der Option „Demo-Produkt“ auf der Registerkarte „Inhalt“.
Produktbeschreibung hinzufügen
Mit diesem Produktbeschreibungs-Widget für WooCommerce-Produkt-Add-Ons haben Sie nicht nur die Möglichkeit, Produktbeschreibungen hinzuzufügen, sondern Sie haben auch die Möglichkeit, die Beschreibungen stark anzupassen. Durch die Verwendung der Registerkarte Stil haben Sie die Möglichkeit zu ändern, wie die Produktbeschreibung der allgemeinen Öffentlichkeit angezeigt wird.
Hinzufügen der „In den Warenkorb“-Funktion
Die Möglichkeit für Kunden, zusätzliche Artikel in ihren Einkaufswagen zu legen, bevor sie zur Checkout-Seite gehen, wird durch die Option „In den Einkaufswagen“ erleichtert, eine weitere Funktion, die äußerst wichtig ist.
Mit dem ShopReady Add to Cart Widget können Sie die Seite Ihres E-Commerce-Shops mit einer leistungsstarken Version der Add to Cart-Funktion ausstatten. Mit Hilfe dieses Widgets können Sie Ihren Kunden die Möglichkeit geben, die Menge eines Produkts, das sie in ihrem Einkaufswagen haben, direkt über den Block „In den Einkaufswagen“ anzupassen.
Sie können das Erscheinungsbild der Elementor-Schaltfläche zum Hinzufügen zum Warenkorb auch über die Registerkarte Elementor-Stil des WooCommerce-Produktstils ändern. Hier können Sie Schriftart, Farbe, Hintergrund, Rand, Polsterung und andere Attribute ändern.
Hinzufügen von Metadaten zur Produktseite
Wenn Sie Ihren Kunden ein zufriedenstellenderes Einkaufserlebnis bieten möchten, sollten Sie einen WooCommerce-Produktfilter implementieren, der die Metadaten und Produktattribute verwendet, die Sie WooCommerce hinzugefügt haben, während Sie Produkte hinzufügen.
Suchen Sie nach dem ShopReady-Meta-Widget und platzieren Sie es direkt unter der Schaltfläche „In den Einkaufswagen“ auf der Seite, die Ihrem Produkt gewidmet ist. Auf diese Weise können Sie die betreffenden Informationen anzeigen.
Wenn Sie den entsprechenden Produkttitel aus dem Dropdown-Menü in der Option „Demo-Produkt“ auf der Registerkarte „Inhalt“ auswählen, sollten Ihre Produkt-Tags und Metadaten korrekt angezeigt werden.
Hinzufügen von Social Media Share Buttons zur Produktseite
Durch die Verwendung eines einfachen Social-Media-Share-Button-Blocks können Sie Ihren Verbrauchern ermöglichen, Ihre Produktbeiträge in Social Media direkt von der WooCommerce-Produktseite für den Artikel, den sie gekauft haben, zu teilen. Welche Sie erstellen können, indem Sie nur die Drag-and-Drop-Funktionalität des Elementor Social Share-Widgets nutzen.
Direkt von der Registerkarte Inhalt aus kann der Block mit beliebigen Social-Media-Symbolen, Text und teilbaren Links nach Wahl des Benutzers personalisiert werden. Darüber hinaus ermöglicht die Registerkarte „Elementor-Stil“ Benutzern, die visuelle Darstellung der Social-Share-Blöcke zu ändern, wenn sie dies wünschen.
Und damit sind Sie mit den Grundlagen zum Anpassen von WooCommerce-Produktseiten fertig.
Schritt 4: WooCommerce-verwandte Produkte hinzufügen
Die Verwendung des Widgets „Verwandte Produkte“, das in den WooCommerce-Produkt-Add-Ons enthalten ist, ermöglicht es Ihnen, verwandte Produkte auf Ihrer Produktseite anzuzeigen, was eine hervorragende Strategie zur Steigerung des Online-Verkaufs darstellt. Mit dem ShopReady Related Products-Widget können Sie ganz einfach einen wunderschönen Produkt-Slider-Block erstellen, der in Abschnitte unterteilt ist.
Um das Widget zu verwenden, ziehen Sie es einfach per Drag-and-Drop unter den Einzelproduktblock und wählen Sie dann auf der Registerkarte Inhalt die spezifischen Produkte aus, die Sie auf Ihrer Einzelproduktseite präsentieren möchten .
Schritt 5: Hinzufügen von benutzerdefinierten Checkout-Feldern für WooCommerce
Wie bereits erwähnt, ist dies ein wichtiger Aspekt einer funktionierenden E-Commerce-Plattform. Mit einem WooCommerce-Shop-Builder wie ShopReady können Sie ganz einfach einen WooCommerce-Warenkorb-Shortcode verwenden und auf diese Weise einen funktionalen E-Commerce-Warenkorb implementieren, oder Sie können ein ShopReady-Widget verwenden, um diese Funktion anzuwenden.
Um einen funktionierenden Warenkorb zu haben, müssen Sie zuerst das Widget „In den Warenkorb“ auf der Produktseite hinzufügen. Was wir bereits getan haben. Gehen wir also zurück und erstellen die Warenkorbseite selbst, auf der alle Produkte angezeigt werden, sobald sie dem Warenkorb hinzugefügt wurden.
ShopReady – WooCommerce Shop Builder ermöglicht es Benutzern, zwischen zwei verschiedenen Warenkorbvorlagen zu wählen, die über das ShopReady-Dashboard verwendet werden können . Klicken Sie im ShopReady-Dashboard auf das Menü „ Vorlagen “ , aktivieren und bearbeiten Sie jetzt eine von ShopReady bereitgestellte voreingestellte WooCommerce-Warenkorbvorlage.
Wenn Sie eine neue WooCommerce-Warenkorbvorlage erstellen oder eine vorhandene bearbeiten, werden Sie zum Elementor-Editor-Bildschirm weitergeleitet.
Von hier aus können Sie einfach das ShopReady- Warenkorb - Widget hinzufügen, und Ihre Warenkorbseite nimmt automatisch ihre Form an, und das Erstellen eines WordPress-Warenkorbs ohne Plugin ist mit ShopReady so einfach. Es erfordert keine zusätzlichen Plugins oder Tools.
Wenn Sie bereits Produkte zu Ihrem Warenkorb hinzugefügt haben, sollte es ungefähr so aussehen.
Und da haben Sie es, eine funktionale WooCommerce-Warenkorbseite mit einem funktionalen Warenkorb-Button. Sie haben auch die Möglichkeit, die Warenkorbseite mit Elementor weiter anzupassen. Mit Elementor können Sie jeden Aspekt der Warenkorbseite ändern, von Hintergrundfarben bis hin zu Elementor-Typografieeinstellungen.
Sie können auch einen WooCommerce-Warenkorb-Shortcode verwenden. In diesem Fall müssen Sie das Elementor ShortCode-Widget verwenden.
Wenn Sie mit der Anpassung Ihrer Shop-Seite fertig sind, stellen Sie sicher, dass Sie auf Veröffentlichen / Aktualisieren klicken , um die Änderungen für Ihre Besucher und Kunden live zu machen.
Fazit
Der gesamte Prozess der Erstellung einer benutzerdefinierten WooCommerce-Schaltfläche zum Hinzufügen zum Warenkorb mag wie eine entmutigende Aufgabe erscheinen, aber wenn Sie durch diese Anleitung voranschreiten, werden Sie feststellen, dass der Prozess der Erstellung dieser technischen Funktion mit den richtigen Tools überhaupt nicht schwierig ist. Der ShopReady WooCommerce Shop Builder ist ein Komplettpaket, das alle Tools bietet, die Sie benötigen, um von Grund auf eine robuste E-Commerce-Plattform zu erstellen.
Und wenn Sie auf Probleme mit ShopReady oder dem Prozess der Warenkorberstellung stoßen, können Sie jederzeit in der WooCommerce-Warenkorbdokumentation nachschlagen .
Häufig gestellte Fragen zu WooCommerce-Warenkörben
Hat WordPress einen Warenkorb?
WordPress CMS ist eine Barebone-Website-Hosting-Plattform. Es enthält keine Warenkorb- oder E-Commerce-bezogenen Funktionen. Da es sich jedoch um eine Open-Source-Plattform handelt, können Sie alle von der Community erstellten E-Commerce-Tools, Plugins oder Module verwenden, um der WordPress-Website einen Warenkorb hinzuzufügen.
Hat WooCommerce einen Warenkorb?
Ja, das WooCommerce-Basis-Plugin verfügt über eine funktionale Warenkorb-Schaltfläche und eine Warenkorb-Seite. Aber es ist sehr minimalistisch in der Natur. Um die Warenkorbseite aufzupeppen, können Sie eine beliebige Anzahl von WooCommerce-Erweiterungen verwenden , oder Sie können die Anpassungsoptionen von Elementor und ShopReady WooCommerce Page Builder für eCommerce-Warenkorbseiten voll ausnutzen. Von WooCommerce-Warenkorbsymbolen bis hin zu detaillierten Seitenlayouts kann alles mit ShopReady angepasst werden.
Wie erstelle ich eine benutzerdefinierte Checkout-Seite in WooCommerce?
Laden Sie den ShopReady – WooCommerce Shop Builder herunter und installieren Sie ihn. Erstellen Sie nun eine neue WooCommerce-Checkout-Seitenvorlage aus dem ShopReady-Dashboard. Sie werden zum Elementor-Editor weitergeleitet, von hier aus können Sie das ShopReady Checkout-Widget verwenden, um eine funktionale benutzerdefinierte Checkout-Seite in WooCommerce zu erstellen.