So passen Sie eine WooCommerce-Warenkorbseite an, ohne die Kasse zu beschädigen 

Als ich zum ersten Mal die Warenkorbseite eines WooCommerce-Shops öffnete, den ich verwaltete, nahm ich an, etwas sei kaputtgegangen. Jede andere Seite trug das Branding des Kunden. Der Warenkorb war eine einfache Tabelle mit einem grauen Button.

Nichts war kaputtgegangen. Der Standard-WooCommerce-Warenkorb ist wirklich eine einfache Tabelle ohne Cross-Sells und ohne Vertrauenssignale, und auf einem Handy befindet sich der Checkout-Button unter dem Fold.

Ich habe 15 Jahre damit verbracht, WordPress-Themes und Seitenlayouts anzupassen, und der Warenkorb ist die Seite, die Besitzer überspringen. Wie Sie Ihre WooCommerce-Warenkorbseite anpassen, hängt von Ihrem Theme ab, also fangen Sie dort an.

Überprüfen Sie, welche Warenkorbseiten-Route Ihr Theme verwendet

Es gibt drei Möglichkeiten, eine WooCommerce-Warenkorbseite zu bearbeiten, und Ihr Theme bestimmt, welche beiden Ihnen offen stehen. Prüfen Sie das, bevor Sie etwas anfassen.

Öffnen Sie Darstellung in Ihrem WordPress-Dashboard. Wenn Sie Editor sehen, sind Sie auf einem Block-Theme. Wenn Sie stattdessen Anpassen sehen, sind Sie auf einem klassischen Theme.

Dieser eine Menüpunkt ist das Erste, was ich auf jeder Website, die ich übernehme, überprüfe, da die Hälfte der Anleitungen zu diesem Thema von der falschen Antwort ausgeht.

Block-Theme: Bearbeiten Sie die Warenkorb-Vorlage im Seiteneditor

Gehen Sie zu Darstellung » Editor, dann zu Vorlagen » WooCommerce. Öffnen Sie Seite: Warenkorb. Das bringt Sie zur Warenkorbseiten-Vorlage selbst, nicht zu einer einzelnen Seite.

Der WooCommerce-Warenkorbartikel-Block ist das Teil, das in dieser Vorlage die Arbeit leistet. Es ist ein Wrapper, der die Produkte des Warenkorbs, die Bestellsummen, das Gutscheinfeld, die Versandoptionen und den Checkout-Button enthält.

Öffnen Sie die Listenansicht und Sie können jeden dieser Teile auswählen und ihn einzeln bearbeiten. Wenn der Warenkorb leer ist, wechselt der Block zu seiner Ansicht für leere Warenkörbe mit einer Nachricht und Produktvorschlägen.

Sie können das Layout der Vorlage, ihre Farben und alle Blöcke, die Sie um den Warenkorb herum hinzufügen, ändern. Was Sie nicht einfach ändern können, ist das Aussehen der eigenen Felder und Schaltflächen des Warenkorbs. Diese folgen den Einstellungen Ihres Themes, nicht einem eigenen Bedienfeld.

Klassisches Theme: Bearbeiten Sie die Seite mit dem Warenkorb-Shortcode

Gehen Sie bei einem klassischen Theme zu Seiten » Alle Seiten und öffnen Sie die Seite, die als Ihr Warenkorb zugewiesen ist. Darin finden Sie eine einzelne Inhaltszeile, den [woocommerce_cart] Shortcode.

Dieser Shortcode ist der gesamte Warenkorb. WooCommerce tauscht ihn beim Laden der Seite gegen die Warenkorbtabelle aus, und Ihr Theme bestimmt, wie diese Tabelle aussieht.

Sie können Inhalte frei darüber und darunter hinzufügen. Darin können Sie fast nichts ändern. Lassen Sie den Shortcode, wo er ist, es sei denn, Sie ersetzen ihn durch einen Warenkorb-Block eines Builders, was der dritte Weg ist.

Jedes Theme: Erstellen Sie die Warenkorbseite in einem visuellen Builder

Der dritte Weg funktioniert bei beiden Theme-Typen, da der Builder die Seite komplett übernimmt. Sie entwerfen eine Warenkorb-Seiten-Vorlage und platzieren den eigenen Warenkorb-Block des Builders darauf und weisen WooCommerce darauf hin.

