Wie fügt man benutzerdefinierte Felder und Metadaten zu den Produktseiten von WooCommerce hinzu?

Beim Aufbau eines professionellen WooCommerce-Shops reichen die standardmäßigen Produktseitenfelder oft nicht aus, um alle Geschäftsanforderungen zu erfüllen. Zum Beispiel könnten Sie für Elektronikprodukte Felder wie “Modell” oder “Garantiezeit” benötigen oder für Kleidung Felder wie “Stoffzusammensetzung” oder “Waschhinweise”. In solchen Fällen ist es von großer Bedeutung, benutzerdefinierte Felder und Metadaten für die Produkte hinzuzufügen. Dies ermöglicht nicht nur eine umfassendere Darstellung der Produktinformationen und eine bessere Benutzererfahrung, sondern liefert auch eine Datenbasis für spätere Suchfunktionen, Filter sowie die Entwicklung weiterer fortgeschrittener Funktionen.

Dieser Artikel wird detailliert erklären, wie in WooCommerce benutzerdefinierte Produktfelder implementiert werden können – von den grundlegendsten Code-Änderungen bis hin zum Einsatz von fortgeschrittenen Plugins – und enthält vollständige, funktionierende Codebeispiele.

Mithilfe der eingebauten Aktionshaken (Action Hooks) von WooCommerce können neue Felder hinzugefügt werden.

WooCommerce bietet eine Vielzahl von Action Hooks, die es Entwicklern ermöglichen, Inhalt an bestimmten Stellen im Produktdatenpanel einzufügen. Dies ist die direkteste Methode und zugleich die mit der geringsten Einflussnahme auf das native System.

Empfohlene Lektüre Einführende bis fortgeschrittene Anwendungen mit benutzerdefinierten Feldern in WordPress – eine detaillierte Analyse。

Die am häufigsten verwendeten „Hooks“ sind… woocommerce_product_options_general_product_dataEs wird verwendet, um Felder im Abschnitt “Herkömmliche Produktdaten” hinzuzufügen.

UltaHost – WordPress-Hosting-Anbieter

30-tägige Geld-zurück-Garantie, unbegrenztes Bandbreiten- und Datenbankvolumen, kostenlose DDoS-Schutzmaßnahmen sowie ein Rabatt von 501 auf 4 Terabyte bei einer Kaufdauer von 3 Jahren.

Zugangsseite

Felder zum Hinzufügen in das reguläre Produktdatenpanel

Der folgende Code zeigt, wie man in die allgemeinen Datenspannen für “Einfache Produkte” und “Variablen Produkte” ein Textfeld sowie ein Dropdown-Selektionsfeld hinzufügt.

add_action( 'woocommerce_product_options_general_product_data', 'add_custom_general_fields' );
function add_custom_general_fields() {
    global $post;

echo '<div class="options_group">'\n';

// Beispiel für ein Textfeld: Produktmodell
    woocommerce_wp_text_input(
        array(
            'id' =&gt; '_product_model',
            'label' =&gt; __( 'Produktmodell', 'woocommerce' ),
            'placeholder' =&gt; 'Zum Beispiel: X-2024Pro',
            'desc_tip' =&gt; 'true',
            'description' =&gt; __( 'Bitte geben Sie das spezifische Modell dieses Produkts ein.', 'woocommerce' ),
        )
    );

// Beispiel für ein Auswahlfeld: Garantiedauer
    woocommerce_wp_select(
        array(
            'id' =&gt; '_warranty_period',
            'label' =&gt; __( 'Garantiedauer', 'woocommerce' ),
            'options' =&gt; array(
                '' =&gt; __( 'Bitte wählen Sie...', 'woocommerce' ),
                '1year' =&gt; __( 'Ein Jahr', 'woocommerce' ),
                '2years' =&gt; __( 'Zwei Jahre', 'woocommerce' ),
                'lifetime' =&gt; __( 'Lebenslange Garantie', 'woocommerce' ),
            ),
            'desc_tip' =&gt; 'true',
            'description' =&gt; __( 'Bitte wählen Sie die Garantiedauer für dieses Produkt aus.', 'woocommerce' ),
        )
    );

echo ' </div>';

?&gt;'</div>';
}

