Divi-Theme & WooCommerce: Einkaufswagen erst anzeigen, wenn was drin ist

Die weitest verbreitete Shoplösung auf Word­Press-Websites ist WooCommerce. Dieser Webshop schmiegt sich hervorragend ins Divi-Theme ein – Divi seinerseits bietet seit einer Weile eigene Module, um WooCommerce besser darzustellen. Eine Knacknuss bleibt der Einkaufswagen. Dieser lässt sich hartnäckig nicht ausblenden – auch wenn noch nix drin ist. Oder doch??? Wir zeigen Ihnen wie.

Der Einkaufswagen erscheint im Divi-Header, sobald Sie WooCommerce als Shoplösung installieren. Auch wenn er leer ist und darum nicht viel bringt. Mit ein paar Zeilen Code lässt sich das ändern.

Kopieren Sie den folgenden Code und fügen Sie ihn in die functions.php Ihrer Website ein. Die Datei finden Sie unter Design/Theme-Editor:

Dieser Code tut nichts anderes, als abklären, ob im Einkaufswagen Artikel liegen oder nicht. Wenn Artikel im Einkaufswagen sind, erhält das Symbol eine Klasse namens «cart_has_items», – wenn er leer ist: «cart_is_empty».

Nun ist es ein Leichtes, die Anzeige zu steuern. Dies geschieht über einen Kleinstcode, den Sie in das CSS-Stylesheet Ihrer Website kopieren. CSS deponieren Sie unter Design/Customizer/Zusätzliches CSS:

Voilà – das war’s schon. Der Einkaufswagen erscheint jetzt erst im Divi-Header, wenn wirklich auch Artikel drin sind.