WooCommerce: So fügt man einen neuen Tab bei den Produkt-Daten ein

Um benutzerdefinierte Metadaten (Custom Meta Data) in WooCommerce zu speichern und in einem neuen Tab anzuzeigen, musst du zusätzlich die WooCommerce-Funktionalitäten erweitern, um benutzerdefinierte Felder in das Backend-Produktformular hinzuzufügen und diese Daten dann im Frontend, also im neuen Tab, anzuzeigen.

Hier ist eine erweiterte Anleitung, wie du benutzerdefinierte Metadaten in WooCommerce speicherst und in einem neuen Tab anzeigst.

Vorbereitung

Bevor du mit den Änderungen beginnst, stelle sicher, dass du folgende Dinge beachtest:

• Sicherung der Webseite: Bevor du Änderungen an der Funktionalität deiner Webseite vornimmst, solltest du eine Sicherung deiner WordPress-Installation und der Datenbank erstellen.
• Child Theme verwenden: Um Updates deines Themes zu überstehen, füge den neuen Code in die functions.php deines Child Themes ein, nicht in das Haupttheme.

Benutzerdefinierte Felder im Backend hinzufügen

Um benutzerdefinierte Felder hinzuzufügen, kannst du den woocommerce_product_data_panels-Hook verwenden, der die Produktdaten im Admin-Bereich steuert. Du kannst den Code in die functions.php deines Child-Themes einfügen.

Code zum Hinzufügen eines benutzerdefinierten Feldes im Backend:

// Benutzerdefinierte Felder zum Produkt-Backend hinzufügen
add_action('woocommerce_product_options_general_product_data', 'benutzerdefinierte_felder_woocommerce');

function benutzerdefinierte_felder_woocommerce() {
    global $woocommerce, $post;
    
    echo '<div class="options_group">';
    
    // Textfeld für zusätzliche Informationen
    woocommerce_wp_text_input( 
        array( 
            'id'          => '_zusatzliche_informationen', 
            'label'       => __('Zusätzliche Informationen', 'textdomain'), 
            'placeholder' => 'Trage hier die zusätzlichen Informationen ein',
            'desc_tip'    => 'true',
            'description' => __('Füge zusätzliche Produktinformationen hinzu, die im benutzerdefinierten Tab angezeigt werden sollen.', 'textdomain')
        )
    );
    
    echo '</div>';
}

Speichern der benutzerdefinierten Felder

Nun musst du sicherstellen, dass die Daten, die im Produktformular eingegeben werden, auch gespeichert werden. Dafür kannst du den woocommerce_process_product_meta-Hook verwenden.

Code zum Speichern der benutzerdefinierten Metadaten:

// Benutzerdefinierte Felder speichern
add_action('woocommerce_process_product_meta', 'benutzerdefinierte_felder_speichern');

function benutzerdefinierte_felder_speichern($post_id) {
    // Überprüfen und speichern der zusätzlichen Informationen
    $zusatzliche_informationen = isset($_POST['_zusatzliche_informationen']) ? sanitize_text_field($_POST['_zusatzliche_informationen']) : '';
    update_post_meta($post_id, '_zusatzliche_informationen', esc_attr($zusatzliche_informationen));
}

Benutzerdefinierte Metadaten im neuen Tab anzeigen

Um die gespeicherten Metadaten in deinem neuen Tab anzuzeigen, passe den Inhalt des neuen Tabs an. Hier wird die gespeicherte benutzerdefinierte Meta-Information abgerufen und angezeigt.

Code zur Anzeige der benutzerdefinierten Metadaten im neuen Tab:

// Neuen Tab hinzufügen
add_filter('woocommerce_product_tabs', 'benutzerdefinierter_woocommerce_tab');

function benutzerdefinierter_woocommerce_tab($tabs) {
    // Tab hinzufügen
    $tabs['benutzerdefinierter_tab'] = array(
        'title'    => __('Zusätzliche Informationen', 'textdomain'),
        'priority' => 50, // Position des Tabs
        'callback' => 'benutzerdefinierter_tab_inhalt'
    );

    return $tabs;
}

// Inhalt des neuen Tabs definieren
function benutzerdefinierter_tab_inhalt() {
    global $post;

    // Abrufen der benutzerdefinierten Metadaten
    $zusatzliche_informationen = get_post_meta($post->ID, '_zusatzliche_informationen', true);

    // Tab-Inhalt ausgeben
    if (!empty($zusatzliche_informationen)) {
        echo '<h2>' . __('Zusätzliche Informationen', 'textdomain') . '</h2>';
        echo '<p>' . esc_html($zusatzliche_informationen) . '</p>';
    } else {
        echo '<p>' . __('Es gibt keine zusätzlichen Informationen für dieses Produkt.', 'textdomain') . '</p>';
    }
}

Code-Erklärung

• Backend-Felder hinzufügen:
  • Mit woocommerce_product_options_general_product_data fügst du neue Eingabefelder in die Produktdaten ein.
  • woocommerce_wp_text_input erstellt ein Textfeld im Produktformular, wo du zusätzliche Informationen eingeben kannst.
• Speichern der Daten:
  • Der Hook woocommerce_process_product_meta wird verwendet, um die Eingaben im Backend zu speichern. Die Funktion update_post_meta speichert die benutzerdefinierte Meta-Information in der Datenbank.
• Frontend-Anzeige:
  • Der Hook woocommerce_product_tabs fügt den neuen Tab hinzu.
  • Die Funktion benutzerdefinierter_tab_inhalt liest die gespeicherten Metadaten mithilfe von get_post_meta aus und zeigt diese im Frontend-Tab an.

Benutzerdefinierte Metadaten bearbeiten

Wenn du später weitere benutzerdefinierte Felder hinzufügen möchtest, kannst du diese auf ähnliche Weise hinzufügen. Je nach Bedarf kannst du auch Textbereiche, Checkboxen oder andere Eingabefelder verwenden, um noch mehr benutzerdefinierte Informationen zu Produkten hinzuzufügen.

Beispiel für ein weiteres Feld (Checkbox):

// Checkbox für benutzerdefinierte Option hinzufügen
woocommerce_wp_checkbox( 
    array( 
        'id'            => '_besonderes_angebot', 
        'label'         => __('Besonderes Angebot', 'textdomain'), 
        'description'   => __('Markiere dieses Produkt als besonderes Angebot.', 'textdomain') 
    )
);

Vergiss nicht, auch den Speichermechanismus anzupassen, um diese neuen Felder zu speichern.

Fazit

Mit dieser Anleitung kannst du nicht nur einen neuen Tab in WooCommerce hinzufügen, sondern auch benutzerdefinierte Metadaten speichern und im neuen Tab anzeigen lassen. Dies gibt dir mehr Flexibilität bei der Darstellung von Produktinformationen und ermöglicht es dir, dein WooCommerce-Produktformular zu erweitern, um zusätzliche Daten zu speichern.

Die Lösung ist skalierbar, sodass du nach Belieben weitere Felder hinzufügen kannst, um den Bedürfnissen deines Onlineshops gerecht zu werden.