WooCommerce egyedi állapot háttérszínének megváltoztatása előnézeti képe

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

| Olvasási idő: 1 perc

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: 

php
<?php
/*
Plugin Name: WooCommerce custom order status colors
Plugin URI: https://www.webmenedzser.hu
Description: WooCommerce custom order status colors
Version: 1.0
Author: Radics Ottó
Author URI: https://www.webmenedzser.hu
License: GPLv3
*/

function load_custom_order_status_colors() {
    wp_register_style( 'custom_order_status_colors', WP_CONTENT_URL . '/mu-plugins/custom-order-status-colors.css', false, '1.0.0'  );
    wp_enqueue_style('custom_order_status_colors' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_order_status_colors');

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: 

css
.order-status.status-manufacturing {
    background: #c9e1ff;
    color: #4d6fd0;
}

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