WooCommerce: Benutzerdefiniertes Tab auf Produktseiten hinzufügen (mit Code-Beispielen)

Woo­Com­mer­ce bie­tet stan­dard­mä­ßig drei Tabs auf Pro­dukt­sei­ten: Beschrei­bung, Zusätz­li­che Infor­ma­tio­nen und Bewer­tun­gen. Doch in vie­len Fäl­len benö­ti­gen Shop-Betrei­­ber indi­vi­du­el­le Tabs, um z. B. Grö­ßen­ta­bel­len, tech­ni­sche Daten oder spe­zi­fi­sche Pro­dukt­de­tails anzu­zei­gen.

In die­sem Bei­trag zei­ge ich Ihnen, wie Sie ein benut­zer­de­fi­nier­tes Tab in Woo­­Com­­mer­ce-Pro­­duk­t­­sei­­ten ein­fü­gen – ohne Plug­ins, nur mit PHP-Code!

Voraussetzungen #

Bevor wir los­le­gen, stel­len Sie sicher, dass Sie fol­gen­de Din­ge haben:

• Eine Word­­Press-Web­­si­te mit instal­lier­tem Woo­Com­mer­ce
• Zugriff auf das The­me oder ein eige­nes Plug­in für Anpas­sun­gen
• Grund­kennt­nis­se in PHP

Standard-Tabs in WooCommerce verstehen #

Woo­Com­mer­ce nutzt die Akti­on woocommerce_product_tabs, um Pro­­dukt-Tabs zu ver­wal­ten. Die drei Stan­­dard-Tabs sind:

• Beschrei­bung (description_tab)
• Zusätz­li­che Infor­ma­tio­nen (additional_information_tab)
• Bewer­tun­gen (reviews_tab)

Mit einem Fil­­ter-Hook kön­nen wir neue Tabs hin­zu­fü­gen oder bestehen­de ent­fer­nen.

Eigenes Tab in WooCommerce hinzufügen #

Um ein benut­zer­de­fi­nier­tes Tab zu erstel­len, fügen Sie fol­gen­den Code in die functions.php Ihres Child-The­­mes oder in ein eige­nes Plug­in ein:

PHP-Code für ein benut­zer­de­fi­nier­tes Tab:

function custom_product_tab($tabs) {
    $tabs['custom_tab'] = array(
        'title'    => __('Zusätzliche Infos', 'textdomain'),
        'priority' => 50,
        'callback' => 'custom_product_tab_content'
    );
    return $tabs;
}
add_filter('woocommerce_product_tabs', 'custom_product_tab');

function custom_product_tab_content() {
    echo '<h2>Zusätzliche Informationen</h2>';
    echo '<p>Hier stehen zusätzliche Produktdetails.</p>';
}

💡 Was macht der Code?

• Fügt einen neu­en Tab mit dem Titel „Zusätz­li­che Infos“ hin­zu
• Legt die Prio­ri­tät auf 50, damit er zwi­schen den bestehen­den Tabs erscheint
• Nutzt eine Cal­l­­back-Fun­k­­ti­on, um Inhal­te anzu­zei­gen

Dynamische Inhalte im Tab anzeigen

Statt sta­ti­schen Text ein­zu­fü­gen, kön­nen wir benut­zer­de­fi­nier­te Daten pro Pro­dukt spei­chern und abru­fen.

Code: Dyna­mi­schen Inhalt aus der Pro­­dukt-Meta­­box abru­fen

function custom_product_tab_content() {
    global $post;
    $custom_text = get_post_meta($post->ID, '_custom_product_tab_content', true);
    if ($custom_text) {
        echo '<h2>Zusätzliche Informationen</h2>';
        echo '<p>' . esc_html($custom_text) . '</p>';
    }
}

💡 Was macht der Code? Hier wird der Inhalt aus einem benut­zer­de­fi­nier­ten Feld gela­den. Fehlt eine Ein­ga­be, bleibt der Tab leer.

Backend-Eingabe für den individuellen Tab hinzufügen

Damit Shop-Betrei­­ber den Inhalt ein­fach ver­wal­ten kön­nen, erwei­tern wir das Woo­­Com­­mer­ce-Admin­­pa­­nel mit einem neu­en Feld.

PHP-Code für ein Ein­ga­be­feld im Pro­­dukt-Backend:

add_action('woocommerce_product_options_general_product_data', 'custom_product_admin_field');

function custom_product_admin_field() {
    woocommerce_wp_text_input(array(
        'id'          => '_custom_product_tab_content',
        'label'       => __('Zusätzliche Infos', 'textdomain'),
        'placeholder' => 'Geben Sie die Zusatzinfos hier ein',
        'desc_tip'    => true,
        'description' => __('Diese Informationen erscheinen im zusätzlichen Tab.', 'textdomain'),
    ));
}

💡 Was macht der Code? Erstellt ein Ein­ga­be­feld im Woo­­Com­­mer­ce-Pro­­duk­t­­be­­reich. Admin kann indi­vi­du­el­le Daten je Pro­dukt hin­ter­le­gen

Speichern der Admin-Eingabe in der Datenbank

Nun sor­gen wir dafür, dass die Daten gespei­chert wer­den:

PHP-Code zum Spei­chern des Feld­in­halts:

add_action('woocommerce_process_product_meta', 'save_custom_product_admin_field');

function save_custom_product_admin_field($post_id) {
    $custom_text = isset($_POST['_custom_product_tab_content']) ? sanitize_text_field($_POST['_custom_product_tab_content']) : '';
    update_post_meta($post_id, '_custom_product_tab_content', $custom_text);
}

💡 Was macht der Code? Die­ser Code spei­chert die Benut­zer­ein­ga­be in der Daten­bank

Optisches Feintuning mit CSS

Damit unser Tab pro­fes­sio­nell aus­sieht, kön­nen wir ihn per CSS sty­len.

Bei­spiel: Tab-Über­­­schrift farb­lich anpas­sen

.woocommerce-Tabs-panel h2 {
    color: #0071a1;
    font-size: 20px;
}

Fazit #

Mit nur weni­gen Zei­len PHP-Code konn­ten wir ein benut­zer­de­fi­nier­tes Woo­­Com­­mer­ce-Tab hin­zu­fü­gen.

• Neu­er Tab mit Titel und indi­vi­du­el­len Inhal­ten
• Dyna­mi­sche Inhal­te für jedes Pro­dukt indi­vi­du­ell hin­ter­le­gen
• Ein­fach über das Admin-Panel ver­wal­ten

Haben Sie Fra­gen oder Anre­gun­gen? Schrei­ben Sie ger­ne in die Kom­men­ta­re!