Eigene Spalten in WooCommerce Bestellübersicht einfügen

Durch Anpassen Ihrer WooCommerce-Bestellübersicht können Sie zusätzliche Informationen anzeigen und Ihren Bestellverwaltungs-Workflow verbessern. Eine effektive Anpassung besteht darin, der Bestellliste Ihre eigenen benutzerdefinierten Spalten hinzuzufügen. In dieser Anleitung wird erläutert, wie Sie mit PHP eine benutzerdefinierte Spalte zur WooCommerce-Bestellseite hinzufügen und wie Sie diese mit benutzerdefiniertem CSS gestalten. Tools wie WP-Code oder Codeausschnitte werden empfohlen, um den Code sicher zu integrieren, ohne Kerndateien zu ändern.

Ansatz – PHP-Lösung

Mithilfe von Filtern und Aktionen, die WooCommerce bietet, können Sie der Bestellübersicht neue Spalten hinzufügen und benutzerdefinierte Daten anzeigen, die für jede Bestellung gespeichert sind. In diesem Beispiel erstellen wir eine benutzerdefinierte Spalte mit der Bezeichnung „Benutzerdefinierte Spalte“, die Daten anzeigt, die in den Metadaten der Bestellung unter dem Schlüssel gespeichert sind. _benutzerdefinierte_Spalte.

Beispielcode:

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

So funktioniert es:

Die erste Funktion, Spalte_für_benutzerdefinierte_Bestellung hinzufügenverwendet die Verwalten_Bearbeiten_von_Shop-Bestellspalten Filter, um eine neue Spalte nach der Spalte „Bestellstatus“ einzufügen. Die zweite Funktion, Spalte "Benutzerdefinierte Reihenfolge" füllen, nutzt die verwalten_shop_order_posts_custom_column Aktion, um die benutzerdefinierte Spalte mit Daten zu füllen, die aus den Post-Metadaten abgerufen wurden. Wenn das Metafeld _benutzerdefinierte_Spalte leer ist, wird ein Bindestrich angezeigt.

Anreicherung mit CSS

Benutzerdefiniertes CSS kann dazu beitragen, das Erscheinungsbild und die Reaktionsfähigkeit Ihrer neuen Spalte zu verbessern. Der folgende CSS-Ausschnitt sorgt dafür, dass Ihre benutzerdefinierte Spalte mit einer dezenten Hintergrundfarbe und einem verfeinerten Textstil hervorsticht.

Beispiel-CSS-Code:

/* Gestalten Sie die benutzerdefinierte Spalte in der WooCommerce-Bestellübersicht */ .column-custom_column { background-color: #f9f9f9; color: #333; font-weight: bold; text-align: center; padding: 8px; }

Integration mit PHP:

Um dieses CSS in den Adminbereich einzufügen, fügen Sie den folgenden PHP-Code hinzu. Dieser Code verwendet die Administrator_Kopf Hook, um die benutzerdefinierten Stile direkt in Ihren WordPress-Administrationsbereich auszugeben.

<?php
function add_custom_order_column_styles() {
    echo '
    .column-custom_column { Hintergrundfarbe: #f9f9f9; Farbe: #333; Schriftstärke: fett; Textausrichtung: zentriert; Polsterung: 8px; } '; } add_action( 'admin_head', 'add_custom_order_column_styles' ); ?>

Abschluss

Das Hinzufügen benutzerdefinierter Spalten zu Ihrer WooCommerce-Bestellübersicht ist eine praktische Möglichkeit, zusätzliche, maßgeschneiderte Informationen anzuzeigen, die die Effizienz der Bestellverwaltung verbessern. Mit der bereitgestellten PHP-Lösung können Sie eine neue Spalte hinzufügen und sie mit spezifischen Metadaten für jede Bestellung füllen. Die Ergänzung der Funktionalität mit benutzerdefiniertem CSS stellt sicher, dass Ihre Spalte nicht nur informativ ist, sondern auch visuell in Ihr Admin-Dashboard integriert ist.

Experimentieren Sie mit diesen Techniken, um Ihre Möglichkeiten zur Auftragsverwaltung zu erweitern und ein individuelleres Backend-Erlebnis zu schaffen, das Ihren Geschäftsanforderungen entspricht. Viel Spaß beim Programmieren!