Buttons überlagern sich in WooCommerce und WordPress, zum Beispiel "Ausführung wählen"

30. Juni 2020 von michael · , ,

In einigen Themes kommt es bei der Verwendung von WooCommerce manchmal zu Anzeigeproblemen. Konkret meldete sich ein Kunde, da der Schriftzug "Ausführung wählen" sich in der Mobilansicht überlappte. Das sieht nicht nur unschön aus, sondern kann auch zu Usability-Problemen führen - und die führen wieder zu weniger Bestellungen.

Die Buttons mit dem Schriftzug "Ausführung wählen" werden nicht korrekt dargestellt und überlappen sich.

Im konkreten Fall kam das Theme "YooTheme" zum Einsatz. YooTheme bietet eine ganze Reihe an "ausgefalleneren" Presets für die Darstellung der Buttons, wie etwa hier dem absichtlich ungerade-verspielten Rand. Es ist gut möglich, dass diese Einstellung auch zum Überlappen der Buttons führte.

Ursache des Problems: YooTheme überschreibt für die WooCommerce-Buttons die "white-space"-CSS-Eigenschaft. Einfach ausgedrückt sorgt die "white-space"-Anweisung dafür, wie der Browser Leerzeichen anzeigen soll. Es gibt aber auch die Option "white-space: no-wrap" - diese Unterdrückt Zeilenumbrüche im Text. Genau das ist hier der Fall - und deshalb wird "Ausführung wählen" in einer Zeile angezeigt, obwohl zwei viel sinnvoller wären.

Glücklicherweise lässt sich das Problem einfach lösen: Dafür muss einfach folgender CSS-Code auf der Webseite eingefügt werden. Er sorgt dafür, dass Zeilenumbrüche wieder regulär gesetzt werden können.

/* Fix: "Ausfuehrung waehlen"-Buttons ueberlagern sich gegenseitig in Mobilansicht */
.woocommerce ul.products li.product .button, .woocommerce-page ul.products li.product .button {
	white-space: normal;
}

Nicht jeder hatte schon einmal Kontakt mit zusätzlichen CSS-Layout-Anweisungen in WordPress: Der oben gezeigte Code kann bei den meisten Themes im WordPress-Adminbereich (Backend) unter Design > Customizer > "Zusätzliches CSS" eingefügt werden. Dabei sollte darauf geachtet werden, bestehenden Code nicht zu überschreiben (d.h. ganz unten zusätzlich einfügen)!

Unter "Zusätzliches CSS" im WordPress-Customizer können zusätzliche Layout-Anweisungen eingefügt werden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Sie haben Fragen oder möchten ein Angebot anfordern?

Jetzt Kontakt aufnehmen
crosslist