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.

Here is how the WooCommerce cart page design looks on the WordPress Twenty Twenty theme:

Here is how the cart page design looks on the Twenty Twenty One theme of 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

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.

Use WooCommerce abandoned cart plugins to recover lost sales by automatically reminding customers to complete their purchases.

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

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

Now you can design a cart page with easy drag-and-drop technology. Thanks to the WooCommerce PageBuilder plugin ShopEngine.

Da sind viele top WordPress shopping cart plugins for WooCommerce, ShopEngine is the ultimate WooCommerce builder with premade templates, and widgets to custom build your WooCommerce pages and modules with useful eCommerce functionalities. With this plugin, you get complete control over the design of your WooCommerce pages including the Cart page.

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.

We recommend to create a custom shop page to showcase your products in the best style.

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 provides five widgets exclusively to design a WooCommerce Cart Template. Along with Cart Template widgets, you can also use the 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.

As ShopEngine is totally compatible with Elementor, you can use multiple layouts on the same page. For the next part, let’s use a different layout.  To do so, I am going to add a new section with a different structure and drag and drop Cross-sell and Deal products widgets.

Notiz: Du brauchst Cross-Selling-Produkte hinzufügen and set products on sale with schedules from the admin dashboard under product settings for Cross-sell and Deal products to show up on the front end.

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:

You change Button Alignment, Typography, Border Color, Border Radius, and Box Shadow. For that, you can check out Return To Shop Widget.

Gutscheinformular:

For the coupon form, you will get a style setting for info, description, coupon form, apply button, and global font. You can easily do that with the Coupon form.

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: 

For the Cross-sell widget, you get various style options which include styles for items, flash sales, image, Title racing, price, Add to cart, Slider style, and global font. For more details about Cross, Sale style check out the documentation.

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:

After optimizing the cart page and customizing it, make sure to customize the WooCommerce checkout page to get more conversions. Also, you can offer WooCommerce floating cart to increase the number of add to carts.

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
• Category page
• Customize the WooCommerce product page
• 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.

If the cart page is not showing properly, there could be an empty cart error. Here is how to solve empty cart error issue.

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.

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 Flash sale countdown, badges, Sales Notification, Quick checkout, Parietal payment, Currency Switcher, 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 Preorder, Backorder, Additional Checkout Field, 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.