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

Um benut­zer­de­fi­nier­te Meta­da­ten (Cus­tom Meta Data) in Woo­Com­mer­ce zu spei­chern und in einem neu­en Tab anzu­zei­gen, musst du zusätz­lich die Woo­­Com­­mer­ce-Fun­k­­tio­na­­li­­tä­­ten erwei­tern, um benut­zer­de­fi­nier­te Fel­der in das Backend-Pro­­duk­t­­for­­mu­lar hin­zu­zu­fü­gen und die­se Daten dann im Front­end, also im neu­en Tab, anzu­zei­gen.

Hier ist eine erwei­ter­te Anlei­tung, wie du benut­zer­de­fi­nier­te Meta­da­ten in Woo­Com­mer­ce spei­cherst und in einem neu­en Tab anzeigst.

Vorbereitung #

Bevor du mit den Ände­run­gen beginnst, stel­le sicher, dass du fol­gen­de Din­ge beach­test:

• Siche­rung der Web­sei­te: Bevor du Ände­run­gen an der Funk­tio­na­li­tät dei­ner Web­sei­te vor­nimmst, soll­test du eine Siche­rung dei­ner Word­­Press-Instal­la­­ti­on und der Daten­bank erstel­len.
• Child The­me ver­wen­den: Um Updates dei­nes The­mes zu über­ste­hen, füge den neu­en Code in die functions.php dei­nes Child The­mes ein, nicht in das Haupt­the­me.

Benutzerdefinierte Felder im Backend hinzufügen #

Um benut­zer­de­fi­nier­te Fel­der hin­zu­zu­fü­gen, kannst du den woocommerce_product_data_panels-Hook ver­wen­den, der die Pro­dukt­da­ten im Admin-Bereich steu­ert. Du kannst den Code in die functions.php dei­nes Child-The­­mes ein­fü­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 sicher­stel­len, dass die Daten, die im Pro­dukt­for­mu­lar ein­ge­ge­ben wer­den, auch gespei­chert wer­den. Dafür kannst du den woocommerce_process_product_meta-Hook ver­wen­den.

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 gespei­cher­ten Meta­da­ten in dei­nem neu­en Tab anzu­zei­gen, pas­se den Inhalt des neu­en Tabs an. Hier wird die gespei­cher­te benut­zer­de­fi­nier­te Meta-Infor­­ma­­ti­on abge­ru­fen und ange­zeigt.

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-Fel­­der hin­zu­fü­gen:
  • Mit woocommerce_product_options_general_product_data fügst du neue Ein­ga­be­fel­der in die Pro­dukt­da­ten ein.
  • woocommerce_wp_text_input erstellt ein Text­feld im Pro­dukt­for­mu­lar, wo du zusätz­li­che Infor­ma­tio­nen ein­ge­ben kannst.
• Spei­chern der Daten:
  • Der Hook woocommerce_process_product_meta wird ver­wen­det, um die Ein­ga­ben im Backend zu spei­chern. Die Funk­ti­on update_post_meta spei­chert die benut­zer­de­fi­nier­te Meta-Infor­­ma­­ti­on in der Daten­bank.
• Fron­t­end-Anzei­­ge:
  • Der Hook woocommerce_product_tabs fügt den neu­en Tab hin­zu.
  • Die Funk­ti­on benutzerdefinierter_tab_inhalt liest die gespei­cher­ten Meta­da­ten mit­hil­fe von get_post_meta aus und zeigt die­se im Fron­t­end-Tab an.

Benutzerdefinierte Metadaten bearbeiten

Wenn du spä­ter wei­te­re benut­zer­de­fi­nier­te Fel­der hin­zu­fü­gen möch­test, kannst du die­se auf ähn­li­che Wei­se hin­zu­fü­gen. Je nach Bedarf kannst du auch Text­be­rei­che, Check­bo­xen oder ande­re Ein­ga­be­fel­der ver­wen­den, um noch mehr benut­zer­de­fi­nier­te Infor­ma­tio­nen zu Pro­duk­ten hin­zu­zu­fü­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') 
    )
);

Ver­giss nicht, auch den Spei­cher­me­cha­nis­mus anzu­pas­sen, um die­se neu­en Fel­der zu spei­chern.

Fazit #

Mit die­ser Anlei­tung kannst du nicht nur einen neu­en Tab in Woo­Com­mer­ce hin­zu­fü­gen, son­dern auch benut­zer­de­fi­nier­te Meta­da­ten spei­chern und im neu­en Tab anzei­gen las­sen. Dies gibt dir mehr Fle­xi­bi­li­tät bei der Dar­stel­lung von Pro­dukt­in­for­ma­tio­nen und ermög­licht es dir, dein Woo­­Com­­mer­ce-Pro­­duk­t­­for­­mu­lar zu erwei­tern, um zusätz­li­che Daten zu spei­chern.

Die Lösung ist ska­lier­bar, sodass du nach Belie­ben wei­te­re Fel­der hin­zu­fü­gen kannst, um den Bedürf­nis­sen dei­nes Online­shops gerecht zu wer­den.