Jeder Builder, mit dem ich im Laufe der Jahre gearbeitet habe, einschließlich Beaver Builder, Elementor und Divi, gibt Ihnen die wirkliche Kontrolle über das Layout und nimmt Ihrem Theme die Entscheidungsgewalt.

Dies ist der Weg, den der Rest dieser Anleitung durchläuft, unter Verwendung von SeedProd.

Drei Warenkorbseiten-Routen im Vergleich

Alle drei Wege sind Dinge, die ein nicht-technischer Shop-Besitzer tun kann, ohne eine Vorlagendatei zu öffnen. Was sie unterscheidet, ist, wie viel vom Warenkorb selbst Sie neu gestalten dürfen.

Weg	Funktioniert auf	Was Sie ändern können	Was es nicht tun wird	Kosten
Seiteneditor	Nur Block-Themes	Vorlagenlayout, Farben und alle Blöcke, die Sie um den Warenkorb herum hinzufügen	Die eigenen Felder und Schaltflächen des Warenkorbs über die Einstellungen Ihres Themes hinaus neu gestalten	Kostenlos mit WooCommerce
Klassisch	Nur klassische Themes	Alles über und unter dem [woocommerce_cart] Shortcode	Die Warenkorbtabelle selbst ändern, die Ihr Theme steuert	Kostenlos mit WooCommerce
SeedProd	Jedes Theme, Block oder klassisch	Warenkorbfarben, Schriftarten, Schaltflächen, Felder, Rahmen sowie jeder andere Block auf der Seite	Läuft auf den kostenlosen Plänen Basic, Plus oder Pro, da der Warenkorb-Block nur Elite vorbehalten ist	SeedProd Elite, 599 $ pro Jahr

Ich empfehle den Builder-Weg, da er der einzige ist, der es Ihnen ermöglicht, die Schaltflächen, Felder und Summen des Warenkorbs neu zu gestalten, anstatt sie zu erben. In einem Shop, in dem der Warenkorb die am wenigsten gebrandete Seite ist, ist das die ganze Arbeit.

Wenn Ihr Theme die Warenkorbtabelle bereits gut rendert, erledigt der Website-Editor den Rest kostenlos. Das Hinzufügen eines Vertrauens-Badges und eines Produktgitters um den Warenkorb herum erfordert kein kostenpflichtiges Plugin.

SeedProd kann auch ein komplettes WooCommerce-Theme erstellen im Elite-Plan, der die Shop-Seite, Produktarchive, einzelne Produktseiten, den Warenkorb und die Kasse abdeckt. Nehmen Sie also diesen Weg, wenn der Warenkorb nicht die einzige Seite ist, die Sie ändern möchten.

Für die Änderung einer einzelnen Seite für ein Plugin zu bezahlen, ist ein berechtigter Einwand. Deshalb steht der kostenlose Website-Editor-Weg zuerst in der Tabelle. Wenn der Warenkorb die einzige Seite ist, die Sie jemals anfassen werden, sprechen die Zahlen nicht für Elite.

Eine benutzerdefinierte Vorlage bricht die Kasse nicht, da die Kasse eine separate WooCommerce-Seite mit eigener Vorlage ist. Die Übergabe zwischen ihnen ist das Einzige, was kaputt gehen kann, und Schritt 4 erklärt, wie Sie beweisen, dass dies nicht der Fall war.

Wann Sie ohne Warenkorbseite besser dran sind

Ihr Shop benötigt möglicherweise gar keine Warenkorbseite, und es gibt drei gängige Möglichkeiten, diese zu reduzieren oder zu entfernen.

• Ein Seiten-Warenkorb: ein Bereich, der sich über die Produktseite schiebt, wenn jemand einen Artikel hinzufügt, sodass er die Seite, die er gerade durchsucht, nie verlässt.
• Warenkorb überspringen: die Schaltfläche „In den Warenkorb“ leitet den Käufer direkt zur Kasse, wodurch ein Schritt aus dem Ablauf entfernt wird.
• Warenkorb und Kasse zusammenführen: eine Seite enthält die Warenkorbansicht und das Zahlungsformular, sodass der Käufer den Gesamtbetrag und die Felder zusammen sieht.

Keine dieser Optionen ist ein Kernverhalten von WooCommerce. Ein Seiten-Warenkorb stammt normalerweise von Ihrem Theme oder einem speziellen Plugin, und das Überspringen des Warenkorbs erfordert ebenfalls eines.