Die Werte der benutzerdefinierten Felder speichern.

Es reicht nicht aus, die Felder nur im Hintergrund anzuzeigen; die von den Benutzern eingegebenen Werte müssen auch in die Metadaten des Produkts gespeichert werden. Dafür ist… woocommerce_process_product_meta Dieser Speicher-Haken.

add_action( 'woocommerce_process_product_meta', 'save_custom_general_fields' );
function save_custom_general_fields( $post_id ) {
    // 保存产品型号字段
    $product_model = isset( $_POST['_product_model'] ) ? sanitize_text_field( $_POST['_product_model'] ) : '';
    update_post_meta( $post_id, '_product_model', $product_model );

// 保存保修期字段
    $warranty_period = isset( $_POST['_warranty_period'] ) ? sanitize_text_field( $_POST['_warranty_period'] ) : '';
    update_post_meta( $post_id, '_warranty_period', $warranty_period );
}

Benutzerdefinierte Felder werden auf der Frontend-Produktseite angezeigt.

Das endgültige Ziel ist es, die gespeicherten Feldwerte auf der Benutzeroberfläche des Produkts anzuzeigen. Dies können wir erreichen, indem wir… woocommerce_product_additional_information oder woocommerce_single_product_summary Warten Sie auf die passenden „Hook-Funktionen“, um die Daten nach der Produktbeschreibung oder auf der Tag-Seite auszugeben.

In der Registerkarte “Zusätzliche Informationen” anzeigen.

Der folgende Code fügt benannte Felder zur standardmäßigen “Zusätzlichen Informationen”-Seite von WooCommerce hinzu.

Empfohlene Lektüre Detaillierte Analyse von WooCommerce: Ein umfassender Leitfaden zum Aufbau hochleistungsfähiger E-Commerce-Websites。

add_action( 'woocommerce_product_additional_information', 'display_custom_fields_on_product_page' );
function display_custom_fields_on_product_page() {
    global $product;

$product_model = get_post_meta( $product->get_id(), '_product_model', true );
    $warranty_period = get_post_meta( $product->get_id(), '_warranty_period', true );

if ( $product_model ) {
        echo '<div class="product-model"><strong>' . esc_html__( '产品型号：', 'woocommerce' ) . '</strong>'`. esc_html($product_model).`'</div>';
    }

if ( $warranty_period ) {
        // 将存储的值转换为可读的标签
        $warranty_options = array(
            '1year'    =&gt; __( '一年', 'woocommerce' ),
            '2years'   =&gt; __( '两年', 'woocommerce' ),
            'lifetime' =&gt; __( '终身保修', 'woocommerce' ),
        );
        $warranty_label = isset( $warranty_options[ $warranty_period ] ) ? $warranty_options[ $warranty_period ] : $warranty_period;
        echo '<div class="warranty-period"><strong>' . esc_html__( '保修期：', 'woocommerce' ) . '</strong>'. esc_html($warranty_label)'. ‘</div>';
    }
}

Verwenden Sie das Plugin für fortgeschrittene benutzerdefinierte Felder zur visuellen Konfiguration.

Für Benutzer, die sich mit Code wenig auskennen, oder bei der Verwendung komplexer Feldtypen wie Bildern, Beziehungsauswahlen oder Wiederholern, ist die Verwendung von Plugins die effizientere Option.Advanced Custom Fields Dies ist die Branchenstandards in diesem Bereich.

Erstellen Sie eine Feldgruppe und verknüpfen Sie diese mit dem Produkt.

Nach der Installation und Aktivierung des ACF-Plugins können Sie im WordPress-Backend auf einfache Weise Feldgruppen erstellen. Zum Beispiel können Sie eine Feldgruppe mit dem Namen “Produktspezifikationen” erstellen, die aus dem Feld “Modell” (Textfeld) und dem Feld “Garantiezeitraum” (Auswahlfeld) besteht. Anschließend können Sie diese Feldgruppe in den “Standortregeln” so einstellen, dass sie nur dann angezeigt wird, wenn der Artikeltyp “Produkt” ist.

ACF kümmert sich automatisch um die Darstellung der Felder im Hintergrund, die Speicherung der Daten sowie die Abfrage der Werte auf der Benutzeroberfläche – es ist nicht notwendig, Code für die Verwaltungsoberfläche zu schreiben.

