• Skip to primary navigation
  • Skip to main content
michaelnissen IT

michaelnissen IT

Business. Data. Web.

  • Home
  • Blog
  • Über mich
  • E-Commerce
    • Konzeption und Planung
    • Programmierung und Entwicklung
    • Online-Marketing und Akquise
    • DATEV-Format Export für WooCommerce
  • Data Science & Daten
  • Referenzen
  • Offene Stellen
  • Kontakt
  • Show Search
Hide Search

WordPress

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

michael · 30. Juni 2020 · Leave a Comment

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.

Sie haben Fragen oder möchten ein Angebot anfordern? Kontakt

  • Impressum
  • Datenschutzerklärung
Diese Website benutzt Cookies. Wenn du die Website weiter nutzt, gehen wir von deinem Einverständnis aus.OKDatenschutzerklärung