Ytterligere tilpassede kolonner til WooCommerce-ordreoversikten

Å tilpasse WooCommerce-ordreoversikten din kan gi deg mulighet til å vise tilleggsinformasjon og forbedre arbeidsflyten for ordreadministrasjon. En effektiv tilpasning er å legge til dine egne tilpassede kolonner i bestillingslisten. Denne veiledningen forklarer hvordan du legger til en egendefinert kolonne på WooCommerce-bestillingssiden ved hjelp av PHP og hvordan du stiler den med tilpasset CSS. Verktøy som WP-kode eller Kodebiter anbefales for sikker integrering av koden uten å endre kjernefiler.

Tilnærming – PHP-løsning

Ved å bruke filtre og handlinger levert av WooCommerce kan du legge til nye kolonner i ordreoversikten og vise tilpassede data lagret for hver ordre. I dette eksemplet lager vi en egendefinert kolonne merket "Egendefinert kolonne" som viser data lagret i bestillingens metadata under nøkkelen _egendefinert_kolonne.

Eksempelkode:

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

Slik fungerer det:

Den første funksjonen, add_custom_order_column, bruker manage_edit-shop_order_columns filter for å sette inn en ny kolonne etter «Ordrestatus»-kolonnen. Den andre funksjonen, populate_custom_order_column, gjør bruk av administrer_butikk_ordre_innlegg_tilpasset_kolonne handling for å fylle den egendefinerte kolonnen med data hentet fra innleggets meta. Hvis metafeltet _egendefinert_kolonne er tom, viser den en bindestrek.

Forbedre med CSS

Tilpasset CSS kan bidra til å forbedre det visuelle utseendet og responsen til den nye kolonnen din. Følgende CSS-kodebit sørger for at din egendefinerte kolonne skiller seg ut med en subtil bakgrunnsfarge og raffinert tekststil.

Eksempel CSS-kode:

/* Stil den egendefinerte kolonnen i WooCommerce-ordreoversikten */ .column-custom_column { background-color: #f9f9f9; farge: #333; font-weight: fet; tekst-align: center; polstring: 8px; }

Integrasjon med PHP:

For å sette inn denne CSS-en i admin-området, legg til følgende PHP-kode. Denne koden bruker admin_head hekte for å sende ut de tilpassede stilene direkte i WordPress-administrasjonspanelene dine.

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

Konklusjon

Å legge til egendefinerte kolonner i WooCommerce-ordreoversikten din er en praktisk måte å vise ekstra, skreddersydd informasjon som forbedrer ordrehåndteringseffektiviteten. Med PHP-løsningen som følger med, kan du legge til en ny kolonne og fylle den med spesifikke metadata for hver bestilling. Å komplementere funksjonaliteten med tilpasset CSS sikrer at kolonnen din ikke bare er informativ, men også visuelt integrert i administrasjonsdashbordet.

Eksperimenter med disse teknikkene for å utvide mulighetene for ordreadministrasjon og skape en mer tilpasset backend-opplevelse som passer dine forretningsbehov. Lykke til med koding!