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

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

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 );

Links / Quellen

Geschrieben von Robert Menzel

thumb

Robert arbeitet als Frontend-Developer und Web-Designer bei kulturbanause®. Zu seinen Aufgaben gehören die Gestaltung und die technische Umsetzung von Websites mit Photoshop, Illustrator, WordPress, PHP, HTML, CSS (Sass) und JavaScript (jQuery). Besonders gerne übernimmt er die Erstellung individueller und anspruchsvoller WordPress-Themes mit umfangreichen ineinandergreifenden Funktionen.

Feedback & Ergänzungen – Schreibe einen Kommentar

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 →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: