Ich habe euch ja vor einiger Zeit mal gezeigt (WooCommerce: Wie erstellt man einen eigenen Bestellstatus?), dass man sich in WooCommerce auch einen eigenen Bestellstatus erstellen kann. Das ist praktisch wenn man einen Online Shop hat und man möchte die Bestellungen ein wenig Organisieren. Anstatt nur „Wartestellung“ und „In Bearbeitung“ kann man so auch einen Bestellstatus machen wie „in Verpackung“ oder „Nachbestellt“ oder so.

Nun wurde mir bei diesem Beitrag eine Frage gestellt und zwar wollte man wissen, ob ich so einen eigenen Status auch farblich markieren kann. Da die Beantwortung dieser Frage die Kommentarspalte sprengen würde, werde ich nun diese Frage hier beantworten.

Kurze Antwort: Natürlich kann man sowas anpassen 🙂

Die lange Antwort ist: Wenn man sowas machen möchte, muss man ein wenig sich mit CSS und FTP auskennen. Hier zeige ich euch nun wie man das umsetzen kann.

Eigener Bestellstatus Code anschauen

Als erstes muss ich mir den Code anschauen mit dem ich meinen eigenen Bestellstatus erstellt habe. Ihr müsst nun rausfinden wie die CSS Klasse heisst die ihr da angelegt habt, merkt euch dieses Wort und notiert es euch auf

Neues Admin CSS File generieren

Wenn ihr nun einfach den neuen CSS Befehl in euer normales styles.css einfügen würdet, dann würdet ihr schnell merken, dass es nicht funktioniert. Das Admin Dashboard von WordPress / WooCommerce verwendet ein anderes CSS File als der Frontendbereich eurer Webseite.

Als nächstes empfehle ich euch, erstellt ein neues CSS File und nennt es wp-admin.css.
In dieses File packen wir danach den Farbcode ein

Theme URL herausfinden

Nun solltet ihr mal nachschauen wie die URL eures themes ordner genau lautet. Am einfachsten geht es wenn ihr kurz euer FTP öffnet und es dann kurz auch aufschreibt.

functions.php File erweitern

Jetzt müsst ihr den neuen Befehl für eure functions.php Datei generieren. Als erstes müsst ihr eure StyleSheet URL kurz anpassen und zwar in diese Pfad-Art

1

/wp-content/themes/divi-child/wp-admin.css

Wie ihr sehen könnt nichts mit https oder so sondern direkt ab der Root Ebene eurer WordPress Installation.

Bei mir lautet also der Code so: (Wenn ihr kein Divi-Child Theme verwendet sondern was anderes müsst ihr natürlich das anpassen!!

1
2
3
4
5
6
7

/* Admin CSS */
function adminStyleCSS() {
    $url = get_settings('siteurl');
    $url = $url . '/wp-content/themes/divi-child/wp-admin.css';
    echo '<link rel="stylesheet" type="text/css" href="' . $url . '" />';
}
add_action('admin_head', 'adminStyleCSS');

Diesen Code baut ihr nun in eure functions.php Datei ein.

wp-admin.css Datei generieren

Als nächstes müssen wir diese wp-admin.css Datei erstellen und ausfüllen. Wir wissen ja bereits, dass die CSS Klasse bei mir ≪inarbeit1≫ heisst, das müsst ihr jetzt natürlich bei euch auch anpassen und dann sieht mein Code so aus:

1
2
3
4

mark.order-status.status-inarbeit1 {
    color: white;
    background: blueviolet;
}

Color ist die Schriftfarbe und Background ist natürlich die Hintergrundfarbe. Wie ihr sehen könnt ich habe hier die Wort-Farben genommen – ihr könnt natürlich auch mit den Hexfarben arbeiten – also anstatt blueviolet heissts dann einfach #662483.

Einfach den Code anpassen und als css File abspeichern und auf die Seite legen

wp-admin.css via FTP in WordPress hochladen

Jetzt ist das ganze fast fertig, ihr müsst die wp-admin.css Datei nun über FTP hochladen

Cache löschen und fertig

Nun sind wir fast fertig. Als letzter Akt müsst ihr nur noch kurz euer Cache löschen und zack sollte es laufen.

Farben anpassen

Wie ihr wisst kann man die functions.php und die style.css Datei im Backend direkt bearbeiten und zwar unter ≪Theme-Datei-Editor≫ das findet man ja unter ≪Design≫ im Backend von WordPress.

Nun müsst ihr wissen, wenn ihr die Farben eures eigenen Bestellstatus anpassen / updaten wollt, oder ihr wollt noch mehr selbst designen im Backend von WordPress – diese neue Datei die wir gerade erstellt haben – diese taucht nicht in diesem Editor auf – ihr werdet also immer via FTP arbeiten müssen.

Fertig

Wie ihr sehen könnt, wenn man ein wenig sauber arbeitet, dann kann man sich den eigenen Bestellstatus auch farblich anpassen und selbst andere Dashboard Designsanpassungen kann man so durchführen.

Danke für die Frage und ich hoffe ihr versteht den Weg wie ihr dahin kommt 🙂