Die Entscheidung hängt von der Warenkorbgröße ab. Wenn Käufer also jeweils nur einen Artikel kaufen, ist die Warenkorbseite eine Hürde, und das Entfernen ist der richtige Schritt.

Behalten Sie die Warenkorbseite bei, wenn Warenkörbe normalerweise mehrere Produkte enthalten oder wenn Sie eine Schwelle für kostenlosen Versand haben. Beides erfordert einen Bildschirm, auf dem der Käufer den laufenden Gesamtbetrag sehen und entscheiden kann, mehr hinzuzufügen.

Eine benutzerdefinierte Warenkorbseite holt Verkäufe zurück, die das Standardlayout verliert

Eine benutzerdefinierte Warenkorbseite holt verlorene Verkäufe zurück, da die Standardseite diese aufgrund von Details verliert, die Sie selbst überprüfen können. Öffnen Sie Ihre Warenkorbseite in einem Tab und Ihre Homepage in einem anderen und vergleichen Sie die beiden.

Der Standard-Warenkorb enthält kein Logo, kein Vertrauenssignal und nichts, das auf ein zweites Produkt hinweist. Auf einem Handy befindet sich die Schaltfläche zur Kasse normalerweise unterhalb des sichtbaren Bereichs.

Der Warenkorb ist die Seite, die ich immer unberührt vorgefunden habe, wenn ich einen Shop übernehme, weil Eigentümer die Homepage und die Produktseiten gestalten und dann die Puste ausgeht.

Laut dem Baymard Institute werden etwa 70 % der Online-Einkaufswagen abgebrochen, was im Durchschnitt 70,22 % über 50 separate Studien hinweg entspricht. Der Abbruch von Einkaufswagen hat viele Ursachen, und die Warenkorbseite ist der Teil, den Sie kontrollieren.

Jede der folgenden Lösungen schließt eine dieser Lücken, daher hier einige Möglichkeiten, Ihren WooCommerce-Warenkorb für Conversions zu optimieren:

• Bieten Sie kostenlosen Versand an oder zeigen Sie, wie nah Kunden daran sind, ihn zu qualifizieren
• Wenden Sie automatische Rabatte an oder zeigen Sie Gutscheincode-Felder deutlich an
• Warenkorb-Gesamtbeträge leicht lesbar und verständlich machen
• Fügen Sie Vertrauenssignale wie Testimonials, Bewertungen oder Sicherheitsabzeichen hinzu
• Aktualisieren Sie den Gesamtbetrag sofort, wenn jemand eine Menge ändert, ohne Seitenneuladung und ohne separate Aktualisierungsschaltfläche

So passen Sie die WooCommerce-Warenkorbseite an

Der Weg, der auf jedem Theme funktioniert, ist, die Warenkorbseite in einem visuellen Builder zu erstellen und dann WooCommerce darauf zu verweisen. Viele Leute greifen stattdessen zu einem Warenkorb-Plugin, was eine vernünftige Entscheidung ist, wenn Sie nur die bestehende Tabelle neu gestalten möchten.

SeedProd ist ein Drag-and-Drop-Website-Builder für WordPress mit integrierten WooCommerce-Blöcken, einschließlich des Warenkorb-Blocks, den diese Erstellung verwendet. Sie bearbeiten also visuell und sehen, wie sich die Warenkorbseite während der Arbeit verändert.

In über 15 Jahren habe ich die meisten visuellen Website-Builder auf dem Markt genutzt. Dies ist derjenige, den ich auf unseren eigenen Websites verwende. Hier ist dieser Weg Schritt für Schritt.

Schritt 1. SeedProd installieren und aktivieren

Der erste Schritt ist der Download einer Kopie des WordPress Landing Page Plugins SeedProd.

Installieren und aktivieren Sie dann das Plugin auf Ihrer WordPress-Website. Hilfe zu diesem Schritt finden Sie in dieser detaillierten Anleitung zum Installieren eines WordPress-Plugins.

Ich verwende hier den Elite-Plan, da hier die WooCommerce-Blöcke enthalten sind. Nichts in den folgenden Schritten ändert sich bei einem anderen Plan. Sie werden nur den Warenkorb-Block nicht finden.

Nachdem Sie SeedProd auf Ihrer WordPress-Seite aktiviert haben, gehen Sie zu SeedProd » Einstellungen und geben Sie Ihren Produktlizenzschlüssel ein.

Schritt 2. Erstellen Sie eine neue WooCommerce-Warenkorbseiten-Vorlage

Nach der Aktivierung Ihres Lizenzschlüssels gehen Sie zu SeedProd » Seiten und klicken Sie auf die Schaltfläche „Neue Landing Page hinzufügen“, um Ihre Warenkorbseite zu erstellen.

Von dort aus können Sie eine Warenkorbseitenvorlage auswählen, die als Grundlage für Ihr Design dient.

SeedProd liefert über 300 mobilfreundliche Vorlagen in den Pro- und Elite-Plänen, die die meisten Branchen abdecken. Wenn Sie eine Vorlage finden, die Ihnen gefällt, bewegen Sie den Mauszeiger darüber und klicken Sie auf das „Häkchen“-Symbol, um sie zu starten.

Für eine Warenkorbseite beginne ich jedes Mal mit der leeren Vorlage, da eine Warenkorbseite zwei Spalten und sonst wenig benötigt. Eine Marketingvorlage gibt Ihnen nur Abschnitte, die Sie löschen müssen.

Nachdem Sie Ihre Vorlage ausgewählt haben, öffnet sich ein Popup. Geben Sie einen Namen und eine URL für Ihre Seite ein. Klicken Sie dann auf die Schaltfläche „Speichern und mit der Bearbeitung der Seite beginnen“, um die Vorlage im visuellen Editor von SeedProd zu öffnen.

Schritt 3. Layout und Design der Warenkorbseite anpassen

Gestalten Sie zuerst die Ansicht für das Telefon und dann die für den Desktop, da ein Warenkorb-Layout, das auf einem Telefon funktioniert, fast immer auch auf einem breiten Bildschirm funktioniert. Verwenden Sie den Geräteumschalter des Editors, um zwischen den beiden zu wechseln.

Überprüfen Sie Ihre eigenen Analysen für die Aufteilung zwischen Desktop und Mobilgeräten, anstatt dies anzunehmen, und gestalten Sie dann für das, was gerade gewinnt.

Das Layout, das auf einer Warenkorbseite die meiste Arbeit leistet, ist eine Seitenleiste mit Inhalten. Der Warenkorb kommt in die breite Spalte, Testimonials und Sternebewertungen in die schmale. Soziale Beweise bleiben dann sichtbar, während der Käufer die Gesamtsumme liest.

Der Drag-and-Drop-Website-Builder von SeedProd hat ein deutliches 2-Spalten-Layout, das die Verwendung erleichtert:

1. Links befinden sich Blöcke und Abschnitte zur Anpassung Ihres Designs
2. Rechts befindet sich eine Live-Vorschau Ihrer Seite

Das Hinzufügen von Inhalten zu Ihrer Warenkorbseite ist so einfach wie das Ziehen eines Blocks von links in Ihre Vorschau auf der rechten Seite.

Logo hinzufügen

Das Logo ist das günstigste Vertrauenssignal auf einer Warenkorbseite und das am schnellsten hinzuzufügende, da ein Käufer, der auf einem nicht markengeschützten Warenkorb landet, innehält, um zu überprüfen, ob er sich noch auf Ihrer Website befindet.

Zuerst benötigen Sie einen Abschnitt, um Ihre Seitenelemente zu halten. Wählen Sie ein Abschnittslayout, wie z. B. die Standardsektion.

Wählen Sie als Nächstes den Block „Bild“ und ziehen Sie ihn in Ihren neuen Abschnitt auf der rechten Seite.

Das Klicken auf den Bildblock öffnet das Bedienfeld für die Inhaltseinstellungen. Laden Sie ein Logo von Ihrem Computer oder der WordPress-Mediathek hoch. Von dort aus können Sie einen Link zu Ihrer Homepage hinzufügen, Ihr Logo in der Größe ändern und die Ausrichtung ändern.

WooCommerce-Warenkorb hinzufügen

Fügen Sie nun Ihren WooCommerce Warenkorb zum Design hinzu. Fügen Sie einen neuen Abschnitt hinzu und wählen Sie das Inhalts- Seitenleistenlayout.

Die breite Spalte enthält den Warenkorb. Die schmale ist dort, wo die sozialen Beweise platziert werden.

Um Ihren WooCommerce-Warenkorb zur Seite hinzuzufügen, scrollen Sie nach unten zum Abschnitt WooCommerce-Blöcke und ziehen Sie den Block „Warenkorb“ in Ihren neuen Abschnitt.

Klicken Sie auf das Warenkorb-Einstellungssymbol und die Registerkarte „Stile“ wird in fünf Gruppen unterteilt, die jeweils einen anderen Teil des Warenkorbs steuern:

• Kopfzeilen: die Textfarbe, der Hintergrund und die Schriftart der Kopfzeile des Warenkorbs
• Schaltflächen: der Schaltflächenstil (Flach, 2D, Vintage, Ghost oder Link), die Farbe und der Eckradius
• Felder: die Hintergrund-, Text- und Randfarben der Gutscheincode- und Mengeneingaben
• Warnungen: die Hervorhebungsfarben für Informations-, Fehler- und Erfolgsmeldungen
• Warenkorb: der Rahmen, der Hintergrund, die Textfarbe und die Schriftarten des Containers

Ich habe die Schaltflächenfarben geändert, um sie an das Branding und Logo des Shops anzupassen.

Die Checkout-Schaltfläche ist die einzige Schaltfläche auf dieser Seite, die jemand drücken soll. Machen Sie sie zum offensichtlichsten Element auf dem Bildschirm.

Bewertungen und Testimonials hinzufügen

In diese zweite Spalte habe ich Kundenrezensionen und Sternebewertungen eingefügt, da soziale Beweise einen Käufer, der kurz vor dem Auschecken steht, dazu bewegen können, den Kauf abzuschließen.

Um Testimonials zu Ihrer WooCommerce-Warenkorbseite hinzuzufügen, finden Sie den Block „Testimonials“ unter der Überschrift „Erweiterte Blöcke“. Ziehen Sie ihn in Ihre schmale rechte Spalte.

Wie bei jedem SeedProd-Block werden durch Klicken die Einstellungen zur Anpassung des Inhalts angezeigt. Sie können ein benutzerdefiniertes Kopfbild und einen Kundennamen hinzufügen und die Ausrichtung ändern. Mehrere Bewertungen können in einer Testimonial-Karussell laufen.

Um Ihre Bewertungen noch überzeugender zu gestalten, ziehen Sie den Block „Sternebewertung“ und platzieren Sie ihn unter Ihrem Testimonial-Karussell.

Halten Sie die Bewertungen auf gleicher Höhe mit den Warenkorb-Gesamtsummen, anstatt darunter, da der Käufer dann den Preis und die Bestätigung auf einen Blick liest.

Knappheit und Dringlichkeit hinzufügen

Dringlichkeit funktioniert auf einer Warenkorbseite, da der Käufer bereits entschieden hat, dass er die Sache will.

Der einfachste Weg, Knappheit zu Ihrer WooCommerce-Warenkorbseite hinzuzufügen, ist mit einem Knappheits-Timer oder Countdown-Uhr. SeedProd hat diese Option integriert, und es ist auch einer der schnellsten Wege zu einem WooCommerce-Checkout-Klick.

Wählen Sie den Block „Countdown-Timer“ aus dem Abschnitt „Erweiterte Blöcke“. Ziehen Sie ihn an den Anfang Ihres Warenkorbs. Wählen Sie dann die Option „Besuchertimer“, damit der Timer für jeden Besucher neu gestartet wird.

Dann können Sie im Tab „Erweiterte Einstellungen“ die Farben anpassen, damit sie zum Rest Ihres Warenkorbs passen.

Fügen Sie nun eine Überschrift hinzu, die den Leuten sagt, wie lange das Angebot läuft. Ziehen Sie den Block „Überschrift“ und geben Sie Ihren Text ein.

Cross-Selling von WooCommerce-Produkten

Der Warenkorb ist der beste Ort in Ihrem Shop, um ein zweites Produkt vorzuschlagen, da der Käufer sich bereits zum Kauf von etwas verpflichtet hat und die Anfrage gering ist.

SeedProd hat mehrere Produktgitter, die Produkte auf jeder Seite anzeigen.

Gehen Sie zum Abschnitt „WooCommerce“-Blöcke und wählen Sie aus:

• Aktuelle Produkte
• Sonderangebote
• Bestseller-Produkte
• Vorgestellte Produkte
• Top-bewertete Produkte

Ziehen Sie zum Beispiel den Block „Angebotsartikel“. Fügen Sie ihn direkt unter Ihrem WooCommerce-Warenkorb ein.

Diese Gitter sind statisch, sodass jeder die gleichen Produkte sieht. WooCommerce hat auch seine eigenen Cross-Sells, die Sie pro Produkt festlegen und die nur erscheinen, wenn dieses Produkt im Warenkorb ist.

Verwenden Sie ein statisches Gitter, wenn Ihr Katalog klein ist und die meisten Artikel für die meisten Käufer geeignet sind. Verwenden Sie WooCommerce Cross-Sells oder den Upsells-Block von SeedProd, wenn die richtige Empfehlung davon abhängt, was sich bereits im Warenkorb befindet.

Hinzufügen eines Gutscheinfeldes und Versandkostenrechners

Warenkorb-Gesamtsummen und ein Versandkostenrechner sind die beiden Dinge, nach denen Käufer suchen, bevor sie sich entscheiden, und beides ist Teil des Warenkorb-Blocks und nicht separate Blöcke, die Sie hineinziehen.

Der Gutscheincode und die Mengenfelder sind die Gruppe „Felder“ im Tab „Stile“, also dort gestalten Sie sie neu. Sie ändern, wie sie aussehen, nicht ob sie erscheinen.

Ob sie erscheinen, entscheidet WooCommerce. Schalten Sie also den Versandkostenrechner unter WooCommerce » Einstellungen » Versand ein und erstellen Sie Ihre Gutscheincodes unter Marketing » Gutscheine.

Ein Käufer, der die Versandkosten nicht sehen kann, nimmt das Schlimmste an. Wenn man sie im Warenkorb anzeigt, nimmt man diese Vermutung vorweg, bevor die Checkout-Seite dies tut.

Gestaltung der leeren Warenkorbseite

Eine leere Warenkorbseite ist in den meisten Shops eine Sackgasse, da sie anzeigt, dass der Warenkorb leer ist und dort endet, was einen Besuch von jemandem verschwendet, der gerade noch eingekauft hat.

Der eigene Warenkorb-Block von WooCommerce behandelt dies in einem Block-Theme. Wenn der Warenkorb nichts enthält, wechselt der Block zu seiner Ansicht „Leerer Warenkorb“ mit einer Nachricht und Produktvorschlägen.

Auf einer Builder-Seite gestalten Sie diesen Zustand selbst, da die Blöcke, die Sie um den Warenkorb herum platzieren, normale Seiteninhalte sind und weiter gerendert werden, unabhängig davon, ob der Warenkorb Artikel enthält oder nicht.

Füllen Sie die schmale Spalte mit einem Raster „Aktuelle Produkte“ und einem Link zurück zu Ihrem Shop. Ein leerer Warenkorb bietet immer noch einen Weg irgendwohin.

Leeren Sie Ihren eigenen Warenkorb und laden Sie die Seite, bevor Sie veröffentlichen. Dies ist der Zustand, den Sie niemals versehentlich sehen werden. Ein Käufer trifft ihn, nachdem er den Korb geleert hat oder seine Sitzung abgelaufen ist.

Warenkorbseite schnell und zugänglich halten

Eine Warenkorbseite erfordert mehr Arbeit als eine Landingpage. Sie führt WooCommerce-Abfragen aus und berechnet die Summen neu. In vielen Shops lädt sie auch ein Zahlungs-Skript, bevor jemand danach gefragt hat.

Sie kontrollieren zwei dieser Dinge, also halten Sie das Gewicht des Builders selbst gering und verhindern Sie, dass nicht kritische Skripte überhaupt auf dieser Seite geladen werden.

Als ich die gleiche Landingpage, die in drei Buildern erstellt wurde, mit GTmetrix gemessen habe, war SeedProd bei 556 ms und 16 Anfragen. Elementor benötigte 1.882 ms und 32 Anfragen.

Query Monitor zeigte serverseitig das gleiche Muster, wobei SeedProd 4,3 MB Speicher und 34 Datenbankabfragen verbrauchte, gegenüber 13,0 MB und 86 für Divi.

Das waren Landingpages, keine Warenkorbseiten. Eine Warenkorbseite fügt ihre eigene WooCommerce-Arbeit hinzu. Lesen Sie die Zahlen also als den Anteil des Builders am Gewicht und nichts weiter.

Ein Warenkorb ist ein Formular, also prüfen Sie, ob er ohne Maus funktioniert. Durchlaufen Sie die Mengenfelder, die Gutscheineingabe und die Checkout-Schaltfläche der Reihe nach mit der Tabulatortaste. Prüfen Sie dann, ob die Schaltfläche und die Summen genügend Kontrast haben, um sie draußen auf einem Handy lesen zu können.

