• 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

Blog

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.

Literaturempfehlungen und Einstiege: Eine Einführung in die Topologische Datenanalyse (TDA)

michael · 19. April 2020 · Leave a Comment

Vor mittlerweile über einem Jahr arbeitete ich relativ intensiv an einer Arbeit im Bereich der Topologischen Datenanalyse (TDA). Als Nicht-Vollblut-Mathematiker (sondern Informatiker) ist der Einstieg in dieses Themengebiet nicht unbedingt der Einfachste. Im Rahmen der Arbeit entstand deshalb eine relativ großzügige Literaturliste. Neben rund 100 Quellen, die detailliert im Themengebiet beheimatet sind, war selbstverständlich auch Einstiegsliteratur enthalten. Bisher fand ich nicht die Zeit, diese Liste zu veröffentlichen. Ich bin mir allerdings sicher, dass die Literaturempfehlungen der ein oder anderen Person zumindest etwas Zeit sparen könnte, weshalb ich meine Empfehlungen für den Einstieg in den Themenbereich unten präsentiere. Die vollständige Literaturliste mit rund 100 Quellen werde ich in einem separaten Beitrag online stellen.

[Read more…] about Literaturempfehlungen und Einstiege: Eine Einführung in die Topologische Datenanalyse (TDA)
  • « Go to Previous Page
  • Go to page 1
  • Go to page 2

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