kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Workshops & Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

Online-Schulungen (remote per Video)

Inhouse-Schulungen

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

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei WooCommerce-Projekten

Unsere WooCommerce Agentur ist auf die Entwicklung maßgeschneiderter WordPress/WooCommerce-Themes und -Websites spezialisiert. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung eines Projekts benötigst, helfen wir gerne weiter.
WooCommerce-Leistungsangebot →

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.