A mí el widget del dashboard de WooCommerce me parece muy útil: está pensado para que, cada mañana, puedas tener una idea exacta de la situación de la tienda de un sólo vistazo, en menos de un minuto. Y oye, cumple su función a la perfección.

Pero claro, ni todas las tiendas son iguales, ni todos necesitamos conocer los mismos indicadores de nuestra tienda para saber cómo va. Aparte de eso, ya como profesional, si añades funcionalidades a WooCommerce para tus clientes tienes que permitirles acceder a los nuevos datos de forma fácil y rápida, y para eso el widget del escritorio es ideal.

Así que, ¿por qué no?, vamos a ver cómo modificar el widget de escritorio de WooCommerce, de forma que muestre los datos que a nosotros nos interesa destacar para conocer la situación de nuestra tienda de un vistazo. Ojo, ya aviso que todo esto es un poco técnico, aunque intentaré que pueda seguirlo todo el mundo.

El widget de escritorio de WooCommerce

En fin, aquí no hace falta gran explicación, supongo que todo el mundo sabe de lo que hablo: es ese widget que encuentras en el dashboard de WordPress con el título Estado de WooCommerce y que WooCommerce pone ahí con un resumen de los datos más importantes de la tienda:

• Ventas netas este mes
• Producto más vendido este mes
• Pedidos en espera de procesar
• Pedidos en espera
• Productos casi sin existencias (en función de lo que hayas configurado en WooCommerce > Ajustes > Productos > Inventario > Umbral de pocas existencias)
• Productos agotados

Además, cada uno de estos datos es un enlace a la sección de WooCommerce correspondiente (pedidos o informes) lo que, como decía al principio, facilita la gestión enormemente, y te permite hacerte una idea general de forma muy rápida.

Añadir datos extra al widget de estado de WooCommerce

Como siempre, en un software de código abierto como WordPress y WooCommerce se puede modificar cualquier cosa si se sabe dónde tocar y cómo, y esto no es menos, claro.

Aunque si lo que necesitamos es algo más o menos habitual siempre podemos echar mano de un plugin. En este caso tenemos algunas alternativas. Por ejemplo, WooCommerce New Orders Dashboard Widget crea un nuevo widget de escritorio que muestra los últimos pedidos y su estado. No es lo más ideal, pero te puede sacar de un apuro.

Pero, ¿y si tienes una necesidad muy específica? ¿Y si desarrollas nuevas funcionalidades para WooCommerce? ¿Y si necesitas algo como esto?:

Es la hora del do it yourself, monamí.

Modificar el widget de escritorio de WooCommerce

No doy más vueltas, vamos a entrar en harina. Lo cierto y verdad es que modificar el widget de estado del dashboard de WooCommerce es muy sencillo: bastan un par de hooks y un poco de HTML y PHP básicos, aderezados con algo de CSS.

Añadir datos al widget de estado

La funcionalidad básica, añadir los datos, es realmente sencillo: sólo tienes que crear tu función que cree los datos y engancharla al hook woocommerce_after_dashboard_status_widget, que inserta tu código al final del widget de escritorio de WooCommerce.

Eso sí, ante todo seguridad y respetar los estándares: debemos asegurarnos que esa información sólo la vea quien pueda verla. Y puede verla el usuario que tenga los permisos view_woocommerce_reports, así que asegúrate de que la función que cuelgues del hook envuelve el código en un

if (current_user_can ('view_woocommerce_reports'))

¿Y cómo generaremos los datos a mostrar? Bueno, pues eso ya depende de qué datos quieras mostrar, aunque si van a estar en el widget de estado de WooCommerce es de suponer que serán datos relativos a pedidos de la tienda, así que lo normal será recuperar en un array los pedidos que cumplan las condiciones requeridas con un get_posts, pasarlos por un foreach instanciando para cada uno de ellos un objeto WC_Order, y almacenar en variables los datos que tengamos pensado mostrar en el widget.

Para que no sea todo tan teórico, vamos con un ejemplo. Si queremos mostrar el número de pedidos que están en un estado concreto y la cantidad que suman podríamos hacer:

$pedidos = get_posts (array (
	'numberposts' => -1,
	'post_type'   => wc_get_order_types (),
	'post_status' => 'wc-estado-pedido',
	));

foreach ($pedidos as $pedido) {
	$objeto = new WC_Order ($pedido->ID);
	$total += $objeto->order_total;
	$pedidos_estado++;
	}

Así al final del foreach tendremos el número total de pedidos que están en estado wc-estado-pedido almacenados en la variable $pedidos_estado (aunque igualmente podías despacharlo con un count ($pedidos), eso va al gusto), y las ventas totales que suman estos pedidos estará en $total. Sencillo, ¿no?

Sólo un apunte más, y es que recuerdes mostrar las cantidades monetarias a través de la función wc_price (), de forma que se impriman en el formato que el usuario haya configurado en las opciones de WooCommerce (símbolo de la moneda antes o después, con o sin espacio).

Creando el layout

Perfecto, y ahora que has generado los datos que quieres mostrar en el widget de escritorio de WooCommerce, toca mostrarlos. Ya hemos visto que para eso basta con retornarlos al hook woocommerce_after_dashboard_status_widget, pero ¿con qué formato?

Pues en realidad el widget no es más que una lista ul con la clase CSS wc_status_list, así que lo que tenemos que hacer que nuestra función devuelva son elementos para la lista, una serie de li.

Para que salgan con el mismo formato simplemente tendremos que asignarles las mismas clases CSS que utiliza la lista original generada por WooCommerce:

• sales-this-month para los totales de ventas
• best-seller-this-month para los datos relativos a productos
• processing-orders para los pedidos a la espera de ser procesados
• Etcétera

Pero lo más normal es que, si estamos añadiendo datos propios, estén seguramente asociados a estados de pedido personalizados que hemos creado nosotros mismos. ¿Cómo lo hacemos?

Pues nada, aquí es donde entran en juego nuestras habilidades con CSS. Simplemente podemos añadir a nuestro script una segunda función enganchada a wp_print_scripts y que imprima los estilos necesarios para ello. Por lo que más quieras, haz las cosas bien: esa función debería comenzar con un

if (!is_admin())
	return;

De esta forma estos estilos sólo se cargarán en el panel de administración y no obligarás a la web a cargarlos en todas las páginas. Aunque, si de verdad quieres hacer bien las cosas, deberías crear un archivo CSS específico, registrarlo con wp_register_style y encolarlo con wp_enqueue_style enganchado al hook admin_enqueue_scripts. Las cosas bien hechas siempre estarán bien hechas.

En cuanto a las clases a utilizar, lo tienes fácil: tienes que aplicar tus estilos a

#woocommerce_dashboard_status .wc_status_list li.clases-personalizadas

Ya te haces una idea: un width:100% si es el item que muestra el encabezamiento y un a:before con content para los iconos de los tipos de pedido. Estos iconos tienen que ser de 24×24 píxels, y para que salgan redondos les puedes aplicar un border-radius:12px. Todo muy básico.

Conclusión

¡Y ya está! El resultado ya lo ves en la imagen de más arriba. Como podrás comprobar, en total no llega a cien líneas de código, incluyendo los estilos. Así que haz las cosas bien hechas: si añades a WooCommerce funcionalidades con datos relevantes, no cuesta nada mostrar esos nuevos datos en el widget de estado. 🙂

Si eres un usuario y has tenido el valor y la paciencia de llegar hasta aquí, siento que este artículo haya salido tan técnico. Sin embargo veo que cada día me siguen más desarrolladores y, ¿por qué no?, ha de haber para todos. 🙂