hosting.com Shared Hosting

Hohe Leistung mit AMD EPYC-CPUs, NVMe-SSD-Speicher und LiteSpeed, fachkundiger Inhouse-Support rund um die Uhr, erweiterte Sicherheitsmaßnahmen einschließlich SSL, Brute-Force-, Malware- und DDoS-Schutz, Einsparungen von bis zu 73%

Zugangsseite

In der Frontend-Template-Datei werden ACF-Felder aufgerufen.

Beim Anzeigen auf der Frontend-Seite wird das von ACF bereitgestellte Material verwendet. get_field() Eine Funktion, die Werte abruft.

add_action( 'woocommerce_single_product_summary', 'display_acf_fields_on_product_page', 25 );
function display_acf_fields_on_product_page() {
    $product_model = get_field( 'product_model' );
    $warranty_period = get_field( 'warranty_period' );

if ( $product_model ) {
        echo '<p class="acf-product-model"><strong>Produktmodell:</strong>'`. esc_html($product_model).`'</p>';
    }

if ( $warranty_period ) {
        echo '<p class="acf-warranty-period"><strong>Garantiezeit:</strong>'`. esc_html($warranty_period).`'</p>';
    }
}

Für variablen Produkte werden benutzerdefinierte Felder auf Variante-Ebene hinzugefügt.

Für variablen Produkte ist es manchmal notwendig, für jede Variante (z. B. verschiedene Größen, Farben) separate, benutzerdefinierte Felder einzurichten. Dazu werden Hook-Funktionen verwendet, die auf die jeweiligen Varianten abzielen. woocommerce_product_after_variable_attributes。

Einen Feld hinzufügen zum Variantenpanel

add_action( 'woocommerce_product_after_variable_attributes', 'add_custom_field_to_variations', 10, 3 );
function add_custom_field_to_variations( $loop, $variation_data, $variation ) {
    // 变体专属字段：例如，每个颜色变体的 Pantone 色号
    woocommerce_wp_text_input(
        array(
            'id'          => '_pantone_code[' . $variation->ID . ']',
            'label'       => __( 'Pantone 色号', 'woocommerce' ),
            'value'       => get_post_meta( $variation->ID, '_pantone_code', true ),
            'placeholder' => '例如：PMS 185 C',
            'wrapper_class' => 'form-row form-row-first',
        )
    );
}

Speichern der Werte der Variablenfelder

Die Speicherung von Variablenfeldern erfordert die Verwendung spezieller „Hooks“. woocommerce_save_product_variation。

Empfohlene Lektüre Kompletter Leitfaden für die Erstellung professioneller Webseiten: Entwickeln Sie Ihr WordPress-Theme von Grund auf。

add_action( 'woocommerce_save_product_variation', 'save_custom_variation_field', 10, 2 );
function save_custom_variation_field( $variation_id, $loop ) {
    $pantone_code = isset( $_POST['_pantone_code'][ $variation_id ] ) ? sanitize_text_field( $_POST['_pantone_code'][ $variation_id ] ) : '';
    update_post_meta( $variation_id, '_pantone_code', $pantone_code );
}

Zusammenfassungen

Das Hinzufügen benutzerdefinierter Felder zu WooCommerce-Produkten ist die Grundlage für eine tiefgreifende Anpassung der Shop-Funktionen. Mithilfe der integrierten Aktionshaken (Action Hooks) können Entwickler genau steuern, wo die Felder angezeigt werden, welche Typen sie haben und wie die Daten verarbeitet werden – dies ermöglicht eine einfache und effiziente Integration. Für Projekte, die eine schnelle Bereitstellung erfordern oder komplexe Feldtypen beinhalten, ist die Nutzung zusätzlicher Tools besonders vorteilhaft. Advanced Custom Fields Diese Art von Plugins kann die Entwicklungseffizienz erheblich steigern. Egal ob es sich um einfache oder variablen Produkte handelt – das Beherrschen dieser Methoden ermöglicht es Ihnen, die Datenstruktur der Produkte flexibel zu erweitern, um die unterschiedlichen Anforderungen des E-Commerce-Geschäfts zu erfüllen und die Professionalität sowie die Benutzererfahrung der Website zu verbessern.

