Einen Side-Warenkorb in WooCommerce & WordPress einfügen

11 hours ago, WordPress Tutorials, Views

Einführung: Der Vorteil eines Side-Warenkorbs

In der Welt des E-Commerce ist die Benutzererfahrung von entscheidender Bedeutung. Ein nahtloser und intuitiver Einkaufsprozess kann den Unterschied zwischen einem erfolgreichen Verkauf und einem abgebrochenen Warenkorb ausmachen. Ein Side-Warenkorb in WooCommerce und WordPress ist ein leistungsstarkes Werkzeug, um genau das zu erreichen. Anstatt Kunden auf eine separate Warenkorbseite umzuleiten, bietet ein Side-Warenkorb eine dynamische, stets sichtbare Ansicht ihrer ausgewählten Artikel. Dies verbessert die Benutzerfreundlichkeit erheblich und kann die Conversion-Rate steigern.

Dieser Artikel führt Sie durch die Vorteile eines Side-Warenkorbs und zeigt Ihnen verschiedene Methoden, wie Sie ihn in Ihren WooCommerce-Shop integrieren können. Wir werden sowohl die Verwendung von Plugins als auch die individuelle Anpassung durch Code betrachten, um eine Lösung zu finden, die Ihren spezifischen Anforderungen entspricht.

Warum ein Side-Warenkorb sinnvoll ist

Ein Side-Warenkorb bietet zahlreiche Vorteile gegenüber dem traditionellen Warenkorb-Erlebnis. Hier sind einige der wichtigsten Gründe, warum Sie ihn in Betracht ziehen sollten:

Verbesserte Benutzererfahrung: Kunden können Artikel hinzufügen und entfernen, die Mengen anpassen und den Gesamtpreis einsehen, ohne die aktuelle Seite verlassen zu müssen.
Höhere Conversion-Rate: Durch die Vereinfachung des Kaufprozesses und die Reduzierung unnötiger Klicks können Sie die Wahrscheinlichkeit erhöhen, dass Kunden ihren Kauf abschließen.
Gesteigerte Sichtbarkeit: Der Side-Warenkorb ist immer präsent, sodass Kunden jederzeit einen Überblick über ihre Auswahl haben und den Bestellvorgang schnell abschließen können.
Mobile Optimierung: Ein gut gestalteter Side-Warenkorb ist besonders auf mobilen Geräten von Vorteil, da er den Bildschirmplatz optimal nutzt und die Navigation vereinfacht.

Methoden zur Implementierung eines Side-Warenkorbs

Es gibt verschiedene Möglichkeiten, einen Side-Warenkorb in Ihren WooCommerce-Shop zu integrieren. Die Wahl der Methode hängt von Ihren technischen Fähigkeiten, Ihrem Budget und dem gewünschten Grad der Anpassung ab.

Verwendung von WooCommerce Plugins

Die einfachste und schnellste Möglichkeit ist die Verwendung eines WooCommerce-Plugins. Es gibt zahlreiche kostenlose und kostenpflichtige Plugins, die eine Side-Warenkorb-Funktionalität bieten. Einige beliebte Optionen sind:

WooCommerce Side Cart: Ein einfaches und benutzerfreundliches Plugin mit grundlegenden Funktionen.
YITH WooCommerce Ajax Product Filter: Bietet neben der Filterfunktionalität auch einen anpassbaren Side-Warenkorb.
Premmerce AJAX Cart: Ein weiteres beliebtes Plugin mit erweiterten Anpassungsoptionen.

Schritte zur Verwendung eines Plugins:

Suchen Sie im WordPress-Plugin-Verzeichnis nach einem geeigneten Side-Warenkorb-Plugin.
Installieren und aktivieren Sie das Plugin.
Konfigurieren Sie die Plugin-Einstellungen, um das Aussehen und Verhalten des Side-Warenkorbs anzupassen.
Testen Sie den Side-Warenkorb, um sicherzustellen, dass er ordnungsgemäß funktioniert.

Individuelle Anpassung mit Code

Für fortgeschrittene Benutzer, die mehr Kontrolle über das Design und die Funktionalität des Side-Warenkorbs wünschen, ist die individuelle Anpassung mit Code eine Option. Dies erfordert jedoch Kenntnisse in HTML, CSS, JavaScript und PHP.

Grundlegende Schritte zur individuellen Anpassung:

Erstellen Sie eine benutzerdefinierte Funktion in Ihrer functions.php-Datei oder in einem benutzerdefinierten Plugin.
Verwenden Sie WooCommerce-Hooks und -Filter, um den Warenkorb-Inhalt anzuzeigen.
Gestalten Sie den Side-Warenkorb mit HTML und CSS.
Fügen Sie JavaScript hinzu, um die Funktionalität des Side-Warenkorbs zu verbessern (z. B. Ajax-Aktualisierungen).

