Sticky-Warenkorb-Leiste in WooCommerce: Preis und Kaufbutton stets griffbereit

Auf einer langen WooCommerce-Produktseite ist der Warenkorbbutton oft das Erste, was aus dem Sichtfeld scrollt. Bis ein Kunde die Beschreibung gelesen, die Galerie geprüft und die Bewertungen überflogen hat, befinden sich Preis und Kaufbutton weit oberhalb des sichtbaren Bereichs. Eine Sticky-Warenkorb-Leiste löst das, indem sie beide während des gesamten Besuchs griffbereit hält. Dieser Leitfaden erklärt, was die Funktion ist, warum sie einem Shop hilft und wie Sie sie in WooCommerce einrichten.

Was eine Sticky-Warenkorb-Leiste ist

Eine Sticky-Warenkorb-Leiste ist ein schmaler, fixierter Streifen, der den Preis und den Kaufbutton eines Produkts beim Scrollen sichtbar hält.

Sie sitzt in der Regel am unteren Rand der einzelnen Produktseite und zeigt drei Dinge: den Produkttitel, den aktuellen Preis und einen Warenkorbbutton. Da sie am Viewport fixiert ist und nicht an einer Stelle der Seite, wandert sie mit dem Kunden mit, statt beim Lesen nach oben zu verschwinden.

Der Gedanke ist einfach. Der Haupt-Warenkorbbereich oben auf der Seite ist gut, solange er auf dem Bildschirm ist, doch er verliert seinen Nutzen in dem Moment, in dem der Kunde daran vorbeiscrollt. Die Sticky-Leiste füllt diese Lücke, sodass die Kaufentscheidung jederzeit umgesetzt werden kann.

Warum sie einem Shop hilft

Die Leiste beseitigt einen kleinen, aber realen Reibungspunkt: nach oben scrollen zu müssen, um zu kaufen. Diese Reibung zu verringern hilft tendenziell genau auf den Seiten, auf denen es am meisten zählt.

• Lange Seiten. Ausführliche Beschreibungen, Tabellen mit technischen Daten, Bildgalerien und Bewertungsbereiche schieben den Kaufbutton weit nach oben. Die Leiste hält ihn einen Klick entfernt.
• Mobiles Einkaufen. Bildschirme sind klein und es wird ständig gescrollt, sodass der Hauptbutton fast sofort aus dem Sichtfeld verschwindet. Eine fixierte Leiste ist hier besonders nützlich.
• Überlegte Käufe. Wenn ein Kunde vor der Entscheidung sorgfältig liest, sollte der Moment der Entscheidung kein erneutes Suchen des Buttons erfordern.
• Variable Produkte. Kunden vergleichen beim Scrollen Optionen und Preise. Eine Leiste, die die gewählte Variation widerspiegelt, hält den passenden Preis und Button vor Augen.

Wie man eine in WooCommerce einrichtet

Eine Sticky-Warenkorb-Leiste zu WooCommerce hinzuzufügen, ist in der Regel eine Frage der Installation eines spezialisierten Plugins und der Wahl, wann die Leiste erscheinen soll.

1. Plugin installieren und aktivieren. WooCommerce muss zuerst aktiv sein, da die Leiste Preis, Lagerbestand und Warenkorbformular des Produkts aus WooCommerce selbst ausliest.
2. Leiste aktivieren. Die meisten Tools fügen unter dem WooCommerce-Menü einen Einstellungsbildschirm mit einem einzelnen Schalter hinzu, um die Leiste einzuschalten.
3. Scroll-Schwellenwert festlegen. Legen Sie fest, wie weit unten auf der Seite (in Pixeln) die Leiste erscheinen soll. Eine gängige Wahl ist, sie einzublenden, sobald der Kunde am Haupt-Warenkorbbutton vorbeigescrollt ist.
4. An einem echten Produkt prüfen. Rufen Sie eine lange Produktseite auf Desktop und Mobilgerät auf, scrollen Sie nach unten und bestätigen Sie, dass die Leiste mit dem korrekten Titel, Preis und Button hereingleitet.
5. Ein variables Produkt testen. Wählen Sie verschiedene Optionen und bestätigen Sie, dass sich Preis, Verfügbarkeit und Button der Leiste passend zur gewählten Variation aktualisieren.

Worauf Sie bei einem Sticky-Leisten-Tool achten sollten

Nicht jede Umsetzung ist gleich. Eine gute Sticky-Warenkorb-Leiste sollte hilfreich sein, ohne schwer oder aufdringlich zu wirken.

• Keine Layout-Verschiebung. Die Leiste sollte am Viewport fixiert sein und ausgeblendet starten, damit ihr Einblenden keine anderen Inhalte verschiebt oder Ihren Core Web Vitals schadet.
• Schlankes Laden. Ihr Stylesheet und Skript sollten nur auf einzelnen Produktseiten geladen werden, und das Skript sollte verzögert (deferred) eingebunden sein, damit es das Rendering nicht blockiert.
• Variations-Erkennung. Bei variablen Produkten sollte die Leiste dem nativen Variationsformular von WooCommerce folgen und Preis, Lagerstatus und Kaufbutton aktualisieren, sobald sich Optionen ändern.
• Barrierefreiheit. Achten Sie auf eine ARIA-Region mit einer Beschriftung für Screenreader, einen sichtbaren Fokuszustand und die Berücksichtigung der Einstellung für reduzierte Bewegung.
• Sinnvolle Voreinstellungen. Ein konfigurierbarer Scroll-Schwellenwert und ein Dark-Mode-Stil sorgen dafür, dass sich die Leiste in Ihr Theme einfügt, statt dagegen anzukämpfen.

Wie Anchor es umsetzt

Für Shops, die diese Funktion ohne zusätzliches Gewicht möchten, fügt Anchor - Sticky Add to Cart Bar eine schmale Sticky-Leiste am unteren Rand einzelner WooCommerce-Produktseiten hinzu. Sie bleibt ausgeblendet, bis der Kunde am Haupt-Warenkorbbutton vorbeiscrollt, und gleitet dann mit Produkttitel, Preis und einem Kaufbutton ins Bild.

Anchor ist darauf ausgelegt, nicht im Weg zu sein. Die Leiste ist am Viewport fixiert und startet ausgeblendet, sodass sie keine Layout-Verschiebung verursacht, und ihre Ressourcen werden nur auf Produktseiten mit verzögertem (deferred) Skript geladen. Bei variablen Produkten folgt sie den nativen Variations-Events von WooCommerce, sodass Preis, Lagerstatus und Button der gewählten Option folgen, ohne eine eigene Kopie von jQuery zu laden. Sie legen unter WooCommerce einen Scroll-Schwellenwert in Pixeln fest (0 bis 5000), und die Leiste wird als barrierefreie ARIA-Region mit Fokuszustand, einem Dark-Mode-Stil und Berücksichtigung der Einstellung für reduzierte Bewegung ausgeliefert. Sie erklärt Kompatibilität mit HPOS sowie Warenkorb- und Kassen-Blöcken und stellt keine Verbindung zu externen Diensten her.

Das Ergebnis ist ein kleines, fokussiertes Tool: Halten Sie Preis und Kaufbutton griffbereit, während Kunden scrollen, ohne Ihre Produktseiten aufzublähen.