Wissen WooCommerce

Kurstermine in der WooCommerce-Produktübersicht anzeigen

Produkte können in WooCommerce auch Kurse, Führungen und weitere Termine abbilden. Zusätzliche Spalten zeigen Datum und Zeit direkt in der Produktübersicht und ordnen die Angebote nach ihrem Starttermin.

3 Min. · 31. Mai 2023 · von Matthias Ulrich

WooCommerce-Produkte können neben Waren auch zeitgebundene Angebote darstellen. Werden Start- und Endzeit als Produkt-Metadaten gespeichert, erscheinen diese Angaben in der Produktübersicht als eigene Spalten.

Die Redaktion erhält damit einen Überblick über geplante Angebote direkt dort, wo Produkte gepflegt und bearbeitet werden. Eine eigene Blocklösung für die Eingabe und sichtbare Ausgabe von Terminen beschreibt der Beitrag Zeitangaben in WordPress verständlich erfassen und anzeigen.

Datum und Zeit in der Übersicht anzeigen

Die folgenden Hooks gelten für den Post Type product. Sie ergänzen die WooCommerce-Produktübersicht um die Spalten «Datum» und «Zeit».

function ud_add_product_course_columns( $columns ) {
    $columns['kurs_start'] = __( 'Datum', 'textdomain' );
    $columns['kurs_zeit']  = __( 'Zeit', 'textdomain' );

    return $columns;
}
add_filter( 'manage_product_posts_columns', 'ud_add_product_course_columns', 20 );

function ud_render_product_course_columns( $column, $product_id ) {
    $start_raw = get_post_meta( $product_id, 'kurs_start', true );
    $end_raw   = get_post_meta( $product_id, 'kurs_ende', true );

    if ( 'kurs_start' === $column && $start_raw ) {
        $start = DateTimeImmutable::createFromFormat(
            '!Y-m-d H:i:s',
            $start_raw,
            wp_timezone()
        );

        if ( $start ) {
            $formatter = new IntlDateFormatter(
                'de_CH',
                IntlDateFormatter::LONG,
                IntlDateFormatter::NONE,
                wp_timezone()->getName()
            );
            $formatter->setPattern( 'd. MMMM y' );

            echo esc_html( $formatter->format( $start ) );
        }
    }

    if ( 'kurs_zeit' === $column ) {
        $times = array();

        foreach ( array( $start_raw, $end_raw ) as $time_raw ) {
            $time = DateTimeImmutable::createFromFormat(
                '!Y-m-d H:i:s',
                $time_raw,
                wp_timezone()
            );

            if ( $time ) {
                $times[] = $time->format( 'H:i' );
            }
        }

        if ( $times ) {
            echo esc_html( implode( ' – ', $times ) . ' Uhr' );
        }
    }
}
add_action( 'manage_product_posts_custom_column', 'ud_render_product_course_columns', 10, 2 );

Die Metafelder kurs_start und kurs_ende enthalten in diesem Beispiel Werte im Format Y-m-d H:i:s. Die Ausgabe verwendet die in WordPress hinterlegte Zeitzone und formatiert das Datum für Deutsch (Schweiz).

Produkte nach Starttermin sortieren

Ein Klick auf die Datumsspalte kann die Produktabfrage nach dem gespeicherten Startdatum ordnen. Dafür wird die Spalte als sortierbar registriert und die Admin-Abfrage ergänzt.

function ud_register_product_course_sorting( $columns ) {
    $columns['kurs_start'] = 'kurs_start';

    return $columns;
}
add_filter( 'manage_edit-product_sortable_columns', 'ud_register_product_course_sorting' );

function ud_sort_products_by_course_start( $query ) {
    if ( ! is_admin() || ! $query->is_main_query() ) {
        return;
    }

    if ( 'product' !== $query->get( 'post_type' ) ) {
        return;
    }

    if ( 'kurs_start' === $query->get( 'orderby' ) ) {
        $query->set( 'meta_key', 'kurs_start' );
        $query->set( 'orderby', 'meta_value' );
    }
}
add_action( 'pre_get_posts', 'ud_sort_products_by_course_start' );

Da das Startdatum im Format Y-m-d H:i:s gespeichert ist, entspricht die alphabetische Sortierung der zeitlichen Reihenfolge. Die nächsten Termine erscheinen dadurch direkt in der WooCommerce-Produktübersicht.

Ergebnis

Kurstermine direkt in der Produktübersicht verwalten

WooCommerce-Produkte erhalten mit den zusätzlichen Spalten eine zeitliche Einordnung. Datum, Uhrzeit und Sortierung unterstützen die Pflege von Kursen, Führungen und weiteren Angeboten.

Termine direkt anzeigen

Die Produktübersicht ergänzt Kurse und Führungen um Datum sowie Start- und Endzeit.

Datum lesbar ausgeben

WordPress-Zeitzone und deutsches Datumsformat schaffen eine einheitliche Darstellung.

Angebote zeitlich sortieren

Ein Klick auf die Datumsspalte ordnet Produkte nach dem gespeicherten Starttermin.