✅ Colores Personalizados en los Estados del Pedido de Woocommerce

Cuando administramos una tienda en línea con WooCommerce, es crucial tener una interfaz clara y fácil de entender para monitorear el estado de los pedidos. A menudo, los estados de los pedidos se presentan en una lista, lo que puede resultar confuso si no están claramente diferenciados. En este artículo, aprenderemos cómo mejorar la visualización de los estados de los pedidos mediante la asignación de colores personalizados a cada estado, lo que facilitará su identificación de un vistazo.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.

<?php

function custom_admin_orders_status_colors() {
    ?>
    <script>
        jQuery(document).ready(function($) {
            // Función para asignar colores a los estados
            function asignarColorEstado() {
                $('.order-status').each(function() {
                    var estado = $(this).text().trim();
                    switch(estado) {
                        case 'Pendiente de pago':
                            $(this).css({
                                'background-color': '#ffcc00', // Amarillo
                                'color': '#000000' // Negro
                            });
                            break;
                        case 'Procesando':
                            $(this).css({
                                'background-color': '#00a258', // Verde
                                'color': '#ffffff' // Blanco
                            });
                            break;
                        case 'Completado':
                            $(this).css({
                                'background-color': '#3366ff', // Azul
                                'color': '#ffffff' // Blanco
                            });
                            break;
                        case 'Cancelado':
                            $(this).css({
                                'background-color': '#ff0000', // Rojo
                                'color': '#ffffff' // Blanco
                            });
                            break;
                        case 'Reembolsado':
                            $(this).css({
                                'background-color': '#9900cc', // Púrpura
                                'color': '#ffffff' // Blanco
                            });
                            break;
                        case 'Fallido':
                            $(this).css({
                                'background-color': '#ff6600', // Naranja
                                'color': '#ffffff' // Blanco
                            });
                            break;
						case 'En espera':
                            $(this).css({
                                'background-color': '#ce112d', // Rojo
                                'color': '#ffffff' // Blanco
                            });
                            break;
                        // Agrega más casos según tus necesidades
                    }
                });
            }

            // Llama a la función cuando la página está lista
            asignarColorEstado();
        });
    </script>
    <?php
}
add_action('admin_footer', 'custom_admin_orders_status_colors');

Lenguaje del código: HTML, XML (xml)

Entendiendo el Código

El código proporcionado es una función de PHP que se integra en WordPress y se ejecuta en el pie de página del área de administración (admin_footer). Esta función utiliza jQuery para manipular el DOM y asignar colores personalizados a los diferentes estados de los pedidos en la interfaz de administración de WooCommerce.

Dentro de la función

custom_admin_orders_status_colors(), se abre una etiqueta de script para comenzar con el código jQuery.

Dentro del script jQuery, se define una función llamada asignarColorEstado(), que se encarga de asignar los colores a los estados de los pedidos. Esta función se ejecuta para cada elemento con la clase .order-status.

Dentro del bucle .each(), se obtiene el texto de cada elemento y se compara con una serie de casos utilizando un switch. Dependiendo del estado del pedido, se asigna un color de fondo y un color de texto específico utilizando el método .css() de jQuery.

Después de definir la función asignarColorEstado(), se llama a esta función una vez que el documento esté listo, utilizando $(document).ready(). Esto asegura que la función se ejecute después de que la página se haya cargado completamente.

La función custom_admin_orders_status_colors() se agrega como un gancho (add_action()) en el pie de página del área de administración de WordPress.

Nos vemos en el siguiente tutorial.

Un saludo.