2019. 05. 27.
frissítve: 2022. 05. 15.
Olvasási idő: 6 perc
Plugout

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!