Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

WooCommerce: Anzahl der Artikel im Warenkorb anzeigen

Zum Steigern der Usability eines Onlineshops ist es wichtig, dass während des gesamten Kaufprozesses ersichtlich ist, ob sich im Warenkorb bereits Produkte befinden oder nicht. Um in einem WooCommerce-Shop die aktuelle Anzahl der Artikel im Warenkorb – beispielsweise neben dem Warenkorb-Icon – anzuzeigen, werden zwei kleine Anpassungen am Code benötigt.

Artikel-Anzahl des Warenkorbs in WooCommerce ausgeben

Um die Anzahl der aktuellen Artikel im Warenkorb auszugeben und um diese später auch via AJAX updaten zu können, benötigen wir ein HTML-Element, welches wir über eine Klasse oder eine ID eindeutig ansprechen können. Im Beispiel haben wir ein <span> mit der Klasse .cart-count verwendet. Dieses Element können wir an einer beliebigen Stelle im Code integrieren, meistens im Header der Website, neben dem Warenkorb-Icon.

Über die WooCommerce-Funktion WC()->cart->get_cart_contents_count() holen wir uns die aktuelle Zahl der sich im Warenkorb befindenden Artikel.

<span class="cart-count">
  <?php echo WC()->cart->get_cart_contents_count(); ?>
</span>

Artikel-Anzahl im Warenkorb mit AJAX aktualisieren

Wenn wir in den WooCommerce-Einstellungen unter »WooCommerce → Einstellungen → Produkte → Allgemein« einen Haken bei Aktiviere AJAX »In den Warenkorb«-Button in Archiven gesetzt haben, können Produkte direkt von den Übersichtsseiten in den Warenkorb gelegt werden. Das geschieht über AJAX, wodurch die Seite nicht neu geladen wird.

Screenshot WooCommerce AJAX-Einstellung
WooCommerce: AJAX für »In den Warenkorb«-Button aktivieren

Folgender Code wird benötigt, um auch die Anzahl-Anzeige via AJAX zu aktualisieren, wenn ein Produkt wie oben beschrieben von einer Übersichtseite aus direkt in den Warenkorb gelegt wird. Wir fügen dieses Snippet daher in unsere functions.php oder in ein seitenspezifisches Plugin ein. Hier müssen wir darauf achten, dass die Angaben von Klasse (oder ID) und des HTML-Elements mit dem übereinstimmen, was wir vorher im Code integriert haben.

Über den WooCommerce-Filter woocommerce_add_to_cart_fragments wird nun bei einer Aktualisierung des Warenkrob-Bestands das Element mit der Anzahl der Artikel via AJAX ausgetauscht.

function kb_cart_count_fragments( $fragments ) { 
  $fragments['span.cart-count'] = '<span class="cart-count">' . WC()->cart->get_cart_contents_count() . '</span>';
  return $fragments;
}
add_filter( 'woocommerce_add_to_cart_fragments', 'kb_cart_count_fragments', 10, 1 );

Geschrieben von Robert Menzel

Benutzerbild

Robert arbeitet als Frontend-Developer und Web-Designer bei kulturbanause. Zu seinen Aufgaben gehören die visuelle Gestaltung und die technische Umsetzung von Websites, eCommerce-Shops oder dessen Kombination. Besonders gerne übernimmt er die Entwicklung individueller und anspruchsvoller Websites mit umfangreichen ineinandergreifenden Funktionen, getreu dem Motto: »Der beste Lack bringt nichts, wenn die Maschine darunter nicht läuft.«

Feedback & Ergänzungen – 4 Kommentare

  1. Jessica Thielke
    schrieb am 04.03.2024 um 12:19 Uhr:

    Hallo zusammen,
    Verzeihung, ich sitze bereits seit Tagen an dem obigen Warenkorb. Da ich Laie bin und das hoffentlich nur einmal richtig machen muss, hier meine Frage.
    1.
    cart->get_cart_contents_count(); ?>

    das schreibe ich als textfeld, oder als Codefeld neben meinem Symbol Warenkorb im Frondend Divi?
    Das geschriebene sieht man nämlich, wenn nichts im Warenkorb liegt. Habe zwar die ID-Klasse auch mit : .cart-count und oder cart-count benannt.
    Irgendwie hatte es schon mal geklapt, dann hatte ich allerdings ein warenkorbsymbol unten rechts im shop =o( und die anzahl dann irgendwie mit „Arbeitsstelle“ hingeschoben…
    Oder schhreibe ich es hier rein
    2. Code dem Ihres Blogs hinzufügen ?
    3. function kb_cart_count_fragments( $fragments ) {
    $fragments[’span.cart-count‘] = “ . WC()->cart->get_cart_contents_count() . “;
    return $fragments;
    }
    add_filter( ‚woocommerce_add_to_cart_fragments‘, ‚kb_cart_count_fragments‘, 10, 1 );

    das habe ich in die funktions.php (Child) geschrieben.

    Entschuldigung, ich bin zu blöd.
    Dennoch wäre ich dankbar, wenn man das kurz erklären könnte.

    Antworten
    • Robert Menzel
      schrieb am 11.03.2024 um 08:55 Uhr:

      Hallo Jessica,
      leider kann ich dein Problem nicht genau nachvollziehen. Vielleicht kann dir jemand aus der Community helfen. Wir können hier ohne zusätzliche Recherche leider nicht weiterhelfen und diese Recherche ist im Rahmen des kostenlosen Supports im Blog leider nicht möglich.
      Ich hoffe du findest schnell eine Lösung.

      Viele Grüße
      Robert

      Antworten
  2. Ania
    schrieb am 01.10.2021 um 09:46 Uhr:

    Hallo,
    danke für den Artikel. Leider hat es bei mir nicht funktioniert. :(
    Ich hab das code cart->get_cart_contents_count(); ?> in den header.php eingefügt und das Code:

    function kb_cart_count_fragments( $fragments ) {
    $fragments[’span.cart-count‘] = “ . WC()->cart->get_cart_contents_count() . “;
    return $fragments;
    }
    add_filter( ‚woocommerce_add_to_cart_fragments‘, ‚kb_cart_count_fragments‘, 10, 1 );

    ins Funktion.php File. Beides konnte ich ohne Fehlre Meldung hochladen/aktualisieren. Hab auch das Häkchen in woocommerce Einstellungen für Ajax aktiviert. Leider wird die Menge der Produkte im Warenkorb nicht angezeigt.
    Hätte Ihr eine Idee was bei mir falsch sein kann?

    Über Eure Hilfe würde ich mich riesig freuen!
    Vielen Dank,
    Beste Grüße,
    Ania

    Antworten
    • Robert Menzel
      schrieb am 11.10.2021 um 14:13 Uhr:

      Hallo Ania,
      wichtig ist es, dass du das Fragment konkret ansprichst. Im Beispiel handelt es sich um einen Span, der die Klasse »cart-count« besitzt. Dieser Span muss im Ausgangscode in der header.php definiert sein und in der Funktion.

      Viele Grüße
      Robert

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

WooCommerce-Projekte mit kulturbanause

Wir arbeiten intensiv mit WordPress und realisieren auf Basis von WooCommerce maßgeschneiderte Online-Shops. Individuell gestaltet, funktional optimiert und rechtssicher.

WooCommerce-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →