WooCommerce egyedi állapot háttérszínének megváltoztatása

Egy korábbi részben megnéztük, hogyan lehet egyedi WooCommerce rendelési állapotot létrehozni. Ami rögtön szembeötlő volt, az ezen egyedi állapotok megkülönböztetésének nehézsége: mindegyik egyedi állapot ugyanolyan (szürke) háttérszínt kapott.

A megoldást két részre bontjuk:

létrehozunk egy .css fájlt, amiben a saját megjelenítési szabályaink lesznek,
egy .php fájllal pedig behivatkozzuk ezt az admin felületen.

A második fele a feladatnak már szinte teljesen készen is van, hiszen vettünk már egy ilyen snippetet korábban, melyet itt találsz: A WordPress admin felületének testreszabása egyedi CSS-el

Az ebben található kódot fogjuk átalakítani, éppen csak egy kicsit - hozzunk létre egy fájlt az mu-plugins mappában, mondjuk custom-order-status-colors.php néven, az alábbi tartalommal:

Ha ezzel sikeresen megvagyunk, akkor folytassuk az egyedi CSS-ünkkel, melynek ugyanitt hozzunk létre egy fájlt, custom-order-status-colors.css néven. A rendelési állapotokat jelző címkéket az .order-status.status-{status_slug} formátumú CSS selectorral tudjuk célozni, tehát ha az egyedi állapotunk neve wc-manufacturing, akkor az alábbi szabállyal világoskék hátteret és sötétkék szöveget adunk a Manufacturing állapotot jelző címkénknek:

Mentést és frissítést követően már láthatod is a munkád eredményét! Yay!