WooCommerce Mengenfeld zu schmal? Die einfache Lösung für eine bessere User Experience
Ein gut funktionierender Online-Shop zeichnet sich durch Details aus. Doch oft sind es gerade die Standard-Einstellungen von WooCommerce, die das Einkaufserlebnis trüben. Ein häufiges Problem: Das Mengenfeld (Quantity Field) ist zu schmal.
Sobald ein Kunde mehr als neun Artikel bestellen möchte, wird die zweistellige Zahl abgeschnitten oder ist kaum noch lesbar. Das wirkt nicht nur unprofessionell, sondern verunsichert Kunden im Checkout-Prozess. In diesem Guide erfährst du, wie du dieses Problem effizient löst.
Warum das Standard-Mengenfeld oft scheitert
Die meisten WordPress-Themes sind auf Ästhetik getrimmt. Das führt dazu, dass Eingabefelder so kompakt wie möglich gestaltet werden. Das Problem dabei:
-
Mangelnde Barrierefreiheit: Ältere Kunden oder Nutzer an kleinen Bildschirmen erkennen die Menge nicht.
-
Conversion-Killer: Wenn der Kunde nicht sieht, ob er 10 oder 100 Stück im Warenkorb hat, bricht er den Kauf ab.
-
Branding-Schaden: Ein abgeschnittenes Feld signalisiert dem Kunden: "Dieser Shop wurde nicht zu Ende gedacht."
Die Lösung: Gezielte CSS-Optimierung
Anstatt ein schweres Plugin zu installieren, das die Ladezeit deines Shops unnötig belastet, lässt sich die Breite des Mengenfeldes mit einer einfachen CSS-Anweisung dauerhaft korrigieren.
Der Optimierungs-Code
Durch das Hinzufügen der folgenden Zeilen in deinen Customizer passt sich das Feld automatisch an:
/* Breite und Optik des WooCommerce Mengenfelds korrigieren */
.woocommerce .quantity .input-text.qty.text {
width: 70px !important; /* Genügend Platz für 3-stellige Mengen */
height: 38px; /* Optimale Klickfläche für Mobilgeräte */
padding: 0 5px; /* Innenabstand für bessere Lesbarkeit */
text-align: center; /* Zentrierte Darstellung der Zahlen */
}
So setzt du die Änderung um
-
Navigiere im WordPress-Dashboard zu Design > Customizer.
-
Wähle den Bereich Zusätzliches CSS.
-
Füge den oben genannten Code ein und klicke auf Veröffentlichen.
Darauf solltest du nach der Anpassung achten
Nachdem du die Breite geändert hast, empfiehlt sich ein kurzer Check in zwei Bereichen:
-
Mobile Ansicht: Prüfe auf deinem Smartphone, ob das breitere Feld genügend Platz neben dem "In den Warenkorb"-Button lässt.
-
Warenkorb-Seite: Kontrolliere, ob die Spalten im Warenkorb (Cart) weiterhin harmonisch wirken oder ob durch das breitere Feld Zeilenumbrüche entstehen.
Fazit: Kleine Änderung, große Wirkung
Die Anpassung des Mengenfeldes ist ein klassischer Fall von Conversion-Optimierung durch Design. Indem du sicherstellst, dass Mengenangaben immer klar lesbar sind, steigerst du das Vertrauen deiner Kunden und sorgst für einen reibungslosen Ablauf von der Produktseite bis zum Kaufabschluss.