WooCommerce: Anzahl der Artikel im Warenkorb anzeigen
Von: Jonas, Robert Mit zwei kleinen Anpassungen lässt sich in WooCommerce der aktuelle Warenkorb-Bestand anzeigen und verbessert somit die Usability des Shops erheblich.
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.
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
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.
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
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
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