Home » WooCommerce » Hinzufügen von Links zum Bearbeiten des Warenkorbs und zum Fortsetzen des Einkaufs zur WooCommerce-Kassenseite

Hinzufügen von Links zum Bearbeiten des Warenkorbs und zum Fortsetzen des Einkaufs zur WooCommerce-Kassenseite

Wenn Sie eine E-Commerce-Website betreiben, wissen Sie wahrscheinlich, dass der Kunde nur noch einen Klick von seiner Mission entfernt ist – dem Verkauf eines Produkts – und zur Kasse geht.

Aber es gibt immer Raum für Verbesserungen, selbst wenn Sie den Kunden auf die richtige Seite bringen. Was ist, wenn der Kunde eine Änderung im Warenkorb vornehmen möchte? Was wäre, wenn Sie ihm oder ihr eine einfache Möglichkeit geben könnten, zum Shop zurückzukehren und weitere Artikel hinzuzufügen?

Best WordPress hosting 2024

Heute zeige ich Ihnen zwei super einfache Möglichkeiten, Ihre WooCommerce-Kassenseite benutzerfreundlicher zu gestalten. Und das könnte Ihre Kunden sogar zu einem weiteren Kauf anregen. Folgendes werden wir tun:

Los geht’s!

Hinzufügen des Links „Einkauf fortsetzen“ zur WooCommerce-Kassenseite

Es ist großartig, wenn der Kunde auf die Kassenseite gelangt. Aber wissen Sie, was noch besser ist? Wenn Kunden größere Bestellungen machen. Deshalb fügen Sie die Schaltfläche „Einkauf fortsetzen“ zur Kassenseite in WooCommerce hinzu, um sicherzustellen, dass der Kunde eine einfache Möglichkeit hat, alle Produkte in Ihrem Shop zu sehen. Wie hier:

woocommerce add continue shopping button in checkout page

Um die Schaltfläche „Weiter einkaufen “ hinzuzufügen, gehen Sie in Ihrem WordPress-Admin-Panel zu Darstellung >> Theme File Editor oder Tools >> Theme File Editor und öffnen Sie die Datei functions.php auf der rechten Seite.

Sobald Sie an der richtigen Stelle sind, fügen Sie diesen Code am Ende der functions.php-Datei ein.

add_action( 'woocommerce_checkout_before_customer_details', 'continue_shopping_before_billing', 20 );
function continue_shopping_before_billing(){
    echo '<div class="checkout-continue-shopping">
		    <a href="'.get_home_url().'">Continue Shopping →</a>
	     </div>';
}

Dieser Code fügt den Link Einkauf fortsetzen direkt über dem Abschnitt Rechnungsdetails auf der WooCommerce-Kassenseite ein. Genau so, wie Sie es im obigen Screenshop sehen. Der Link bringt den Besucher zurück auf die Startseite Ihres Shops.

Wenn Sie auf eine andere Seite verlinken möchten, können Sie das href-Attribut des Links durch eine beliebige andere Seite in Ihrem WooCommerce-Shop ersetzen. Zum Beispiel:

<a href="https://yourstore.com/any-other-page">Continue Shopping →</a>

Das Einzige, was noch zu tun ist, ist, den Link richtig zu gestalten – um sicherzustellen, dass er sich gut in Ihre Website einfügt. Deshalb habe ich <div> und die Klasse .checkout-continue-shopping hinzugefügt, damit Sie ihn nach Belieben gestalten können. Zum Beispiel:

.checkout-continue-shopping {
text-align: right; // to add button to right side of the page
}

.checkout-continue-shopping a { // add styling to the link
background: pink;
color: white;
padding: 6px 10px;
border-radius: 20px;
}

.checkout-continue-shopping a:hover { // change color of the text when customer hovers / puts mouse on the button
color: black;
}

Sie müssen vielleicht die Farben ändern oder Ihr eigenes Styling hinzufügen, damit es besser zu Ihrer Website passt.

P.S. Um benutzerdefinierte CSS zu Ihrer WordPress-Website hinzuzufügen, müssen Sie Erscheinungsbild >> Anpassen >> Registerkarte Zusätzliches CSS verwenden.

Es gibt nichts Ärgerlicheres in einem Online-Shop, als zur Kasse zu gehen und festzustellen, dass Sie ein falsches Produkt oder eine falsche Anzahl von Produkten hinzugefügt haben. In solchen Situationen sollten Sie als Shop-Betreiber Ihren Kunden die Möglichkeit geben, das Problem mühelos zu beheben.

Aus diesem Grund fügen wir der Kassenseite einen Link „Warenkorb bearbeiten“ hinzu. So wie hier:

woocommerce edit cart link in checkout

Wie zuvor gehen Sie in Ihrem WordPress-Admin-Panel auf Darstellung >> Theme File Editor oder Tools >> Theme File Editor und öffnen Sie die Datei functions.php auf der rechten Seite. Fügen Sie dann diesen Code am Ende der Datei ein, und vergessen Sie nicht, die Änderungen zu speichern:

add_action('woocommerce_checkout_before_order_review', 'checkout_cart_link');
function checkout_cart_link(){
    ?><div class="checkout-cart-link">
        <a href="<?php echo wc_get_cart_url(); ?>">Edit cart content →</a>
      </div>
    <?php
}

Auch hier müssen Sie, wie im vorherigen Beispiel, möglicherweise einige benutzerdefinierte CSS-Elemente im Customizer hinzufügen. Zum Beispiel:

.checkout-cart-link {
   padding-buttom: 10px; // make some whitespace between product table and our link
}

.checkout-cart-link a {
   color: pink;
   font-size: 15px;
}

Das war’s – diese beiden Links auf der Checkout-Seite sollten zu etwas größeren Bestellungen in Ihrem WooCommerce-Onlineshop führen und das Kundenerlebnis auf Ihrer E-Commerce-Website auf lange Sicht verbessern.

Suchen Sie nach anderen Möglichkeiten, die WooCommerce-Kassenseite zu verbessern? Sehen Sie sich auch diese Artikel an:

Fathom analytics - privacy focused cookie-free website analytics

Most popular tutorials


Get our latest WordPress news and special offers from RockSolidWP!

Only useful WordPress and WooCommerce tips and tricks and exclusive offers for our readers once a month. No marketing nonsense.

Looking for reliable yet affordable WordPress hosting?
Hostinger is the way to go!

Get 10% OFF by using code IMAKEITWORK