So passen Sie die WooCommerce-Warenkorbseite ohne Programmierung an (kostenlos)

Die Anpassung der WooCommerce-Warenkorbseite bietet mehrere Vorteile, einschließlich des Verlassens der Warenkorbseite, ist aber kein Kinderspiel.

Auf der Warenkorbseite treffen Sie die endgültige Entscheidung, ob Sie den Warenkorb auschecken oder abbrechen möchten. Sie möchten doch nicht, dass Käufer den Warenkorb verlassen, oder? Hier müssen Sie Ihre WooCommerce-Warenkorbseite anpassen. 

In diesem Blog finden Sie eine Schritt-für-Schritt-Anleitung, wie Sie WooCommerce-Warenkorbseiten auch ohne Programmieraufwand anpassen können.

Lass uns anfangen…

Wie sieht eine Standard-WooCommerce-Warenkorbseite aus?

WooCommerce provides a very basic layout of a Cart page. Although different themes add styles to the WooCommerce cart page, it still kinda looks the same.

Hier sind allgemeine Elemente eines WooCommerce-Warenkorbseitendesigns (einschließlich, aber nicht beschränkt auf):

Sie können die WooCommerce-Warenkorbseite bearbeiten und die Elemente an Ihre Bedürfnisse anpassen. Schauen wir uns vorher an, wie die standardmäßige WooCommerce-Warenkorbseite bei verschiedenen Themen aussieht.

So sieht das Design der WooCommerce-Warenkorbseite aus WordPress Twenty Twenty-Theme:

Here is how the cart page design looks on the Twenty Twenty One Theme von WordPress:

Sogar ein beliebtes Elementor-Theme wie Hallo Elementor erhalten Sie ein sehr einfach aussehendes WooCommerce-Warenkorbseitendesign mit dem gleichen alten Layout.

Ich denke, Sie werden mir zustimmen, dass alle oben genannten Warenkorbseiten das gleiche Layout haben und nichts Ausgefallenes oder Außergewöhnliches bieten

➡️➡️ Prüfen So fügen Sie in 5 Schritten den Währungsumschalter zur WooCommerce-Website hinzu

Warum die WooCommerce-Warenkorbseite anpassen?

Laut dem Bericht von BuiltWith vom November 2023 nutzen über 6,6 Millionen Live-Websites WoCommerce.

Mit WooCommerce können Sie mit seinen Vorlagen im Handumdrehen eine gebrauchsfertige, voll funktionsfähige E-Commerce-Website erstellen, einschließlich einer Warenkorbseite. Viele dieser Websites verwenden die Standardvorlagen von WooCommerce für den Warenkorb und andere Seiten.

Sie möchten jedoch nicht, dass die Warenkorbseite Ihrer Website den anderen ähnelt, da dies Ihre Käufer wahrscheinlich abschreckt. Um sich von der Masse abzuheben, können Änderungen an der WooCommerce-Warenkorbseite oder die Anpassung des WooCommerce-Warenkorbs Abhilfe schaffen.

Es ist auch eine Tatsache, dass rund  70% der Menschen geben auf ihren Warenkorb und fahren Sie nie mit dem Bezahlen fort. Dies zeigt, wie wichtig es ist, die WooCommerce-Warenkorbseite anzupassen.

Verwenden WooCommerce-Plugins für abgebrochene Warenkörbe um verlorene Umsätze wiederherzustellen, indem Kunden automatisch daran erinnert werden, ihre Einkäufe abzuschließen.

Und es ist eine bekannte Tatsache, dass Menschen sich zu Dingen hingezogen fühlen, die anders sind und aus der Masse herausstechen.

Lassen Sie Ihre Warenkorbseite also nicht in der Masse untergehen, sondern passen Sie sie so an, dass sie auffällt und Ihnen dabei hilft, mehr Bestellungen zu erhalten. 

Nun stellt sich die Frage, wie Sie eine Warenkorbseite erstellen können, die auffällt. Nun, es gibt zwei Möglichkeiten, wie Sie ein Woocommerce-Warenkorbseitendesign erstellen können.

1. 1. Bearbeiten der WooCommerce-Dateien (erfordert Programmierkenntnisse)
2. 2. Verwenden Sie ein Drag-and-Drop-Plugin

Sie können auch unseren Blog besuchen 👉 So fügen Sie WooCommerce einen Währungsumschalter hinzu

Warum es keine gute Idee ist, Code zu bearbeiten, um eine benutzerdefinierte WooCommerce-Warenkorbseite zu erhalten

Das Bearbeiten des Codes, um die gewünschte Warenkorbseite zu erhalten, ist zwar eine Option, wird jedoch für Nicht-Programmierer nicht empfohlen. Da Sie sich für die Erstellung Ihrer Website für eine gebrauchsfertige Plattform wie WooCommerce entschieden haben, geht es Ihnen wohl nicht darum, irgendetwas von Hand zu programmieren.

Hier sind einige der Gründe, warum Programmieranfänger oder Nicht-Programmierer die Bearbeitung des Standardcodes für die Gestaltung von WooCommerce-Warenkorbseiten vermeiden sollten.

• Es erfordert, dass Sie ein erfahrener Programmierer sind und HTML, CSS, Javascript und PHP wie ein Profi beherrschen.
• Wenn der Code nicht effizient bearbeitet und optimiert wird, kann dies Ihre Website verlangsamen.
• Sie müssen den Code jedes Mal ändern, wenn Sie Ihr WooCommerce-Theme ändern möchten
• Wenn WooCommerce ein neues Update herausbringt, müssen Sie neue Änderungen vornehmen, um den Code mit einer neuen Version von WooCommerce kompatibel zu machen
• Sie können auch Ihren gesamten Code verlieren, wenn WooCommerce aktualisiert wird, wenn Sie kein untergeordnetes Theme erstellen.

Außerdem, wenn Sie Plattformen wie WordPress und WooCommerce verwenden Vermeiden Sie es von vornherein, zu programmieren. Warum sollten Sie dann das Programmieren lernen, nur um eine Warenkorbseite zu bearbeiten, oder?

Keine Sorge. Ich habe einen anderen Prozess, mit dem Sie Ihre Warenkorbseite reibungslos individuell gestalten können, ohne programmieren zu müssen. Nicht einmal eine einzige Zeile. Versprechen!

Sehen wir uns an, wie Sie die WooCommerce-Warenkorbseite ohne Programmierkenntnisse bearbeiten können!

So passen Sie die WooCommerce-Warenkorbseite mithilfe eines Drag-and-Drop-Plugins an

Jetzt können Sie eine Warenkorbseite mit einfacher Drag-and-Drop-Technologie entwerfen. Dank des WooCommerce PageBuilder-Plugins ShopEngine.

ShopEngine is the ultimate WooCommerce Baumeister mit vorgefertigte Vorlagenund Widgets zum individuellen Erstellen Ihrer WooCommerce-Seiten und Module mit nützlichen E-Commerce-Funktionalitäten. Mit diesem Plugin erhalten Sie die vollständige Kontrolle über das Design Ihrer WooCommerce-Seiten, einschließlich der Warenkorbseite.

Während ShopEngine Ihnen ein vorgefertigtes Produkt bietet Warenkorb-Vorlage, Sie können Ihre Warenkorbseite von Grund auf erstellen und WooCommerce-Warenkorbanpassungen vornehmen. In diesem Blog werde ich Sie durch den Prozess führen, wie Sie eine WooCommerce-Warenkorbseite bearbeiten, um eine völlig neue von Grund auf zu erstellen.

Brauchen Sie weitere Gründe, sich von der Nutzung von ShopEngine zu überzeugen? Lesen Sie unseren Blog weiter 11 Gründe, sich für ShopEngine zu entscheiden

Schritt #1: Installieren Sie Elementor und ShopEngine

Um mit der Anpassung der Warenkorbseite in WooCommerce zu beginnen, benötigen Sie zwei Plugins

1. Elementor
2. ShopEngine 

Da ShopEngine ein WooCommerce-Seitenersteller für Elementor und ist erfordert Elementor, Stellen Sie sicher, dass Sie installieren Elementor Erste. 

Schritt #2: Erstellen Sie eine Warenkorbseitenvorlage

Nachdem Sie beide Plugins installiert haben, erstellen Sie eine Warenkorbvorlage. So erstellen Sie eine Warenkorbseitenvorlage:

• Gehe zu: Dashboard => ShopEngine => Builders-Vorlage
• Klicken An Neue hinzufügen , um das Fenster „Vorlageneinstellungen“ zu öffnen
• Gib ein Vorlagenname Ihrer Präferenz
• Wählen Geben Sie „Warenkorb“ ein aus dem Dropdown
• Anmachen die Option „Standard festlegen“, um alle vorhandenen Warenkorbseiten zu überschreiben
• Wählen Sie unten die leere Option Beispieldesign 
• Klicke auf Änderungen speichern aktualisieren

Notiz: Um ein zu bekommen gebrauchsfertige WarenkorbvorlageWählen Sie beim Erstellen der Vorlage die Option „Beispieldesign 1“. Sie können auch jedes Element dieser vorgefertigten Vorlage bearbeiten. Ich habe mich für leer entschieden, da ich eines von Grund auf erstellen werde

Schritt #3: Wählen Sie ein Layout/eine Struktur

Jetzt ist es an der Zeit, ein Layout auszuwählen. Um anzufangen 

• Gehe zu ShopEngine => Builders-Modul
• Bewegen Sie den Mauszeiger über die Warenkorbvorlage von der Liste
• Klicke auf Mit Elementor bearbeiten

• Sobald der Elementor-Editor geöffnet wird Klicken auf „Neuen Abschnitt hinzufügen“. (+) Symbol 
• Wählen Sie nun die Struktur/Layout du magst

Schritt #4: Entwerfen Sie die Warenkorbseite mithilfe von ShopEngine-Widgets

ShopEngine stellt fünf Widgets exklusiv zur Gestaltung eines WooCommerce zur Verfügung Warenkorb-Vorlage. Neben Warenkorb-Vorlagen-Widgets können Sie auch das verwenden Gutscheinformular Widget und mehr als fünf allgemeine Widgets zum Erstellen Ihrer Warenkorbseite.

Für diesen Blog werde ich die folgenden Widgets verwenden:

• Wagentisch: Das Warenkorb-Widget zeigt alle Produkte im Warenkorb in Tabellenform mit Preis, Menge und Zwischensumme an. Kunden können die Produktmenge aktualisieren und den Warenkorb mit einem Klick leeren.
• Warenkorb insgesamt: Dieses Widget zeigt alle verfügbaren Versandarten und die Gesamtsumme der Bestellung an.
• Zurück zum Shop: Dieses Widget bietet eine Schaltfläche mit einem Link, der Sie zurück zur Shop-Seite führt.
• Gutscheinformular zur Kasse: Kunden können ihren Rabattgutschein über dieses Widget einlösen.
• Deal-Produkt: Mit diesem Widget können Sie Ihre Verkaufsprodukte auf der Warenkorbseite präsentieren, außerdem mit einem Countdown-Timer, der den Verkaufsplanzeitraum anzeigt. Dies ist ein allgemeines Widget von ShopEngine.
• Cross-Selling: Cross-Selling zeigt alle Cross-Selling-Produkte attraktiv auf der Warenkorbseite an.

Zuerst müssen Sie Schalten Sie die Widgets ein Sie auf Ihrer Warenkorbseite verwenden möchten. Zum Einschalten  

• Gehe zu Admin-Dashboard => ShopEngine => Widgets. 
• Scrollen Sie und suchen Sie nach dem Widget, das Sie verwenden möchten
• Aktivieren die Widgets, die Sie verwenden möchten
• Klicke auf Änderungen speichern oben auf der Seite

Now it’s time to drag and drop the WooCommerce cart widgets into your layout. Go back to the Cart page editor mode:

• Suchen für das Widget
• Ziehen und ablegen the WooCommerce cart widgets (one by one)

Notiz: Sie können die Schaltflächen „Einkauf fortsetzen“ und „Alle ausblenden“ ausblenden.

Da ShopEngine vollständig mit Elementor kompatibel ist, können Sie mehrere Layouts auf derselben Seite verwenden. Für den nächsten Teil verwenden wir ein anderes Layout. Dazu füge ich einen neuen Abschnitt mit einer anderen Struktur hinzu und füge Cross-Selling und per Drag-and-Drop hinzu Widgets für Deal-Produkte.

Notiz: Du brauchst Cross-Selling-Produkte hinzufügen Und Produkte zum Verkauf anbieten mit Zeitplänen aus dem Admin-Dashboard unter Produkteinstellungen für Cross-Selling- und Deal-Produkte, die im Frontend angezeigt werden.

Sowohl Cross-Selling- als auch Deal-Produkte bieten Ihnen unterschiedliche Vorteile Einstellungen, die Sie anpassen können. Passen Sie also nach dem Ziehen und Ablegen des Widgets die Einstellungen nach Ihren Wünschen an.

Mit dem Cross-Selling-Widget, Sie erhalten Optionen wie „Slider aktivieren“ ein-/ausschalten, „Blitzverkauf“, „Sonderpreis“, „Warenkorb-Button“ und die Anzahl der anzuzeigenden Produkte unter den Inhaltseinstellungen anzeigen/ausblenden. Für Slider erhalten Sie Optionen wie „Folien pro Ansicht“, „Schleife“ und „Automatische Wiedergabe“, „Foliengeschwindigkeit“ usw. Darüber hinaus erhalten Sie unter der Registerkarte „Erweitert“ auch die Optionen „Sortieren nach“ und „Bestellung“.

Deal-Produkte bieten Ihnen Inhaltseinstellungen wie „Reihenfolge“, „Sortieren nach“, „Datum“, „Produkt anzeigen“, „Spalte“, „Spaltenlücke“ und „Zeilenlücke“. Sie erhalten auch andere Einstellungen, darunter „Verkauf aktivieren“, „Abzeichen“, „Verkaufsabzeichen“, „Verkauf“, „Titelwortbegrenzung“, „Prozentabzeichen“, „Countdown-Uhr“ und „Tage“.

Schritt #5: Passen Sie die Stilparameter der Woocommerce-Warenkorbseite an

Mit ShopEngine haben Sie nicht nur die Struktur, sondern auch die vollständige Kontrolle über das Design Ihrer Warenkorbseite.

Um die Stilparameter von ShopEngine-Widgets zu ändern, bewegen Sie den Mauszeiger über das Widget, das Sie bearbeiten möchten, um in der oberen rechten Ecke eine Bearbeitungsoption zu finden. Klicken Sie auf diese Option, um alle Woocommerce-Warenkorbeinstellungen für Inhalte und Inhalte zu finden Stile auf dem Elementor-Bedienfeld auf der linken Seite.

Werfen wir einen Blick auf die Stileinstellungen, die Sie für jedes der in diesem Blog verwendeten Widgets anpassen können:

Warenkorbtisch: 

Sie können die Stileinstellungen des Tabellenkopfes, des Tabellenkörpers, des Produktbilds und der Menge ändern. Tabellenfuß und globale Schriftart. Weitere Informationen finden Sie in unserem Dokumentation zum Cart-Tisch.

Zurück zum Shop:

Sie ändern die Schaltflächenausrichtung, die Typografie, die Rahmenfarbe, den Rahmenradius und den Rahmenschatten. Weitere Informationen finden Sie in unserem Dokumentation zum Return To Shop Widget.

Gutscheinformular:

Für das Coupon-Formular erhalten Sie eine Stileinstellung für Informationen, Beschreibung, Coupon-Formular, Schaltfläche „Anwenden“ und globale Schriftart. Auf unserer Seite können Sie sich die Stiloptionen im Detail ansehen Dokumentation zum Coupon-Formular.

Warenkorb insgesamt:

Für das Warenkorb-Gesamt-Widget stehen Ihnen viele Stiloptionen zur Verfügung, mit denen Sie den Stil von Tabelle, Eingabe, Checkout-Aktualisierungsschaltfläche und globaler Schriftart ändern können. Detailliertere Einstellungen für den WooCommerce-Warenkorbstil finden Sie in unserem Dokumentation zum Warenkorb insgesamt.

Cross-Selling: 

Für das Cross-Selling-Widget erhalten Sie verschiedene Stiloptionen, darunter Stile für Artikel, Flash-Sales, Bilder, Titelrennen, Preis, „In den Warenkorb“, Slider-Stil und globale Schriftart. Weitere Informationen zum Cross, Sale-Stil Schauen Sie sich die Dokumentation an.

Deal-Produkte:

Sie erhalten verschiedene Stiloptionen für Produktverpackung, Produktbild, Produktabzeichen, Countdown-Uhr, Inhaltsstil, Bestands- und Fortschrittsbalken sowie globale Schriftart. Erfahren Sie mehr über die Stiloptionen Schauen Sie sich unsere Dokumentation zum Deal-Produkt-Widget an.

Step #6: Update and Preview custom WooCommerce cart page design

Nachdem Sie die Stile geändert haben, klicken Sie auf Aktualisieren Um die Änderungen zu speichern, klicken Sie auf Vorschau um die Änderungen zu sehen.

Wenn Sie das in diesem Blog erwähnte Layout und die Einstellungen befolgt haben, sollten Sie in WooCommerce mit ShopEngine eine benutzerdefinierte Warenkorbseite wie die folgende entwerfen:

Bonus: Tipps zur Steigerung Ihres E-Commerce-Shop-Verkaufs mit ShopEngine-Modulen

Jetzt wissen Sie, wie Sie eine Warenkorbseite in Woocommerce erstellen und anpassen. ShopEngine bietet Ihnen zusätzlich zum WooCommerce-Warenkorbseiten-Vorlagenersteller nützliche Module mit wichtigen E-Commerce-Funktionen, die den Umsatz Ihres Online-Shops steigern können. Zu den ShopEngine-Modulen gehören:

• Schnellansicht
• Variationsmuster
• Wunschzettel
• Produktvergleich

Ich bin mir sicher, dass Sie als Inhaber eines WooCommerce-Shops wissen, wie wichtig diese Funktionen für ein gutes Online-Kauferlebnis sind. Wenn wir über die Warenkorbvorlage sprechen, verwenden Sie die Schnellansicht Taste und die Wunschzettel Klicken Sie auf die Schaltfläche „Cross-Selling“, um Ihren Kunden ein besseres Einkaufserlebnis zu bieten. Und das erhöht die Chance, dass Ihre Kunden mehr Produkte kaufen.

Mit Quick View können Kunden mit nur einem Klick die vollständigen Informationen zu jedem Produkt einsehen. Ebenso können Benutzer das Produkt mit nur einem Klick über die Schaltfläche des Wunschlistenmoduls zu ihrer Wunschliste hinzufügen und später zur Kasse gehen. Beide Funktionen können eine wichtige Rolle bei der Steigerung des Produktabsatzes spielen.

Passen Sie also nicht nur Ihre Warenkorbseite an, sondern nutzen Sie ShopEngine-Module, um Ihren Kunden ein tolles Einkaufserlebnis zu bieten und den Umsatz Ihres Shops zu steigern.

Bonus-Blogs:
✅ So passen Sie die WooCommerce-Kategorieseite ohne Codierung an
✅ So passen Sie die Seite „Mein Konto“ von WooCommerce mit ShopEngine an 
✅ So passen Sie die WooCommerce-Shop-Seite mit ShopEngine an 
✅ So passen Sie die WooCommerce-Produktseite mit ShopEngine an
✅ So passen Sie die WooCommerce-Checkout-Seite mit ShopEngine an
✅ 9+ nützliche und beste Warenkorb-Plugins für WordPress und WooCommerce

Warum ein Upgrade auf ShopEngine Pro?

Ehrlich gesagt bietet Ihnen ShopeEngine genügend Funktionen, um Ihren Online-Shop zu einem guten zu machen. Aber warum sollte man sich mit dem Guten zufrieden geben, wenn man das Beste bekommen kann, oder?

ShopEngine Pro bietet Ihnen eine Vielzahl von Funktionen, die den Online-Einkauf in Ihrem E-Commerce-Shop zum besten Einkaufserlebnis für Ihre Kunden machen. Neben der Anpassung der Woocommerce-Warenkorbseiten können Sie darauf zugreifen Über 20 Module die einschließen Countdown zum Flash-Sale, Abzeichen, Verkaufsbenachrichtigung, Schnelle Kaufabwicklung, Parietale Zahlung, Währungsumschalter, und viele mehr.

Nicht nur die Kundenzufriedenheit, sondern auch die ShopEngine-Funktionen sind darauf ausgelegt, die Online-Shop-Verwaltung mit Modulen wie supereinfach zu gestalten Vorbestellen, Nachbestellung, Zusätzliches Checkout-Feld, und viele mehr.

Nicht zu vergessen 16+ vorgefertigt Vorlagen mit vollständiger WooCommerce-Anpassungskontrolle und Über 70 erweiterte Widgets Wenn Sie möchten, können Sie jede WooCommerce-Vorlage von Grund auf neu erstellen.

Wenn es um die Warenkorbseite geht, können Sie mit ShopEngine auch eine benutzerdefinierte WooCommerce-Warenkorbseite für Ihren Online-Shop erstellen.

Ein Plugin mit so vielen Funktionen, vorgefertigten Vorlagen und Modulen, dass man es auch zu einem sehr vernünftigen Preis unbedingt ausprobieren sollte, oder?

Holen Sie sich noch heute Ihre Version von ShopEngine und machen Sie sich nie wieder Gedanken darüber, wie Sie WooCommerce anpassen können!

Letzte Worte

Glückwunsch! Sie haben Ihre benutzerdefinierte WooCommerce-Warenkorbseite erfolgreich neu gestaltet. War das nicht einfach? 

Nun, genau das macht ShopEngine. Jetzt wissen Sie, wie Sie eine WooCommerce-Warenkorbseite ohne Programmieraufwand anpassen können.

Beschränken Sie Ihren Online-Shop also nicht nur auf Standardstile, sondern gestalten Sie Ihre gesamte WooCommerce-Website neu und nutzen Sie die Module, um Ihr Online-Geschäft erfolgreicher als je zuvor zu machen. 

Welche WooCommerce-Seite werden Sie als Nächstes anpassen? Vergessen Sie nicht, Ihre Erfahrungen mit ShopEngine zu teilen.