Das Variationen-Popup einer WooCommerce Produkttabelle anpassen

22 December 2026

Das Variationen-Popup einer WooCommerce Produkttabelle, das Fenster, das sich öffnet, wenn ein Besucher neben einem variablen Produkt auf select [5] klickt, ist eine kleine Produkttabelle für sich. Um das Variationen-Popup anzupassen, ändern Sie diese Tabelle: ihre Spalten, die Zeilen pro Seite, die Sortierreihenfolge, zusätzliche Felder und das Aussehen. Einiges davon ist eine Einstellung, der Rest erfordert ein paar Zeilen Code. Jede Aufgabe finden Sie unten samt dem Grund, warum sie so funktioniert.

So funktioniert das Variationen-Popup einer WooCommerce Produkttabelle

Zwei Schaltflächen öffnen das Popup. In der Spalte Warenkorb (Cart) erhält ein variables Produkt anstelle einer Schaltfläche In den Warenkorb (Add to cart) die Schaltfläche select [N], und die Spalte Variationen (Variations) zeigt Var.[N], wobei N die Anzahl der Variationen ist. Beide laden die Tabelle [woot_variations] für dieses Produkt.

Das Popup verwendet nicht die Spalten der Tabelle, aus der es geöffnet wurde. Seine Spalten stammen aus WOOT → Einstellungen (Settings) → Spalten der Variationen (Variations columns); von der übergeordneten Tabelle wird nur das Design (Skin) übernommen.
Alle Variationen des Produkts werden auf einmal geladen und dann im Browser seitenweise angezeigt und sortiert: 10 Zeilen pro Seite, die Seitennavigation oben, die Zeilen alphabetisch nach der Zelle Titel (Title) sortiert. Der Titel einer Variation ist der Produktname plus ihre Attributwerte, weshalb Größen in der Reihenfolge L, M, S, XL erscheinen.
Das Popup ist immer eine Tabelle. Sein Layout lässt sich nicht durch ein Template ersetzen, aber jede Spalte darin kann geändert oder ergänzt werden.

Codeänderungen laufen über einen einzigen Filter, woot_vurgc_shortcode_data. Er wird für die Tabellen der Variationen, Upsells, Cross-Sells, gruppierten und verwandten Produkte unmittelbar vor dem Zeichnen der Tabelle ausgeführt und erhält alle ihre Argumente: filter_provider ist bei Variationen woot_variations, und filter_data['product_id'] enthält das Produkt. Ältere Snippets verwendeten woot_review_shortcode_args, das jede [woot]-Tabelle der Website filtert; verwenden Sie stattdessen den dafür vorgesehenen Hook. Alle Snippets unten gehören in die functions.php eines Child-Themes oder in ein Code-Snippets-Plugin.

Spalten des Variationen-Popups anpassen

Öffnen Sie WOOT → Einstellungen (Settings), suchen Sie Spalten der Variationen (Variations columns) und wählen Sie die gewünschten Felder aus; halten Sie ein ausgewähltes Feld gedrückt, um es an eine andere Position zu ziehen. Die Liste gilt für jedes Variationen-Popup und für jeden Shortcode [woot_variations] ohne eigene Spalten. Die Schaltfläche Alle möglichen Spaltenschlüssel (All possible columns keys) unter der Einstellungstabelle listet den Schlüssel jedes Feldes auf.

Eine auf einer Seite platzierte Variationentabelle kann eigene Spalten haben: [woot_variations id=49 columns='thumbnail,pa_size,pa_color,price,add_to_cart'], wobei id die Produkt-ID ist. Auf einer einzelnen Produktseite kann die ID entfallen, dann wird das aktuelle Produkt verwendet; siehe So fügen Sie Shortcodes in die einzelne Produktseite ein.

Zwei Details sparen Zeit. Attributspalten wie pa_size zeigen den Wert jeder Variation, und auch der Titel erhält die Attributwerte, jedoch nur bei globalen Attributen, die unter Produkte → Attribute angelegt wurden. Werte benutzerdefinierter Attribute, die direkt in ein Produkt eingegeben wurden, erscheinen weder im Titel noch als Spalte. Außerdem ist die Standardüberschrift einer Attributspalte der WooCommerce-Taxonomiename, etwa Product Size; benennen Sie sie mit dem Vokabular um.

Zeilen pro Seite und Seitennavigation

