Colonne personalizzate aggiuntive per la panoramica degli ordini WooCommerce

Personalizzare la panoramica degli ordini WooCommerce può darti la possibilità di visualizzare informazioni aggiuntive e migliorare il flusso di lavoro di gestione degli ordini. Una personalizzazione efficace è aggiungere le tue colonne personalizzate all'elenco degli ordini. Questa guida spiega come aggiungere una colonna personalizzata alla pagina degli ordini WooCommerce usando PHP e come formattarla con CSS personalizzato. Strumenti come Codice WP O Frammenti di codice sono consigliati per integrare in modo sicuro il codice senza modificare i file core.

Approccio – Soluzione PHP

Utilizzando filtri e azioni forniti da WooCommerce, puoi aggiungere nuove colonne alla panoramica degli ordini e visualizzare i dati personalizzati memorizzati per ogni ordine. In questo esempio, creiamo una colonna personalizzata etichettata "Colonna personalizzata" che visualizza i dati salvati nei metadati dell'ordine sotto la chiave _colonna_personalizzata.

Codice di esempio:

<?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 );
?>

Come funziona:

La prima funzione, aggiungi_colonna_ordine_personalizzato, utilizza il gestisci_modifica_colonne_ordine_negozio filtro per inserire una nuova colonna dopo la colonna “Stato ordine”. La seconda funzione, popola_colonna_ordine_personalizzato, si avvale del gestisci_post_ordine_negozio_colonna_personalizzata azione per riempire la colonna personalizzata con i dati recuperati dal meta post. Se il campo meta _colonna_personalizzata è vuoto, viene visualizzato un trattino.

Miglioramento con CSS

Il CSS personalizzato può aiutare a migliorare l'aspetto visivo e la reattività della tua nuova colonna. Il seguente frammento CSS assicura che la tua colonna personalizzata si distingua con un colore di sfondo tenue e uno stile di testo raffinato.

Esempio di codice CSS:

/* Imposta lo stile della colonna personalizzata nella panoramica degli ordini WooCommerce */ .column-custom_column { background-color: #f9f9f9; color: #333; font-weight: bold; text-align: center; padding: 8px; }

Integrazione con PHP:

Per inserire questo CSS nell'area di amministrazione, aggiungi il seguente codice PHP. Questo codice utilizza il testa_amministrativa hook per generare gli stili personalizzati direttamente nei pannelli di amministrazione di WordPress.

<?php
function add_custom_order_column_styles() {
    echo '
    .column-custom_column { colore di sfondo: #f9f9f9; colore: #333; peso del carattere: grassetto; allineamento del testo: centro; spaziatura: 8px; } '; } add_action( 'admin_head', 'aggiungi_stili_colonna_ordine_personalizzati' ); ?>

Conclusione

Aggiungere colonne personalizzate alla panoramica degli ordini WooCommerce è un modo pratico per visualizzare informazioni aggiuntive e personalizzate che migliorano l'efficienza della gestione degli ordini. Con la soluzione PHP fornita, puoi aggiungere una nuova colonna e popolarla con metadati specifici per ogni ordine. Completare la funzionalità con CSS personalizzato assicura che la colonna non sia solo informativa, ma anche visivamente integrata nella dashboard di amministrazione.

Sperimenta queste tecniche per espandere le tue capacità di gestione degli ordini e creare un'esperienza di backend più personalizzata che si adatti alle tue esigenze aziendali. Buona codifica!