WooCommerce QuickTipp – Dropdowns in Kasse zeigen keinen Text an…

Es kann passieren, dass wenn du eine helle Schriftart für deinen WooCommerce Shop wählst, die Schriften der Dropdowns auf der Kasse nicht mehr lesbar sind. Wenn du also die Schriftfarbe deiner WordPress Website im Customizer global auf weiß gesetzt hast, werden die Inhalte der Auswahlfelder evtl. auch weiß bleiben. Hierbei ist es wahrscheinlich egal, welchen Hintergrund du im Customozer oder per CSS wählst, die Felder bleiben oft nicht lesbar und können dann so aussehen.

Wenn das Select-Feld des Dropdown nicht lesbar ist, nutzen es bestimmt auch weniger Besucher. Zeit es zu beheben.

Hier helfen ein paar Zeilen CSS und schon ist diese unschöne Kleinigkeit behoben. Hinterlege folgendes CSS im Customizer oder deiner style.css im Child-Theme, um die Texte deiner Select-Felder bzw. Dropdowns wieder angezeigt zu bekommen.

So kannst du die Schriftfarbe für den Text anpassen:

.select2-dropdown {
    color: #000000;
}

Danach solltest du die Zeilen der Auswahl wieder lesen können. Das sieht dann so aus:

Wenn die Zeilen wieder lesbar sind, macht das einkaufen im Shop mehr Spaß und die Besucher springen dir nicht mehr ab.

Möchtest du lieber die Hintergrundfarbe des Select-Feldes bzw. den Options-Zeilen ändern? Dann nutze folgendes CSS:

.select2-dropdown {
    background-color: #000000;
}

Sollten diese Anpassungen auf deiner Website nicht sofort greifen, kannst du mit „!important“ hinter der Farbe testen, ob es überhaupt eine Änderung hervorruft. Diese Option ist nicht empfohlen, da hier alle Farben für dei gewählte Klasse überschrieben werden. Da WooCommerce jQuery für diese Auswahllisten nutzt, kann es sein, dass du es damit überschreiben musst. Das sieht dann wie folgt aus:

.select2-dropdown {
    color: #000000 !important;
}

Sollte das geklappt haben, kannst du mit zusätzlichen Selektoren versuchen die hinterlegte Farbe ohne das !important; zu überschreiben. In unserem Fall nehmen wir uns einfach „body“ und das könnte dann z.B. so aussehen:

body .select2-dropdown {
    color: #000000;
}

Hast du damit dein Darstellungsproblem mit den Dropdowns auf der WooCommerce Kassenseite lösen können oder bist du nicht fündig geworden? Schreib es unten in die Kommentare und gib uns gerne Feedback, was dir weitergeholfen hat.

Du hast es trotz Anleitung nicht hinbekommen, deine WordPress Website schimpft weiterhin mit dir und bereitet dir Probleme bei diesem Thema? Kontaktiere uns gern und wir helfen dir im 1:1 direkt mit deinen Fragen weiter. Telefonisch, per Bildschirmübertragung oder per Mail, du hast die Wahl.

Solltest du mal nicht weiterkommen und dein WordPress macht schlicht nicht was du möchtest? Hierfür kannst du neben den Infos aus unseren Beiträgen auch direkten Kontakt mit uns aufnehmen. Schreibe uns einfach dein Anliegen oder beschreibe Problem und wir schauen gemeinsam drüber und finden eine Lösung für dich. Sobald wir deine Angaben haben, schätzen wir vorher grob den Aufwand ab und vereinbaren dann einen Termin mit dir, in welchem wir telefonisch oder live mit Bildschirmübertragung auf deine Fragen eingehen werden. Support per Mail ist natürlich auch möglich.

Probiere es gerne aus, wir freuen uns auf deine Anfrage.



    Erkunde weitere Beiträge

    Schreibe einen Kommentar