So entwerfen Sie den WooCommerce-Warenkorb in Elementor [ohne Codierung]

Veröffentlicht: 2022-01-11

Verlassen Ihre Kunden ihren WooCommerce- Einkaufswagen mitten im Einkauf? Wussten Sie, dass ein sehr häufiger Grund dafür eine unorganisierte Warenkorbseite sein kann, die Benutzer beim Einkaufen verwirrend finden? Aber keine Sorge mehr; Mit dem neuesten Update von Essential Addons für Elementor bieten wir Ihnen die einfachste Lösung, um die Abbruchrate von Warenkörben zu reduzieren und den Umsatz zu steigern.

WooCommerce cart

In diesem Blog führen wir Sie durch die Gründe, warum die individuelle Gestaltung der WooCommerce-Warenkorbseite auf Ihrer Shop-Website der beste Ansatz ist. Aber nicht nur das, wir stellen Ihnen auch unser neuestes Essential Addons-Element vor, das nur entwickelt wurde , um Ihnen bei der Erstellung Ihres professionell gestalteten Warenkorbs zu helfen , der sicher Umsatz bringt. Lassen Sie uns also ohne weitere Verzögerung direkt eintauchen und mehr herausfinden.

Warum sollten Sie eine benutzerdefinierte WooCommerce-Warenkorbseite entwerfen?

Untersuchungen zeigen, dass fast 7 von 10 Kunden Ihren Einkaufswagen verlassen und nie wiederkommen, selbst wenn sie mit den von Ihnen verkauften Produkten zufrieden sind. Und wie wir ganz am Anfang erwähnt haben, ist ein Hauptgrund dafür eine verwirrende oder überladene Warenkorbseite, durch die Kunden nicht navigieren konnten.

Manchmal können Ihre potenziellen Kunden möglicherweise nicht zur Einkaufsseite zurückkehren und andere Produkte hinzufügen, die sie benötigen. Zu anderen Zeiten kann es ein Problem sein, einen Verkaufsgutscheincode anzuhängen, den sie zu verwenden gehofft haben. Käufer könnten sogar frustriert werden, wenn sie nicht in der Lage sind, weitere Mengen desselben Produkts hinzuzufügen, nachdem sie sich bereits auf der Warenkorbseite von WooCommerce befinden .

WooCommerce cart

Und verständlicherweise kann es ziemlich enttäuschend sein, hervorragende Produkte und Dienstleistungen anzubieten und dennoch hohe Warenkorbabbruchraten zu beobachten – insbesondere, wenn dies auf einfache Probleme mit dem Seitendesign zurückzuführen ist. Aber Ihre Sorgen haben jetzt ein Ende, mit der neuesten Version unseres Teams von Essential Addons für Elementor . Lesen Sie mehr, um herauszufinden, wie Sie den Umsatz mit einer erstaunlich gestalteten, professionell aussehenden E - Commerce-Warenkorbseite in Elementor ganz einfach steigern können .

Entwerfen Sie einen professionellen WooCommerce-Einkaufswagen mit wesentlichen Addons 5.0

Das Jahr 2021 war ein fantastisches Jahr für unser Team von Essential Addons für Elementor. Wir haben die größten Meilensteine ​​erreicht und sind schneller gewachsen, als wir es uns je erträumt hatten. Und das alles dank dir. Um das Jahr mit der gleichen hohen Note zu beenden und Ihnen das beste Webbuilding-Erlebnis zu bieten, bringen wir Ihnen unser neuestes Update Essential Addons 5.0.

Die neueste Version enthält viele Verbesserungen, neue Elemente und Erweiterungen, mit denen Sie Ihre Webdesign-Fähigkeiten in Element ganz einfach entfalten können. Und wir freuen uns, Ihnen mitteilen zu können, dass dieses Update auch ein exklusives Widget enthält – EA Woo Cart .

Mit diesem unglaublichen neuen Element können Sie mit Elementor mühelos eine Designer-WooCommerce-Warenkorbseite in Ihrem Geschäft erstellen, mit nur wenigen Klicks und überhaupt OHNE CODIERUNG . Egal, ob Sie neu in der E-Commerce-Branche oder ein erfahrener Ladenbesitzer sind, Sie können dieses Essential Addons-Widget ganz einfach verwenden, um potenzielle Schaufensterbesucher in zahlende Kunden umzuwandeln.

Und sein größtes Highlight ist, dass es in Elementor vollständig anpassbar ist und mit vielen verschiedenen Designlayouts ausgestattet ist, aus denen Sie auswählen können, und genau der Ästhetik Ihres WooCommerce-Shops entspricht. Lesen Sie weiter, um mehr zu erfahren.

Richten Sie einen reibungslosen EA Woo-Wagen in Elementor ohne Codierung ein

Natürlich müssen Sie sicherstellen, dass Sie das WooCommerce-Plugin bereits installiert und konfiguriert haben , um Ihren Shop perfekt zu gestalten. In diesem Fall ist es jedoch wichtig, denn damit dieses erweiterte Widget im Elementor Editor funktioniert, müssen Sie einige Produkte aus Ihrem WooCommerce-Shop in den Warenkorb legen. Sobald dies erledigt ist, können wir das EA Woo Cart-Widget mühelos in Ihrem Geschäft verwenden. Befolgen Sie die nachstehenden Schritte, um zu erfahren, wie:

Schritt 1: Legen Sie Ihre gewünschte WooCommerce-Warenkorbseite fest

Navigieren Sie in erster Linie direkt von Ihrem WordPress-Dashboard zur Seite WooCommerce → Einstellungen und gehen Sie dann zur Registerkarte „Erweitert“ . Von hier aus können Sie jede Ihrer gewünschten Seiten als Ihre neue Warenkorbseite zuweisen.

Klicken Sie einfach auf die Option „Warenkorbseite“ und wählen Sie eine beliebige Seite aus dem Dropdown-Menü als Ihre WooCommerce-Warenkorbseite aus, wie Sie auf dem Bild unten sehen können. Sie werden bereit sein zu gehen.

WooCommerce cart

Schritt 2: Bearbeiten Sie den WooCommerce-Warenkorb in Elementor

Der nächste Schritt besteht darin, Ihre WooCommerce-Warenkorbseite mit dem Elementor-Editor mit nur wenigen Klicks zu bearbeiten. Aber bevor Sie dies tun können, müssen Sie das EA Woo Cart-Element mit Essential Addons für Elementor aktivieren.

Stellen Sie sicher, dass Sie die neueste Version der Essential Addons 5.0 PRO installiert haben , und gehen Sie dann auf der Benutzeroberfläche von Essential Addons for Elementor zur Registerkarte „Elemente“ . Du findest hier über 80 verfügbare Elemente, aber alles, was du tun musst, ist die Option „ EA Woo Cart “ umzuschalten und auf „ Einstellungen speichern “ zu klicken, um loszulegen.

WooCommerce cart

Schritt 3: Bearbeiten Sie den WooCommerce-Warenkorb in Elementor

Jetzt sind Sie bereit, eine beeindruckende Warenkorbseite in Elementor zu entwerfen. Gehen Sie also einfach zu Ihrer WooCommerce-Warenkorbseite und klicken Sie auf „ Mit Elementor bearbeiten “.

Sobald Sie sich im Elementor-Editor befinden, finden Sie das ElementEA Woo Cart “ über die Option „Suchen“ auf der Registerkarte „Elemente“ . Ziehen Sie dann einfach das Element „EA Woo Cart“ per Drag & Drop in einen beliebigen Abschnitt im Elementor Editor, wie unten gezeigt. Es ist wirklich so einfach.

WooCommerce cart

Konfigurieren Sie mühelos jeden Aspekt des EA Woo Cart

Ihr WooCommerce-Warenkorb ist jetzt eingerichtet, muss aber noch gestaltet und angepasst werden, damit er professionell und für Ihre Kunden leicht verständlich aussieht. Und dieser Abschnitt konzentriert sich darauf, wie Sie das mit Leichtigkeit tun können.

Schritt 1: Konfigurieren Sie die allgemeinen Einstellungen des EA Woo Cart

Auf der Seitenleiste des Elementor-Editors finden Sie mehrere Optionen wie „Allgemeine Einstellungen“ , „Tabellenerstellung“ oder „Warenkorbkomponenten“ auf der Registerkarte „Inhaltseinstellungen“.

In den „Allgemeinen Einstellungen“ findest du 2 verschiedene Layout-Stile für deinen EA Woo-Wagen, aus denen du wählen und die du nach deinen Wünschen anpassen kannst, wie unten gezeigt.

WooCommerce cart

Schritt 2: Ändern Sie die Beschriftungen im Tabellenersteller

Als Nächstes können Sie im „ Table Builder “ die Tabellenbeschriftungen ändern und Abschnitte ziehen, um Ihre EA Woo Cart-Preistabelle neu anzuordnen. Dies gibt Ihnen die volle Flexibilität, jedes Etikett aus allen Spalten zu ändern, die Sie der Warenkorbseite hinzugefügt haben – „Produkt“, „Preis“, „Menge“ usw.

WooCommerce cart

Schritt 3: Passen Sie die Warenkorb-Komponentenfunktion an

Und dann gehen wir weiter zum Abschnitt „ Warenkorbkomponente “, wo Sie einfach die Schaltfläche „ Warenkorbaktualisierung “ umschalten können , damit Ihre Kunden weitere Produkte zu ihrem Einkaufswagen hinzufügen können.

Aber nicht nur das, Sie können auch das „ Coupon-Formular “ umschalten, damit Kunden zum Zeitpunkt der Kasse auf der WooCommerce-Warenkorbseite einfach jeden gewünschten Coupon hinzufügen können. Außerdem können Sie die Option „ Einkauf fortsetzen “ aktivieren , um Kunden zu helfen, wieder zur Shop-Seite zurückzukehren, um mehr einzukaufen. Darüber hinaus können Sie in diesem Abschnitt sogar den Text des „Zur Kasse“ -Buttons ändern und Ihre Handlungsaufforderung interaktiver gestalten.

WooCommerce cart

All diese Schaltflächen und Optionen helfen Ihren Kunden, die WooCommerce-Warenkorbseite gründlich zu verstehen und auch mühelos durch diese Seite zu navigieren. Und so können Sie mit dem EA Woo Cart-Widget die Abbruch- und Absprungraten des Einkaufswagens sofort reduzieren.

Passen Sie den Stil des EA Woo-Wagens mit wenigen Klicks vollständig an

Und schließlich, nachdem Sie den Inhalt für Ihre EA Woo Cart-Seite konfiguriert haben , ist es an der Zeit, ihn so zu gestalten, dass er zu Ihrer WooCommerce-Website oder Markenästhetik passt. Dazu können Sie einfach auf die Registerkarte „Stil“ des Elementor-Editors klicken, um verschiedene Bereiche Ihrer Seite anzupassen.

Schritt 1: Stilisieren Sie die allgemeinen Einstellungen

Im Bereich „Allgemein“ kannst du die Hintergrundfarbe deines gesamten EA Woo Cart-Bereichs ändern. Sie können die Farbe des EA Woo Cart-Hintergrunds manuell anpassen oder globale Farben auswählen.

WooCommerce cart

Schritt 2: Gehen Sie mit dem Tabellenabschnitt in die Details

Im Abschnitt „Tabelle“ können Sie die Polsterung, den Rand, die Typografie, den Randtyp usw. des gesamten Warenkorbabschnitts ändern. Es wird schließlich dazu führen, dass sich Ihre EA Woo Cart-Seite von anderen WooCommerce-Shops abhebt und vollständig angepasst aussieht.

Schritt 3: Ändern Sie andere Designaspekte

Aber das ist nicht alles. Auf die gleiche Weise können Sie das Aussehen von „ Warenkorb “, „ Gutscheinformular“ , „ Einkauf fortsetzen “, „Schaltfläche“ und „Hinweis“ ändern . Sie können die Texte nach innen auch sogar ändern.

WooCommerce cart

Um mehr Funktionalität hinzuzufügen und deine EA Woo Cart-Seite interaktiver und attraktiver aussehen zu lassen, kannst du auch die Einstellungsoptionen „Erweitert“ erkunden.

WooCommerce cart

Eine professionell aussehende Designer-WooCommerce- Warenkorbseite

Und das ist es. Mit diesen kleinen Schritten und der einfachen Anpassung können Sie ganz einfach eine beeindruckende WooCommerce-Warenkorbseite für Ihre Website nach Ihren Wünschen erstellen. Auch das, ohne eine einzige Zeile Codierung zu verwenden.

Schauen Sie sich das Endergebnis unten an und sehen Sie, wie Ihre professionell aussehende Designer-Warenkorbseite in WooCommerce mit Hilfe des Premium Essential Addons EA Woo Cart-Widget aussieht.

WooCommerce cart

Weitere exklusive Widgets für Ihren WooCommerce-Shop

Und damit möchten wir unseren ultimativen Leitfaden zum Entwerfen eines WooCommerce-Warenkorbs in Elementor ohne Codierung und völlig einfach abschließen. Aber bevor wir gehen, möchten wir Sie über alle anderen WooCommerce-Widgets informieren, auf die Sie von Essential Addons for Elementor Zugriff erhalten.

Dieses herausragende Plugin bietet Ihnen ein Widget, mit dem Sie jeden Aspekt Ihres WooCommerce-Shops mit nur wenigen Klicks verbessern können. Es gibt 7 weitere Elemente , die Sie untersuchen können:

WooCommerce cart

Woo-Produktgalerie

Woo Produkt-Slider

Woo Produktkarussell

Woo-Produktraster

Woo-Produktvergleich

Woo-Produktkollektionen

Woo-Kasse

Probieren Sie sie auf der Essential Addons-Website aus und steigern Sie sofort den Umsatz Ihres WooCommerce-Shops mit Leichtigkeit.

Aktualisieren Sie auf Essential Addons 5.0 und steigern Sie den WooCommerce-Umsatz

Also, worauf wartest Du? Warten Sie nicht! Aktualisieren Sie jetzt auf Essential Addons 5.0 und schließen Sie sich uns an, um einen einzigartigen und hochkonvertierenden WooCommerce-Shop zu erstellen. Oder sehen Sie sich eines unserer PRO-Pakete an, beginnend bei einem exklusiven Preis von nur 39,97 $ , und steigen Sie mit all unseren Premium-Features in die Höhe von Traffic, Verkäufen und Konversionen!

Wenn Sie Vorschläge haben, teilen Sie uns dies bitte in den Kommentaren unten mit oder wenden Sie sich an unser Support-Team. Wir würden uns über Ihr Feedback freuen. Für weitere Updates, Tutorials und Tipps und Tricks abonnieren Sie unseren Blog oder treten Sie unserer freundlichen Facebook-Community bei .