So fügen Sie ein benutzerdefiniertes Woocommerce-Textfeld auf der Produktseite hinzu

Veröffentlicht: 2020-09-21

Fügen Sie das benutzerdefinierte Woocommerce-Textfeld auf der Produktseite hinzu In diesem Beitrag zeige ich Ihnen eine sehr einfache Lösung, um ein benutzerdefiniertes WooCommerce-Textfeld auf der Produktseite hinzuzufügen. Diese benutzerdefinierten Felder werden auch als Produkt-Add-Ons bezeichnet und umfassen Textfelder, Auswahlfelder, Kontrollkästchen usw. Der Hauptgrund für die Hinzufügung besteht darin, dem Kunden die Möglichkeit zu geben, zusätzliche, personalisierte Informationen zu einem Produkt gegen eine Gebühr einzugeben.

WooCommerce ist eine leistungsstarke E-Commerce-Lösung für WordPress, die im Laufe der Jahre an Popularität gewonnen hat. Es wird geschätzt, dass WooCommerce über 42 % aller verfügbaren Online-Shops betreibt.

Dies ist ein sehr hoher Prozentsatz, und wenn Sie nach einem Online-Shop suchen, der einfach einzurichten und zu verwalten ist, dann ist WooCommerce die beste Option für Sie. Es ist eine kostenlose Open-Source-Lösung, die sich zu einer sehr kompetenten E-Commerce-Lösung für WordPress-basierte Websites entwickelt hat.

Benutzerdefiniertes Woocommerce-Textfeld auf der Produktseite

Wenn Sie eine schnelle Suche im Internet durchführen, werden Ihnen viele Leute komplexe Lösungen anbieten, die schwer zu implementieren sind. In diesem kurzen Tutorial werde ich ein PHP-Code-Snippet teilen, das diese Funktionalität zu Ihrer Produktseite hinzufügt.

Am Ende dieses Tutorials können Benutzer Ihres Online-Shops jedem Produkt eine benutzerdefinierte Notiz hinzufügen. Wenn das benutzerdefinierte Feld nicht ausgefüllt ist, wird ein Fehler ausgegeben.

Wenn Sie außerdem nach einer einfacheren Möglichkeit suchen, benutzerdefinierte Felder hinzuzufügen, dann ist das Produkt-Extras für WooCommerce-Plugin die beste Lösung für Sie. Es ist jedoch ein Premium-Plugin und Sie müssen eine jährliche Gebühr von 59 US-Dollar zahlen. Produkt-Extras für das WooCommerce-Plugin

Warum sollten Sie benutzerdefinierte Felder auf der Produktseite hinzufügen?

Der Hauptgrund dafür ist die Verbesserung der Kundenbindung, was wahrscheinlich den Umsatz ankurbeln wird, da Kunden der Bestellung eine benutzerdefinierte Notiz hinzufügen können.

Beispielsweise möchte ein Kunde möglicherweise eine Geschenkverpackung oder personalisierte Grußkarten auf dem Produkt und er oder sie kann die benutzerdefinierte Notiz auf dem Produkt hinzufügen.

Lassen Sie uns mit all dem, was auf dem Tisch liegt, einen Blick auf die Schritte werfen, die Sie befolgen müssen, um ein benutzerdefiniertes Textfeld auf der Produktseite in Ihrem WooCommerce-Shop hinzuzufügen. Die Standardproduktseite sieht so aus:

Schritte zum Hinzufügen eines benutzerdefinierten Woocommerce-Textfelds auf der Produktseite

Hier sind die Schritte, die Sie befolgen müssen:

Melden Sie sich bei Ihrer WordPress-Site an und greifen Sie als Admin-Benutzer auf das Dashboard zu.
Klicken Sie im Dashboard-Menü auf Darstellungsmenü > Themen-Editor-Menü . Wenn die Seite „Design- Editor “ geöffnet wird, suchen Sie nach der Datei mit den Designfunktionen, in der wir die Funktion hinzufügen, die das benutzerdefinierte WooCommerce-Feld auf der Produktseite hinzufügt.
Fügen Sie der Datei functions.php den folgenden Code hinzu :

 /**

 * @snippet Fügen Sie Produkten ein Eingabefeld hinzu - WooCommerce

 */

// -----------------------------------------

// 1. Benutzerdefiniertes Eingabefeld über In den Warenkorb anzeigen

add_action( 'woocommerce_before_add_to_cart_button', 'njengah_product_add_on', 9 );

Funktion njengah_product_add_on() {

    $value = isset( $_POST['custom_text_add_on'] ) ? sanitize_text_field( $_POST['_custom_text_add_on'] ) : '';

    echo '<div><label>Benutzerdefiniertes Text-Add-On <abbr class="required" title="required">*</abbr></label><p><input name="custom_text_add_on" value="' . $value .'"></p></div>';

}

// -----------------------------------------