Auf einer Seite verwenden Sie das Attribut per_page: [woot_variations id=49 per_page=4], oder per_page=-1, um alle Variationen ohne Seitennavigation anzuzeigen. Für das Popup legen Sie dieselben Argumente im Hook fest:

add_filter('woot_vurgc_shortcode_data', function ($args) {
    if (isset($args['filter_provider']) && $args['filter_provider'] === 'woot_variations') {
        $args['per_page'] = 20;           // -1 shows all variations
        $args['per_page_position'] = 'b'; // pagination: t, b, tb or none
    }
    return $args;
});

Sortierreihenfolge ändern: nach ID, nach Preis, wie im Produkteditor

Das Popup sortiert die Zeilen im Browser nach dem Inhalt einer Zelle. Das Sortieren nach ID funktioniert direkt, weil die ID-Zelle eine einfache Zahl enthält:

add_filter('woot_vurgc_shortcode_data', function ($args) {
    if (isset($args['filter_provider']) && $args['filter_provider'] === 'woot_variations') {
        $args['orderby'] = 'id';
        $args['order'] = 'asc';
    }
    return $args;
});

Die ID-Spalte muss dafür zu den Spalten der Variationen (Variations columns) gehören, da die Zeilen nur die ausgewählten Felder enthalten; um sie nicht sichtbar zu machen, entfernen Sie sie im selben Hook aus $args['columns'], wie es das nächste Beispiel mit seiner Hilfsspalte tut. Das Sortieren nach der Spalte Preis (Price) liefert nicht das erwartete Ergebnis: Die Preiszelle enthält formatiertes HTML mit dem Währungssymbol, die Werte werden daher als Text verglichen, und 105 landet vor 12 und 12 vor 9. Zuverlässig ist eine Hilfsspalte mit der reinen Zahl, die zum Sortieren dient und verborgen bleibt:

// 1. A helper column with the price as a plain number
add_filter('woot_profile_extend', function ($profile, $action_name) {
    if ($action_name === 'woot_woocommerce_tables') {
        $profile['sort_price'] = [
            'title'   => 'Sort: price',
            'display' => false, // not offered in the Columns tab of regular tables
            'action'  => function ($post_id) {
                $product = WOOT_WooCommerce::get_product($post_id);
                return is_object($product) ? (float) $product->get_price() : 0;
            },
        ];
    }
    return $profile;
}, 10, 2);

// 2. Sort the popup by it and hide the helper column
add_filter('woot_vurgc_shortcode_data', function ($args) {
    if (isset($args['filter_provider']) && $args['filter_provider'] === 'woot_variations') {
        $args['orderby'] = 'sort_price';
        $args['order'] = 'asc'; // 'desc' puts the most expensive first
        $args['columns'] = implode(',', array_diff(explode(',', $args['columns']), ['sort_price']));
    }
    return $args;
});

Nachdem Sie den Code hinzugefügt haben, nehmen Sie Sort: price in den Einstellungen unter Spalten der Variationen (Variations columns) auf, sonst enthalten die Zeilen die Zahl nicht. Für die Reihenfolge, die Sie im Produkteditor durch Ziehen der Variationen festlegen, verwenden Sie dasselbe Muster mit einer Hilfsspalte, die (int) get_post_field('menu_order', $post_id) zurückgibt.

Eigene Felder der Variation und Daten des übergeordneten Produkts anzeigen

Felder, die in der Registerkarte Meta hinzugefügt werden, gehören zu einer einzelnen Tabelle, und das Popup hat keine Tabellen-ID, daher erscheinen sie nie unter Spalten der Variationen (Variations columns). Registrieren Sie den Meta-Schlüssel stattdessen für alle Tabellen, wie in So fügen Sie einen Meta-Schlüssel global zu allen Shortcodes hinzu beschrieben:

add_filter('woot_profile_extend', function ($profile, $action_name) {
    if ($action_name === 'woot_woocommerce_tables') {
        $meta_key = 'msrp'; // the meta key of your variation field
        $profile[$meta_key] = woot()->columns->meta->assemble_meta_for_system([
            'title'     => WOOT_Vocabulary::get('MSRP'),
            'meta_key'  => $meta_key,
            'meta_type' => 'text', // text, number or calendar
        ]);
    }
    return $profile;
}, 10, 2);

Die neue Spalte erscheint unter Spalten der Variationen (Variations columns). Im Popup liest jede Zeile das Feld von der Variation selbst, sodass ein pro Variation gespeichertes Feld in jeder Zeile seinen eigenen Wert zeigt.