Schritt 4. Veröffentlichen und Ihre WooCommerce-Warenkorbseite festlegen

Wenn Ihre Warenkorbseite fertig ist, klicken Sie auf den Dropdown-Pfeil neben der grünen Schaltfläche „Speichern“ und wählen Sie Veröffentlichen.

Das Veröffentlichen schaltet noch nichts um. WooCommerce liefert weiterhin die alte Warenkorbseite aus, bis Sie es anders anweisen.

Der Wechsel erfolgt in den Einstellungen des WooCommerce-Plugins. Navigieren Sie also zu WooCommerce » Einstellungen und klicken Sie auf die Registerkarte „Erweitert“.

Wählen Sie dann neben der Überschrift „Warenkorbseite“ die neue Warenkorbseite aus, die Sie mit SeedProd erstellt haben. Denken Sie daran, unten auf dem Bildschirm auf die Schaltfläche Änderungen speichern zu klicken.

Dieser Bildschirm verschiebt sich zwischen WooCommerce-Versionen. Wenn das Layout auf Ihrem Shop abweicht, dokumentiert WooCommerce dies in seinem eigenen Einstellungsleitfaden.

Wenn Käufer nun auf den Link „Warenkorb anzeigen“ auf Ihrer Website klicken, sehen sie Ihre neue benutzerdefinierte WooCommerce-Warenkorbseite.

Es lohnt sich zu bestätigen, dass der Wechsel tatsächlich stattgefunden hat, bevor Sie fortfahren.

Prüfen Sie, ob die neue Warenkorbseite tatsächlich ausgeliefert wird

Das Veröffentlichen der Seite beweist nicht, dass die Käufer sie erhalten. Testen Sie sie wie ein Käufer in fünf Schritten.

Ich mache das immer in einem privaten Fenster, denn als Administrator kann es sein, dass Sie eine andere oder eine zwischengespeicherte Version der Seite sehen als ein Käufer.

1. Öffnen Sie Ihren Shop in einem privaten Browsing-Fenster, damit Sie nicht als Administrator angemeldet sind.
2. Legen Sie ein Produkt in den Warenkorb und klicken Sie dann auf „Warenkorb anzeigen“.
3. Überprüfen Sie, ob die URL in der Adressleiste mit der von Ihnen erstellten Seite übereinstimmt und nicht mit der alten Warenkorbseite.
4. Ändern Sie eine Menge und bestätigen Sie, dass sich die Gesamtsumme aktualisiert.
5. Klicken Sie zum Checkout und stoppen Sie vor der Bezahlung.

Das zeigt Ihnen, dass die Seite funktioniert. Ob damit etwas verdient wurde, ist eine andere Frage, und der Warenkorb ist eine der wenigen Seiten, auf denen Sie die Antwort sehen können.

Richten Sie WooCommerce Conversion Tracking ein, damit Sie den Anteil der Warenkörbe vergleichen können, die vor und nach der Änderung zum Checkout gelangen. Geben Sie ihm dann einen Monat an Daten, bevor Sie ihn beurteilen.

Wenn der Link „Warenkorb anzeigen“ selbst fehlerhaft ist, ist das ein anderer Fehler, und dieser Leitfaden zur Behebung von WooCommerce View Cart Not Working behandelt ihn.

Fehlerbehebung bei einer benutzerdefinierten WooCommerce-Warenkorbseite

Bei dieser Aufgabe gehen drei Dinge schief, und alle lassen die Warenkorbseite defekt erscheinen.

Was Sie sehen	Was die Ursache ist	Wie man es behebt
Die Warenkorbseite wird als leer angezeigt, obwohl Artikel im Korb sind	Die Seite enthält weder den WooCommerce Warenkorb-Block noch den [woocommerce_cart] Shortcode	Öffnen Sie die Seite und fügen Sie eines der beiden hinzu. Auf einer SeedProd-Vorlage bedeutet dies den Warenkorb-Block aus der Gruppe der WooCommerce-Blöcke.
Ihre benutzerdefinierte Vorlage wird nicht angewendet	WooCommerce verweist immer noch auf die alte Warenkorbseite, oder die Warenkorbvorlage des aktiven Themes gewinnt die Oberhand	Überprüfen Sie die Einstellung „Warenkorbseite“ unter WooCommerce » Einstellungen » Erweitert und bestätigen Sie dann, welches Theme aktiv ist und ob ein Builder diese Seite steuert.
Die Einstellung für die Warenkorbseite wurde von selbst zurückgesetzt	Die Seite, auf die sie verwies, wurde gelöscht, dupliziert oder ersetzt, sodass WooCommerce die Referenz verloren hat	Stellen Sie sie erneut ein und lassen Sie die Originalseite veröffentlicht. WooCommerce speichert diese Einstellung als Seiten-ID, nicht als URL.

Eine WooCommerce-Warenkorbseite muss entweder den Warenkorb-Block oder den [woocommerce_cart] Shortcode enthalten und die Seite sein, die unter WooCommerce » Einstellungen » Erweitert ausgewählt ist. Alle drei Fehler kommen auf einen dieser beiden zurück.

Überprüfen Sie diese beiden, bevor Sie etwas anderes ändern, denn in den Shops, die ich verwaltet habe, war einer davon fast jedes Mal die Ursache.

FAQs zur Anpassung der WooCommerce-Warenkorbseite

Wie füge ich benutzerdefinierte Felder zur WooCommerce-Warenkorbseite hinzu?

Nicht mit dem Warenkorb-Block allein. Er formatiert die vorhandenen Eingabefelder des Warenkorbs, den Gutscheincode und die Mengenfelder, anstatt neue hinzuzufügen.

Wenn Sie etwas Zusätzliches sammeln müssen, fügen Sie es stattdessen als Checkout-Feld hinzu. WooCommerce übernimmt die Checkout-Felder in die Bestellung. Ein Formular, das Sie neben dem Warenkorb platzieren, ist Seiteninhalt und reist nicht mit der Bestellung.

Wird die Anpassung der Warenkorbseite meinen Checkout-Prozess beeinträchtigen?

Nein. Der Checkout ist eine separate WooCommerce-Seite mit eigener Vorlage, daher berührt die Neugestaltung der Warenkorbseite ihn nicht.

Das Einzige, was kaputt gehen kann, ist die Übergabe zwischen ihnen. Wenn Ihre Warenkorbseite ihren Button „Zum Checkout fortfahren“ verliert, können die Käufer nicht weiter. Dasselbe passiert, wenn Sie WooCommerce auf eine Seite ohne Warenkorb verweisen.

Testen Sie den vollständigen Pfad in einem privaten Fenster, nachdem Sie veröffentlicht haben.

Kann ich die WooCommerce-Warenkorbseite kostenlos anpassen?

Teilweise. Auf einem Block-Theme können Sie die Warenkorb-Vorlage im WordPress-Seiteneditor kostenlos bearbeiten, was das Layout, die Farben und alle Blöcke abdeckt, die Sie um den Warenkorb herum hinzufügen.

Der SeedProd-Weg in dieser Anleitung erfordert den Elite-Plan, da dies der Plan ist, auf dem der WooCommerce-Warenkorb-Block basiert. Kostenlos, Basic, Plus und Pro beinhalten ihn nicht.

Funktioniert eine benutzerdefinierte WooCommerce-Warenkorbseite auf Mobilgeräten richtig?

Ja, wenn Sie die Stapelreihenfolge überprüfen, da ein zweispaltiges Warenkorb-Layout auf einem Telefon zu einer Spalte zusammenfällt und die Spalte, die als zweite gestapelt wird, weit unten landet.

Sehen Sie sich die Seite mit der Telefonbreite in der Vorschau an, bevor Sie sie veröffentlichen. Platzieren Sie den Warenkorb und seine Checkout-Schaltfläche über den Testimonials. Die Schaltfläche, die ein Käufer benötigt, sollte nicht unter dem Social Proof liegen.

Sie haben jetzt eine Warenkorbseite, die zum Rest Ihres Shops passt, und eine Möglichkeit festzustellen, ob sich etwas geändert hat.

Mit SeedProd bauen Sie ihn visuell, ohne eine Zeile Code zu schreiben. Die WooCommerce-Blöcke, die dieses Tutorial verwendet, einschließlich des Warenkorbs, sind im Elite-Plan enthalten, der auch die Shop-Seite, Produktarchive, einzelne Produktseiten und den Checkout abdeckt.

Die andere Seite, die die meisten Shops auf dem Standard-Theme belassen, ist die WooCommerce-Shop-Seite.

Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.