// 2. Fehler auslösen, wenn benutzerdefiniertes Eingabefeld leer ist

add_filter( 'woocommerce_add_to_cart_validation', ' njengah_product_add_on_validation', 10, 3 );

Funktion njengah_product_add_on_validation( $passed, $product_id, $qty ){

   if( isset( $_POST['custom_text_add_on'] ) && sanitize_text_field( $_POST['custom_text_add_on'] ) == '' ) {

      wc_add_notice( 'Benutzerdefiniertes Text-Add-On ist ein Pflichtfeld', 'error' );

      $bestanden = falsch;

   }

   return $passed;

}

// -----------------------------------------

// 3. Speichern Sie den benutzerdefinierten Eingabefeldwert in den Artikeldaten des Einkaufswagens

add_filter( 'woocommerce_add_cart_item_data', ' njengah_product_add_on_cart_item_data', 10, 2 );

Funktion njengah_product_add_on_cart_item_data( $cart_item, $product_id ){

    if( isset( $_POST['custom_text_add_on'] ) ) {

        $cart_item['custom_text_add_on'] = sanitize_text_field( $_POST['custom_text_add_on'] );

    }

    $cart_item zurückgeben;

}

// -----------------------------------------

// 4. Anzeige des benutzerdefinierten Eingabefeldwerts @ Cart

add_filter( 'woocommerce_get_item_data', ' njengah_product_add_on_display_cart', 10, 2 );

Funktion njengah_product_add_on_display_cart( $data, $cart_item ) {

    if ( isset( $cart_item['custom_text_add_on'] ){

        $daten[] = array(

            'name' => 'Benutzerdefiniertes Text-Add-On',

            'value' => sanitize_text_field( $cart_item['custom_text_add_on'] )

        );

    }

    $daten zurückgeben;

}

// -----------------------------------------

// 5. Speichern Sie den Wert des benutzerdefinierten Eingabefelds im Bestellartikel-Meta

add_action( 'woocommerce_add_order_item_meta', ' njengah_product_add_on_order_item_meta', 10, 2 );

Funktion njengah_product_add_on_order_item_meta( $item_id, $values ) {

    if ( ! empty( $values['custom_text_add_on'] ) ) {

        wc_add_order_item_meta( $item_id, 'Custom Text Add-On', $values['custom_text_add_on'], true );

    }

}

// -----------------------------------------

// 6. Zeigen Sie den Wert des benutzerdefinierten Eingabefelds in der Bestelltabelle an

add_filter( 'woocommerce_order_item_product', ' njengah_product_add_on_display_order', 10, 2 );

Funktion njengah_product_add_on_display_order( $cart_item, $order_item ){

    if( isset( $order_item['custom_text_add_on'] ) ){

        $cart_item['custom_text_add_on'] = $order_item['custom_text_add_on'];

    }

    $cart_item zurückgeben;

}

// -----------------------------------------

// 7. Benutzerdefinierten Eingabefeldwert in Bestell-E-Mails anzeigen

add_filter( 'woocommerce_email_order_meta_fields', ' njengah_product_add_on_display_emails' );

Funktion njengah_product_add_on_display_emails( $fields ) {

    $fields['custom_text_add_on'] = 'Benutzerdefiniertes Text-Add-On';

    $felder zurückgeben;

}

Um das Ergebnis zu sehen, aktualisieren Sie einfach die Produktseite und Sie sollten Folgendes sehen:

Wenn ein Benutzer die Details nicht eingegeben hat, wird ein Fehler angezeigt, bis der Benutzer den benutzerdefinierten Text wie unten gezeigt hinzufügt: Fehler, wenn der Benutzer keine Details eingegeben hat

Die benutzerdefinierte Notiz wird auch in den Bestelldetails angezeigt, wie hier gezeigt: benutzerdefiniertes Text-Addon im Warenkorb

Wie der Kodex funktioniert

Zuerst zeigt der Code das benutzerdefinierte Eingabefeld über „In den Einkaufswagen“ und dann wird ein Fehler hinzugefügt, wenn das benutzerdefinierte Eingabefeld leer ist. Dann wird der benutzerdefinierte Eingabefeldwert gespeichert und im Warenkorb, im Bestellartikel, in der Bestelltabelle und in den Bestell-E-Mails angezeigt.

Fazit

In diesem Beitrag habe ich Ihnen eine einfachere Lösung für die nicht so technisch versierten Benutzer bereitgestellt, die die Verwendung eines Plugins beinhalten. Dann habe ich ein PHP-Code-Snippet geteilt, das in der Datei functions.php platziert werden sollte, um das Kunden-Add-On im Warenkorb, im Bestellartikel, in der Bestelltabelle und in den Bestell-E-Mails anzuzeigen. Ich hoffe, dass dieser Beitrag Ihnen geholfen hat, ein benutzerdefiniertes WooCommerce-Textfeld auf der Produktseite hinzuzufügen.