Beispiel: Einfaches Side-Warenkorb-Snippet


 function my_custom_side_cart() {
  // Überprüfen, ob WooCommerce aktiv ist
  if ( class_exists( 'WooCommerce' ) ) {
   // Warenkorb-Fragment erstellen
   ?>
   <div id="side-cart">
    <h3>Ihr Warenkorb</h3>
    <ul>
     <?php
      foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
       $_product   = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
       $product_id = apply_filters( 'woocommerce_cart_item_product_id', $cart_item['product_id'], $cart_item, $cart_item_key );

       if ( $_product && $_product->exists() && $cart_item['quantity'] > 0 && apply_filters( 'woocommerce_cart_item_visible', true, $cart_item, $cart_item_key ) ) {
        $product_permalink = apply_filters( 'woocommerce_cart_item_permalink', $_product->is_visible() ? $_product->get_permalink( $cart_item ) : '', $cart_item, $cart_item_key );
        ?>
        <li class="woocommerce-cart-form__cart-item ">
         <?php
          // Produktbild
          $thumbnail = apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key );

          if ( ! $product_permalink ) {
           echo $thumbnail; // PHPCS: XSS ok.
          } else {
           printf( '<a href="%s">%s</a>', esc_url( $product_permalink ), $thumbnail ); // PHPCS: XSS ok.
          }
         ?>

         <div class="product-details">
          <?php
           // Produktname und Link
           if ( ! $product_permalink ) {
            echo wp_kses_post( apply_filters( 'woocommerce_cart_item_name', $_product->get_name(), $cart_item, $cart_item_key ) . '&nbsp;' );
           } else {
            echo wp_kses_post( apply_filters( 'woocommerce_cart_item_name', sprintf( '<a href="%s">%s</a>', esc_url( $product_permalink ), $_product->get_name() ), $cart_item, $cart_item_key ) );
           }

           // Meta-Daten
           echo wc_get_formatted_cart_item_data( $cart_item ); // PHPCS: XSS ok.

           // Backorder-Notification
           if ( $_product->backorders_require_notification() && $_product->is_on_backorder( $cart_item['quantity'] ) ) {
            echo wp_kses_post( apply_filters( 'woocommerce_cart_item_backorder_notification', '<p class="backorder_notification">' . esc_html__( 'Available on backorder', 'woocommerce' ) . '</p>', $product_id ) );
           }
          ?>

          <?php
           // Preis
           echo apply_filters( 'woocommerce_cart_item_price', WC()->cart->get_product_price( $_product ), $cart_item, $cart_item_key ); // PHPCS: XSS ok.
          ?>
         </div>

         <?php
          // Löschen-Link
          echo apply_filters( // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
           'woocommerce_cart_item_remove_link',
           sprintf(
            '<a href="%s" class="remove" aria-label="%s" data-product_id="%s" data-product_sku="%s">&times;</a>',
            esc_url( wc_get_cart_remove_url( $cart_item_key ) ),
            esc_html__( 'Remove this item', 'woocommerce' ),
            esc_attr( $product_id ),
            esc_attr( $_product->get_sku() )
           ),
           $cart_item_key
          );
         ?>
        </li>
        <?php
       }
      }
     ?>
    </ul>
    <p class="total"><?php esc_html_e( 'Subtotal:', 'woocommerce' ); ?> <?php wc_cart_totals_subtotal_html(); ?></p>
    <?php do_action( 'woocommerce_widget_shopping_cart_before_buttons' ); ?>
    <p class="buttons">
     <?php do_action( 'woocommerce_widget_shopping_cart_buttons' ); ?>
    </p>
   </div>
   <?php
  }
 }

 // Hinzufügen der Funktion zum wp_footer-Hook
 add_action( 'wp_footer', 'my_custom_side_cart' );

Wichtiger Hinweis: Dieser Code ist nur ein Beispiel und muss an Ihr Theme und Ihre spezifischen Anforderungen angepasst werden. Sichern Sie Ihre Website, bevor Sie Änderungen an der functions.php-Datei vornehmen.

Verwendung eines Page Builders

Einige Page Builder wie Elementor oder Beaver Builder bieten auch die Möglichkeit, einen Side-Warenkorb zu erstellen. Diese Option ist ideal, wenn Sie bereits einen Page Builder verwenden und die Funktionalität nahtlos in Ihr bestehendes Design integrieren möchten.

Elementor: Mit dem “WooCommerce Cart” Widget können Sie einen anpassbaren Warenkorb erstellen und ihn als Side-Warenkorb positionieren.
Beaver Builder: Verwendet WooCommerce Widgets oder Drittanbieter-Addons, um einen Side-Warenkorb zu implementieren.

Design-Überlegungen für einen effektiven Side-Warenkorb

Neben der Funktionalität ist das Design des Side-Warenkorbs entscheidend für eine positive Benutzererfahrung. Achten Sie auf folgende Aspekte:

Klarheit und Übersichtlichkeit: Der Side-Warenkorb sollte übersichtlich und leicht verständlich sein. Verwenden Sie klare Beschriftungen und eine intuitive Navigation.
Responsives Design: Stellen Sie sicher, dass der Side-Warenkorb auf allen Geräten gut aussieht und funktioniert, insbesondere auf Smartphones und Tablets.
Konsistenz mit dem Branding: Das Design des Side-Warenkorbs sollte mit Ihrem Markenstil übereinstimmen, um ein einheitliches Erscheinungsbild zu gewährleisten.
Aktionsaufforderungen (Call to Actions): Platzieren Sie gut sichtbare Call-to-Action-Buttons (z. B. “Zur Kasse gehen”), um Kunden zum Abschluss ihres Einkaufs zu ermutigen.

Fazit

Ein Side-Warenkorb ist eine wertvolle Ergänzung für jeden WooCommerce-Shop. Er verbessert die Benutzererfahrung, steigert die Conversion-Rate und bietet Kunden einen schnellen und einfachen Überblick über ihre Einkäufe. Ob Sie ein Plugin verwenden, den Code individuell anpassen oder einen Page Builder nutzen – es gibt eine passende Lösung für jedes Budget und jedes Kenntnisniveau. Achten Sie auf ein klares und ansprechendes Design, um das Beste aus Ihrem Side-Warenkorb herauszuholen und Ihre Kunden zu begeistern.

Side Warenkorb Plugin, Warenkorb Download, Warenkorb verbessern, WooCommerce Warenkorb, WordPress Warenkorb Widget

admin

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa