So holst du das Maximum aus deiner Flatsome Warenkorb-Seite raus!

Flatsome ist eines der beliebtesten Ecommerce Themes für WooCommerce. Und das zurecht, da es wichtige Optimierungseinstellungen von Haus aus mitbringt. Dadurch sparst du eine Menge Zeit und kannst fast alles ohne Programmierkenntnisse erledigen.
Warum du deine Flatsome Warenkorb-Seite optimieren solltest? Dadurch steigerst du die Conversion Rate und den durchschnittlichen Bestellwert in deinem Shop! Mit den folgenden Tipps gelingt es dir ganz einfach…

#1 Nutze das Cart-Template

Flatsome kommt von sich aus mit einem „Cart Template“. Dabei handelt es sich um eine Seitenvorlage des Themes, bei der über dem Warenkorn die einzelnen Checkout Schritte angezeigt werden. Der Kunde weiß so einfacher, in welchem Schritt des Checkouts er sich befindet.
Falls du das Cart-Template nicht benutzen möchtest, stelle zumindest sicher, dass die Warenkorb Seite auch als solche ersichtlich wird. Es sollte also der Titel Warenkorb zu sehen sein.

Flatsome Cart Template

Um das Cart-Template auszuwählen gehe in deiner Warenkorb Seite auf „Seite bearbeiten“, um die Seite mit dem WordPress Editor zu bearbeiten. Wähle nicht den UX Builder von Flatsome.

Wähle dann in der rechten Menüleiste unter dem Punkt „Seiten-Attribute“ das Template „WooCommerce – Cart“ aus.

Flatsome Cart Template

Bonus Tipp: Mit dem Plugin Loco Translate kannst du auch die Titel der einzelnen Schritte anpassen.

#2 Schalte Auto-Update ein

In WooCommerce kann der Kunde standardmäßig auf der Warenkorb Seite die Anzahl einzelner Artikeln im Warenkorb erhöhen oder reduzieren. Dafür muss er jedoch nach dem Ändern auf den „Warekorb aktualisieren“ Button klicken, was nicht wirklich benutzerfreundlich ist.
Wäre es nicht besser, wenn der Kunde nur die Anzahl erhöhen / reduzieren müsste? Genau dafür ist die Funktion Auto-Update in Flatsome da.

Flatsome Cart Auto Update

Um Warenkorb Auto-Update zu aktivieren, gehe auf Flatsome > Theme Options > WooCommerce > Cart und aktiviere die Option „Auto update on quantity change“

#3 Payment Icons einbauen

Damit der Kunde über die Bezahlmöglichkeiten in deinem Shop informiert wird, sind Payment Icons üblich. In Flatsome musst du zum Glück keine Payment Icons selbst designen oder hochladen, sondern kannst die passenden einfach aktivieren / deaktivieren. Gehe dafür auf Flatsome > Theme Options > WooCommerce > Payment Options und aktiviere alle Icons zu den Bezahlmethoden, die dein Shop anbietet.

UX Payment Icons Flatsome

Kopiere dann folgenden HTML-Code und füge ihn unter Flatsome > Theme Options > WooCommerce > Cart im Feld „Cart Sidebar Content“ ein.

<div style="text-align:center">[ux_payment_icons]</div>

Die Icons zu den Bezahlmethoden werden dann unter dem Gutschein Feld sichtbar und schaffen Vertrauen beim Kunden. Dadurch klickt er wahrscheinlich weiter auf die Checkout Seite.

#4 Schalte den Versandrechner aus

Der Versandrechner von WooCommerce ist nur in seltenen Fällen wirklich interessant für den Kunden. Meistens kann dieser deaktiviert werden, weil der Kunde die Versandkosten sowieso auf der Kassen-Seite sieht. Wir möchten ihm den Weg dorthin nicht unnötig schwer machen, indem wir überflüssige Funktionen anbieten.

So schaltest du den Versandrechner im Warenkorb aus: Gehe im Dashboard auf WooCommerce > Einstellungen > Versand > Versandoptionen und entferne das Häkchen bei „Aktiviere den Versandrechner auf der Warenkorb-Seite“.

Daraufhin verschwindet der Hinweis „Versandkosten berechnen“ unter den Versandkosten auf der Flatsome Warenkorb-Seite.

#5 Baue Warenkorb Cross-Sells ein

Der Warenkorb ist der perfekte Ort um dem Kunden auf den letzten Metern noch zusätzliche Produkte vorzuschlagen. Ähnlich wie das Süßigkeiten-Regal an der Kasse im Supermarkt. Hier wird gerne noch etwas bedenkenlos „mitgenommen“.

#6 Leerer Warenkorb Vorschläge

Sollte ein Kunde auf den Warenkorb klicken, bevor er Produkte hinzugefügt hat, wird er von WooCommerce mit einer sehr leeren Seite begrüßt. Er kann hier lediglich über einen Button zurück auf die Homepage gelangen. Warum nicht hier auch ein paar gute Produkte vorschlagen?

Kopiere dafür den folgenden Code und ersetze die XXX unter ids durch die IDs der Produkte, die du darstellen möchtest. Die Produkt-ID deiner Produkte findest du, wenn du in WooCommerce > Produkte mit der Maus über ein Produkt fährst.

function woogency_empty_cart_crosssells()
{
echo '[ux_text font_size__sm="1" text_align="center"]<h2>Vorschläge für dich...</h2>[/ux_text]<br/>
[row h_align="center"][col span="9" span__sm="12"][ux_products slider_nav_style="simple" slider_nav_position="inside" show_cat="0" show_rating="0"
ids="XXX,XXX,XXX,XXX,XXX,XXX,XXX,XXX"][/col][/row]';
}
add_filter('woocommerce_cart_is_empty', 'woogency_empty_cart_crosssells' );

Füge den Code in die functions.php deines Themes (Flatsome) ein. Du gelangst über das Dashboard über Design > Theme-Editor > functions.php dorthin. Füge den Code einfach ganz unten an den Schluss der Datei ein.

Hinweis: Dieser Code funktioniert nur für Flatsome, nicht für andere Themes. Arbeite auch nur an der functions.php, wenn du weißt, was du tust. Solltest du professionelle Hilfe bei der Optimierung deines WooCommerce Checkouts benötigen, kontaktiere uns gerne. Wir als erfahrene WooCommerce Agentur helfen dir gerne weiter.

Der Autor: Andreas Prinz
Ich liebe den Onlinehandel und die Möglichkeiten von WooCommerce. Als Shopbetreiber weiß ich genau, worauf es beim Online-Erfolg ankommt.