Daten des übergeordneten Produkts funktionieren genauso, denn eine benutzerdefinierte Spalte erhält die ID der Variation in der jeweiligen Zeile. Die eingebaute Spalte Vorschaubild (Thumbnail) zeigt nur das eigene Bild der Variation; diese Spalte zeigt das Bild der Variation oder, wenn die Variation keines hat, das Produktbild, da WooCommerce bei Variationen auf das Bild des übergeordneten Produkts zurückgreift:

add_filter('woot_profile_extend', function ($profile, $action_name) {
    if ($action_name === 'woot_woocommerce_tables') {
        $profile['image_or_parent'] = [
            'title'  => WOOT_Vocabulary::get('Image'),
            'action' => function ($post_id) {
                $product = WOOT_WooCommerce::get_product($post_id);
                $image_id = is_object($product) ? $product->get_image_id() : 0;
                $src = $image_id ? wp_get_attachment_image_src($image_id, 'thumbnail') : false;
                return $src ? WOOT_HELPER::draw_html_item('img', ['src' => $src[0], 'width' => 60, 'alt' => '']) : '';
            },
        ];
    }
    return $profile;
}, 10, 2);

Für alles andere vom übergeordneten Produkt liefert $product->get_parent_id() dessen ID.

Unterschiedliche Spalten für unterschiedliche Benutzerrollen

Der Hook läuft bei jeder Popup-Anfrage und kann daher prüfen, wer gerade zuschaut. Diese Version blendet die Spalten SKU und Lagerbestand für alle außer einer Rolle aus:

add_filter('woot_vurgc_shortcode_data', function ($args) {
    if (isset($args['filter_provider']) && $args['filter_provider'] === 'woot_variations') {
        $user = wp_get_current_user();
        if (!in_array('wholesale_customer', (array) $user->roles, true)) { // your role slug
            $args['columns'] = implode(',', array_diff(explode(',', $args['columns']), ['sku', 'stock_quantity']));
        }
    }
    return $args;
});

Eine Regel gilt: Die Zeilen werden vor der Ausführung des Hooks aus den in den Einstellungen ausgewählten Feldern vorbereitet. Wählen Sie daher unter Spalten der Variationen (Variations columns) jede Spalte aus, die irgendeine Rolle sehen darf, in der richtigen Reihenfolge, und entfernen Sie Spalten nur im Hook. Eine im Hook hinzugefügte Spalte bliebe leer, und eine umsortierte Liste würde die Überschriften über die falschen Zellen setzen.

„In den Warenkorb“ und Gestaltung

Jede Zeile hat ein eigenes Mengenfeld und eine eigene Schaltfläche In den Warenkorb (Add to cart). Eine Variation ohne Preis oder ohne Lagerbestand erhält keine Schaltfläche: WooCommerce hält sie nicht für kaufbar, und die Tabelle folgt dem. Ein Preis von 0 ist ein gültiger Preis, die Schaltfläche bleibt also. So verhindern Sie, dass Variationen mit dem Preis null irgendwo im Shop gekauft werden können, einschließlich im Popup:

add_filter('woocommerce_variation_is_purchasable', function ($purchasable, $variation) {
    if ((float) $variation->get_price() <= 0) {
        return false;
    }
    return $purchasable;
}, 10, 2);

Für die Gestaltung hat eine auf einer Seite platzierte Variationentabelle dieselbe Struktur und dieselben Klassen wie jede andere Tabelle, dazu die Klasse woot_variations_columns. Popup-Tabellen liegen innerhalb von .woot-content-in-popup. Jede Zelle hat die Klasse table23_td_ plus den Feldschlüssel, und jede Überschrift hat ein Attribut data-key. Die Registerkarte Eigenes CSS (Custom CSS) einer Tabelle erreicht Popups nicht, da sie keine Tabellen-ID haben; legen Sie die Regeln daher in das Feld für eigenes CSS Ihres Themes:

/* Variations table on a page */
.woot_variations_columns .table23_td_price {
    font-weight: 600;
}

/* Tables in popups: variations, upsells, grouped */
.woot-content-in-popup th[data-key="stock_quantity"],
.woot-content-in-popup .table23_td_stock_quantity {
    text-align: center;
}

Das Popup wird bei jedem Öffnen vom Server angefordert, sodass Änderungen in den Einstellungen und im Code beim nächsten Klick eines Besuchers auf die Schaltfläche sichtbar werden. Fragen zu einer bestimmten Konfiguration sind im WOOT-Supportforum willkommen.