Cambiar colores de los estados de pedido en WooCommerce

Si tienes tu tienda en WordPress con WooCommerce vas a notar que te hacen falta muchas cositas a priori que no sabes muy bien por qué no están. Una de las cosas primeras que vas a echar en falta es personalizar los colores de los estados de pedido en WooCommerce. Lo que puede mejorar significativamente la gestión y visualización de los mismos en el panel de control de tu tienda online. Voy a guiarte en este pequeño artículo para lograr esta personalización de manera efectiva.

1. Comprende los estados de pedido predeterminados en WooCommerce

Vamos a empezar por lo básico. WooCommerce asigna diferentes estados a los pedidos según su progreso. Los estados predeterminados son los siguientes:

• Pendiente de pago: Pedido recibido, pero el pago aún no se ha iniciado.
• Fallido: El pago no se completó o fue rechazado.
• Procesando: Pago recibido y el pedido está en proceso de cumplimiento.
• Completado: Pedido completado y no requiere más acciones.
• En espera: A la espera de pago; el inventario se reduce, pero se debe confirmar el pago.
• Cancelado: Pedido cancelado por el administrador o el cliente.
• Reembolsado: Pedido reembolsado al cliente.

Aque echas en falta el estado Enviado ¿a que sí? Para otro momento. Pues cada uno de estos estados tiene un color asociado en WooCommerce para facilitar su identificación:

• Gris: Pendiente de pago, cancelado o reembolsado.
• Rojo: Fallido.
• Naranja: En espera.
• Verde: Procesando.
• Azul: Completado.

2. Personaliza los colores de los estados de pedido

Si quisieras modificar los colores de los estados de pedido en el panel de control de WooCommerce, puedes utilizar un fragmento de código que añada estilos CSS personalizados. Para ello sigue estos pasos.

• • Accede al archivo functions.php de tu tema hijo o utiliza un plugin de fragmentos de código para insertar el siguiente código (a priori te recomiendo lo segundo, si no sabes crear un plugin)
  • Añadir estilos personalizados para los estados de pedido en el backend de WooCommerce

// Añadir estilos personalizados para los estados de pedido en el backend de WooCommerce
add_action('admin_head', 'personalizar_colores_estados_pedido');
function personalizar_colores_estados_pedido() {
    echo '<style>
        .status-wc-pendiente { background-color: #f0f0f0; color: #72777c; }
        .status-wc-fallido { background-color: #ffa5a5; color: #a00; }
        .status-wc-procesando { background-color: #f8dda7; color: #94660c; }
        .status-wc-en-espera { background-color: #c8d7e1; color: #2e4453; }
        .status-wc-completado { background-color: #d7f3e3; color: #3b8f62; }
        .status-wc-cancelado { background-color: #e1e1e1; color: #72777c; }
        .status-wc-reembolsado { background-color: #e1e1e1; color: #72777c; }
    </style>';
}

Este código define colores personalizados para cada estado de pedido en el panel de control de WooCommerce. Puedes ajustar los valores de `background-color` y `color` según tus preferencias con códigos hexadecimales de color.

3. Añade el código a tu sitio web

Para implementar este código, tienes dos opciones:

• Usar un plugin de fragmentos de código: Plugins como «Code Snippets» te permiten añadir código personalizado sin modificar los archivos del tema.
• Editar el archivo functions.php de tu tema hijo: Si prefieres añadir el código directamente, edita el archivo functions.php de tu tema hijo y pega el fragmento proporcionado.

4. Verifica los cambios

Después de añadir el código, accede al panel de administración de WooCommerce y navega a la sección de pedidos. Deberías ver los estados de los pedidos con los colores personalizados que has definido.

Consideraciones adicionales

• Uso de plugins: Si prefieres no manipular código, existen plugins que facilitan la personalización de los estados de pedido y sus colores. Por ejemplo, «Custom Order Status for WooCommerce» permite crear y modificar estados de pedido personalizados con facilidad.
• Copias de seguridad: Antes de realizar cambios, es recomendable hacer una copia de seguridad de tu sitio web. Además, prueba los cambios en un entorno de desarrollo para asegurarte de que todo funcione correctamente.

Personalizar los colores de los estados de pedido en WooCommerce no solo mejora la estética de tu panel de administración, sino que también facilita la gestión y seguimiento de los pedidos, optimizando el flujo de trabajo en tu tienda online, y localizando el estado de los pedidos de un solo vistazo.