Yderligere tilpassede kolonner til WooCommerce-ordreoversigten

Tilpasning af din WooCommerce-ordreoversigt kan give dig mulighed for at vise yderligere information og forbedre din ordrestyringsarbejdsgang. En effektiv tilpasning er at tilføje dine egne brugerdefinerede kolonner til ordrelisten. Denne vejledning forklarer, hvordan du tilføjer en brugerdefineret kolonne til WooCommerce-ordresiden ved hjælp af PHP, og hvordan du style den med tilpasset CSS. Værktøjer som WP kode eller Kodestykker anbefales til sikker integration af koden uden at ændre kernefiler.

Fremgangsmåde – PHP-løsning

Ved at bruge filtre og handlinger leveret af WooCommerce kan du tilføje nye kolonner til ordreoversigten og vise tilpassede data gemt for hver ordre. I dette eksempel opretter vi en brugerdefineret kolonne mærket "Custom Column", der viser data gemt i ordrens metadata under nøglen _custom_column.

Eksempel kode:

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

Sådan fungerer det:

Den første funktion, add_custom_order_column, bruger manage_edit-shop_order_columns filter for at indsætte en ny kolonne efter kolonnen "Ordrestatus". Den anden funktion, populate_custom_order_column, gør brug af administrere_butik_ordre_indlæg_tilpasset_kolonne handling for at udfylde den tilpassede kolonne med data hentet fra post-metaen. Hvis metafeltet _custom_column er tom, viser den en tankestreg.

Forbedring med CSS

Tilpasset CSS kan hjælpe med at forbedre det visuelle udseende og reaktionsevnen af din nye kolonne. Følgende CSS-uddrag sikrer, at din brugerdefinerede kolonne skiller sig ud med en subtil baggrundsfarve og raffineret tekststil.

Eksempel CSS-kode:

/* Stil den tilpassede kolonne i WooCommerce-ordreoversigten */ .column-custom_column { background-color: #f9f9f9; farve: #333; font-weight: fed; tekst-align: center; polstring: 8px; }

Integration med PHP:

For at indsætte denne CSS i administrationsområdet skal du tilføje følgende PHP-kode. Denne kode bruger admin_head hook for at udlæse de brugerdefinerede stilarter direkte i dine WordPress-adminpaneler.

<?php
function add_custom_order_column_styles() {
    echo '
    .column-custom_column { baggrundsfarve: #f9f9f9; farve: #333; font-weight: fed; tekst-align: center; polstring: 8px; } '; } add_action( 'admin_head', 'add_custom_order_column_styles'); ?>

Konklusion

Tilføjelse af brugerdefinerede kolonner til din WooCommerce-ordreoversigt er en praktisk måde at vise yderligere, skræddersyet information, der forbedrer ordrestyringseffektiviteten. Med den medfølgende PHP-løsning kan du tilføje en ny kolonne og udfylde den med specifikke metadata for hver ordre. Komplementering af funktionaliteten med tilpasset CSS sikrer, at din kolonne ikke kun er informativ, men også visuelt integreret i dit admin-dashboard.

Eksperimenter med disse teknikker for at udvide dine ordrestyringsmuligheder og skabe en mere tilpasset backend-oplevelse, der passer til dine forretningsbehov. God kodning!