Columnas personalizadas adicionales para la descripción general de pedidos de WooCommerce

Personalizar la descripción general de pedidos de WooCommerce puede permitirle mostrar información adicional y mejorar el flujo de trabajo de administración de pedidos. Una personalización eficaz es agregar sus propias columnas personalizadas a la lista de pedidos. Esta guía explica cómo agregar una columna personalizada a la página de pedidos de WooCommerce usando PHP y cómo diseñarla con CSS personalizado. Herramientas como Código WP o Fragmentos de código Se recomiendan para integrar el código de forma segura sin modificar los archivos principales.

Enfoque – Solución PHP

Con los filtros y las acciones que ofrece WooCommerce, puedes añadir nuevas columnas a la descripción general de los pedidos y mostrar los datos personalizados almacenados para cada pedido. En este ejemplo, creamos una columna personalizada denominada “Columna personalizada” que muestra los datos guardados en los metadatos del pedido bajo la clave _columna personalizada.

Código de ejemplo:

<?php
// Add a custom column to the WooCommerce orders overview
function add_custom_order_column( $columns ) {
    $new_columns = array();
    
    // Iterate existing columns and insert our custom column after the Order Status column
    foreach ( $columns as $key => $column ) {
        $new_columns[ $key ] = $column;
        if ( 'order_status' === $key ) {
            $new_columns['custom_column'] = __( 'Custom Column', 'text_domain' );
        }
    }
    return $new_columns;
}
add_filter( 'manage_edit-shop_order_columns', 'add_custom_order_column', 20 );

// Populate the custom column with its value from the order meta data
function populate_custom_order_column( $column, $post_id ) {
    if ( 'custom_column' === $column ) {
        $custom_value = get_post_meta( $post_id, '_custom_column', true );
        echo ! empty( $custom_value ) ? esc_html( $custom_value ) : '-';
    }
}
add_action( 'manage_shop_order_posts_custom_column', 'populate_custom_order_column', 10, 2 );
?>

Cómo funciona:

La primera función, Agregar columna de pedido personalizado, utiliza el administrar_editar_columnas_de_pedidos_de_tienda filtro para insertar una nueva columna después de la columna “Estado del pedido”. La segunda función, rellenar_columna_de_pedido_personalizado, hace uso de la Administrar_columnas_personalizadas_de_publicaciones_de_pedidos_de_tienda Acción para llenar la columna personalizada con datos recuperados de la metadatos de la publicación. Si el campo metadatos _columna personalizada está vacío, se muestra un guión.

Mejorando con CSS

Los CSS personalizados pueden ayudar a mejorar la apariencia visual y la capacidad de respuesta de su nueva columna. El siguiente fragmento de CSS garantiza que su columna personalizada se destaque con un color de fondo sutil y un estilo de texto refinado.

Código CSS de ejemplo:

/* Dar estilo a la columna personalizada en la descripción general de pedidos de WooCommerce */ .column-custom_column { background-color: #f9f9f9; color: #333; font-weight: bold; text-align: center; padding: 8px; }

Integración con PHP:

Para insertar este CSS en el área de administración, agregue el siguiente código PHP. Este código utiliza el cabeza_administradora gancho para generar los estilos personalizados directamente en los paneles de administración de WordPress.

<?php
function add_custom_order_column_styles() {
    echo '
    .column-custom_column { color de fondo: #f9f9f9; color: #333; peso de fuente: negrita; alineación del texto: centro; relleno: 8px; } '; } add_action( 'admin_head', 'agregar_estilos_de_columna_de_pedido_personalizados' ); ?>

Conclusión

Agregar columnas personalizadas a la descripción general de pedidos de WooCommerce es una forma práctica de mostrar información adicional personalizada que mejora la eficiencia de la gestión de pedidos. Con la solución PHP proporcionada, puede agregar una nueva columna y completarla con metadatos específicos para cada pedido. Complementar la funcionalidad con CSS personalizado garantiza que su columna no solo sea informativa, sino que también esté integrada visualmente en su panel de administración.

Experimente con estas técnicas para ampliar sus capacidades de gestión de pedidos y crear una experiencia de backend más personalizada que se adapte a las necesidades de su negocio. ¡Que disfrute codificando!