FAQ Häufig gestellte Fragen

Werden die Daten der benutzerdefinierten Felder beim Export/Import des Produkts mit übertragen?

Ja, aber es erfordert zusätzliche Bearbeitungen. Wenn man die integrierten CSV-Import-/Export-Funktionen von WooCommerce verwendet, werden benutzerdefinierte Felder, die mithilfe von Code hinzugefügt werden, standardmäßig nicht in die exportierten Spalten aufgenommen. Sie müssen die entsprechenden Spaltentitel manuell in die CSV-Datei einfügen. _product_modelSie können dies entweder während der Exportierung durchaus tun – indem Sie die entsprechende Option auswählen – oder indem Sie alle Metadaten direkt exportieren. Die Exportierung/Importierung von ACF-Feldern wird in der Regel besser von den ACF-Plugins selbst oder von zugehörigen Import-/Export-Tools (wie z. B. WP All Import) unterstützt.

InterServer Shared Hosting

Shared Hosting $2.50 USD pro Monat, erster Monat $0.1 USD Promo-Code tryinterserver, 461 Cloud-Apps Skripte, ein Klick installieren.

Zugangsseite

Kann man auf Basis benutzerdefinierter Felder einen Produktfilter erstellen?

Ja, das ist möglich – aber es geht dabei über die einfache Hinzufügung von Feldern hinaus. Du musst die Werte der benutzerdefinierten Felder in die Produkttaxonomie von WooCommerce einbinden oder dritte Filter-Plugins (z. B. WooCommerce Product Filters) verwenden, um diese benutzerdefinierten Metadaten zu erkennen. Eine noch fortgeschrittene Lösung besteht darin, eigene Abfragen zu schreiben, um die Daten effektiver zu verarbeiten. pre_get_posts oder woocommerce_product_query In der Schleife wird der Hauptzyklus modifiziert, um Produkte mit bestimmten Metadaten zu filtern.

Welcher grundlegende Unterschied besteht zwischen den Feldern, die durch den Code hinzugefügt werden, und den Feldern, die durch das ACF-Plugin hinzugefügt werden?

Der grundlegende Unterschied liegt in der Art und Weise der Datenverwaltung und -speicherung. Wenn Sie die Daten manuell über Code hinzufügen, haben Sie direkten Einfluss auf die HTML-Ausgabe der Felder, die Validierungsprozesse sowie die Speicherung der Daten. Zudem können Sie die entsprechenden Funktionen von WordPress nutzen. update_post_meta und get_post_meta Die Funktionen dienen dem Zugriff auf Daten. Das ACF-Plugin baut auf dieser Grundlage eine vollständige Verwaltungsschicht auf und bietet eine benutzerfreundliche Oberfläche zum Definieren von Feldgruppen und Regeln sowie zur strukturierteren Speicherung der Daten – möglicherweise innerhalb derselben Array-Struktur. get_field() Funktionen wie diese liefern formatierte Werte zurück. ACF vereinfacht den Prozess, doch die Code-Implementierung ist dabei leichter und direkter in der Handhabung.

Nachdem ein Feld hinzugefügt wurde, wie kann es auf der Produktarchivseite (der Shop-Seite) angezeigt werden?

Um benutzerdefinierte Felder auf der Produktarchivseite (z. B. auf der Shop-Hauptseite oder auf Kategorienseiten) anzuzeigen, muss in der Regel das Template der Produktdatenzeile (Product Loop Item) geändert werden. Die sicherste Methode besteht darin, die entsprechenden WooCommerce-Template-Dateien zu kopieren und anschließend lokal zu modifizieren. templates/content-product.php Gehen Sie zum entsprechenden Pfad Ihres Unterthemas und ersetzen Sie den Inhalt dort. Rufen Sie anschließend an der geeigneten Stelle (z. B. nach dem Preis) die benötigten Funktionen auf. get_post_meta() Um die Feldwerte auszugeben, kann auch dies verwendet werden. woocommerce_after_shop_loop_item_title Diese Art von „Hooken“ dient zum Einfügen von Inhalten, wobei zu beachten ist, dass die Anordnung des Inhalts je nach Thema variieren kann.