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

WooCommerce bietet standardmäßig drei Tabs auf Produktseiten: Beschreibung, Zusätzliche Informationen und Bewertungen. Doch in vielen Fällen benötigen Shop-Betreiber individuelle Tabs, um z. B. Größentabellen, technische Daten oder spezifische Produktdetails anzuzeigen.

In diesem Beitrag zeige ich Ihnen, wie Sie ein benutzerdefiniertes Tab in WooCommerce-Produktseiten einfügen – ohne Plugins, nur mit PHP-Code!

Voraussetzungen

Bevor wir loslegen, stellen Sie sicher, dass Sie folgende Dinge haben:

• Eine WordPress-Website mit installiertem WooCommerce
• Zugriff auf das Theme oder ein eigenes Plugin für Anpassungen
• Grundkenntnisse in PHP

Standard-Tabs in WooCommerce verstehen

WooCommerce nutzt die Aktion woocommerce_product_tabs, um Produkt-Tabs zu verwalten. Die drei Standard-Tabs sind:

• Beschreibung (description_tab)
• Zusätzliche Informationen (additional_information_tab)
• Bewertungen (reviews_tab)

Mit einem Filter-Hook können wir neue Tabs hinzufügen oder bestehende entfernen.

Eigenes Tab in WooCommerce hinzufügen

Um ein benutzerdefiniertes Tab zu erstellen, fügen Sie folgenden Code in die functions.php Ihres Child-Themes oder in ein eigenes Plugin ein:

PHP-Code für ein benutzerdefiniertes 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 neuen Tab mit dem Titel „Zusätzliche Infos“ hinzu
• Legt die Priorität auf 50, damit er zwischen den bestehenden Tabs erscheint
• Nutzt eine Callback-Funktion, um Inhalte anzuzeigen

Dynamische Inhalte im Tab anzeigen

Statt statischen Text einzufügen, können wir benutzerdefinierte Daten pro Produkt speichern und abrufen.

Code: Dynamischen Inhalt aus der Produkt-Metabox abrufen

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 benutzerdefinierten Feld geladen. Fehlt eine Eingabe, bleibt der Tab leer.

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

Damit Shop-Betreiber den Inhalt einfach verwalten können, erweitern wir das WooCommerce-Adminpanel mit einem neuen Feld.

PHP-Code für ein Eingabefeld im Produkt-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 Eingabefeld im WooCommerce-Produktbereich. Admin kann individuelle Daten je Produkt hinterlegen

Speichern der Admin-Eingabe in der Datenbank

Nun sorgen wir dafür, dass die Daten gespeichert werden:

PHP-Code zum Speichern des Feldinhalts:

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? Dieser Code speichert die Benutzereingabe in der Datenbank

Optisches Feintuning mit CSS

Damit unser Tab professionell aussieht, können wir ihn per CSS stylen.

Beispiel: Tab-Überschrift farblich anpassen

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

Fazit

Mit nur wenigen Zeilen PHP-Code konnten wir ein benutzerdefiniertes WooCommerce-Tab hinzufügen.

• Neuer Tab mit Titel und individuellen Inhalten
• Dynamische Inhalte für jedes Produkt individuell hinterlegen
• Einfach über das Admin-Panel verwalten

Haben Sie Fragen oder Anregungen? Schreiben Sie gerne in die Kommentare!