Custom Felder bei WooCommerce Produkte

Individuelle WooCommerce Input & Output Felder erzeugen

Dieser Code erweitert die WooCommerce Produktseiten mit einem individuellen Eingabe-Text-Feld. Die eingegebenen Daten werden anschließend im Frontend der Produktseite ausgegeben. Der Code muss in die Functions.php, im Hauptverzeichnis des WordPress-Themes, eingefügt werden.

Funktionsumfang:

– Erzeugt ein Text-Input-Feld im Backend der WooCommerce Produkte (global, bei allen Produkten)

– Speichert die Daten des Input-Feldes bei Aktualisierung des Produktes (Getrennte Daten für jedes Produkt)

– Anzeige der gespeicherten Daten im Frontend des WooCommerce Produktes
— Anzeige standardmäßig direkt über dem Warenkorb-Button

/**
 * Custom Field / Info in a Woocommerce Product
 * @since 1.0.0
 */

/**
 * Display the custom field on the front end of a Woocommerce product
 * @since 1.0.0
 */

function hnp_display_custom_field_1()
{
    global $post;
    // Check for the custom field value
    $product = wc_get_product($post->ID);
    $title = $product->get_meta('hnp_custom_text_field_title_1');
    if ($title)
    {
        // Only display our field if we've got a value for the field title
        printf('%s', esc_html($title));
    }
}
add_action('woocommerce_before_add_to_cart_button', 'hnp_display_custom_field_1');

/**
 * Create the custom text input field in the Backend of a Woocommerce Product
 * @since 1.0.0
 */

function hnp_hnp_create_custom_field_1()
{
    $args = array(
        'id' => 'hnp_custom_text_field_title_1',
        'label' => __('Custom Field', 'hnp') ,
        'class' => 'hnp-custom-field',
        'desc_tip' => true,
        'description' => __('Enter the title of your custom text field.', 'chnp') ,
    );
    woocommerce_wp_text_input($args);
}
add_action('woocommerce_product_options_general_product_data', 'hnp_hnp_create_custom_field_1');

/**
 * Save the custom field
 * @since 1.0.0
 */
function hnp_save_custom_field_1($post_id)
{
    $product = wc_get_product($post_id);
    $title = isset($_POST['hnp_custom_text_field_title_1']) ? $_POST['hnp_custom_text_field_title_1'] : '';
    $product->update_meta_data('hnp_custom_text_field_title_1', sanitize_text_field($title));
    $product->save();
}
add_action('woocommerce_process_product_meta', 'hnp_save_custom_field_1');

Wenn im Backend keine Daten im Input-Feld eingetragen wurden, ist die Funktion und die Frontend-Ausgabe nicht aktiv. Somit kann entschieden werden, bei welchen Produkten die Funktion aktiviert und ausgegeben wird.
Information: Es sollte mehr als ein Feld pro Produkt genutzt werden? Dazu muss lediglich die Zahl “1” im kompletten Code zu “2” geändert werden. Und der Code ein zweites Mal in die Funktions.php eingefügt werden. Der Code kann beliebig oft genutzt werden, sofern jeweils die Zahl pro Nutzung fortlaufend geändert wird.

Erweiterung 1:
Sollte die Frontend-Anzeige noch mit einem Eingabefeld sein, wird Zeile 22:

printf('%s', esc_html($title));

mit diesem Code ausgetauscht:

printf('<div class="hnp-custom-field-wrapper"><label for="hnp-title-field">%s</label><input type="text" id="hnp-title-field" name="hnp-title-field" value=""></div>', esc_html( $title ));

Individualisierung 1:
Sollte die Ausgabe des Inputs nicht über dem Warenkorb-Button sein, sondern an einer anderen Position, muss der WooCommerce Hook in Zeile 25

add_action('woocommerce_before_add_to_cart_button', 'hnp_display_custom_field_1');

ausgetauscht werden.

Weitere Hooks / Platzierungen (von oben nach unten):

Hook 1: Vor dem Content des Produktes:

woocommerce_before_single_product

Hook 2: Vor dem Content des Produktes 2:

woocommerce_before_single_product_summary

Hook 3: Nach dem Titel / der Produktüberschrift:

woocommerce_single_product_summary

Hook 5: Nach der Kurzbeschreibung:

woocommerce_before_add_to_cart_form

Hook 6: Vor den Variationen:

woocommerce_before_variations_form

Hook 7: Nach den Variationen:

woocommerce_before_add_to_cart_button

Hook 8: Nach den Variationen 2:

woocommerce_before_single_variation

Hook 9: Nach der Single Variation:

woocommerce_single_variation

Hook 10: Vor der Anzahl-Auswahl:

woocommerce_before_add_to_cart_quantity

Hook 11: Nach der Anzahl-Auswahl:

woocommerce_after_add_to_cart_quantity

Hook 12: Nach dem Warenkorb Button 1:

woocommerce_after_single_variation

Hook 13: Nach dem Warenkorb Button 2:

woocommerce_after_add_to_cart_button

Hook 14: Nach dem Warenkorb Button 3:

woocommerce_after_variations_form

Hook 15: Nach dem Warenkorb Button 4:

woocommerce_after_add_to_cart_form

Hook 16: Vor der Produkt Meta:

woocommerce_product_meta_start

Hook 17: Nach der Produkt Meta:

woocommerce_product_meta_end

Hook 18: Share / Teilen Area:

woocommerce_share

Hook 19: Unter den Produkt-Fotos:

woocommerce_product_thumbnails

Hook 20: Am Ende des Produktes:

woocommerce_after_single_product_summary

Je nach Theme kann es sein, dass nicht alle Hooks im Design integriert sind oder auch an anderen Positionen angezeigt werden. Durch Ausprobieren oder Auslesen des Theme-Codes sollte aber eine passende Position gefunden werden.

Eigenen Hook erstellen:
Sollten die WooCommerce Standard-Hooks nicht die passende Position bereitstellen, muss ein individueller Hook erstellt werden.

Dazu wird die Zeile 25 auf einen individuellen Hook-Tag geändert:

add_action('hnp_custom_hook_1', 'hnp_display_custom_field_1');

Der Hook kann nun in einer gewünschten Stelle im Design eingebunden werden, durch diesen Code:

<?php do_action('hnp_custom_hook_1');?>

Falls der PhP Tag bereits offen ist:

do_action('hnp_custom_hook_1');

Shortcode anstatt Hook nutzen
Sollte die Funktion nicht automatisch durch einen Hook eingebunden werden, sondern durch ein Shortcode, wird die “Add Action” Funktion aus Zeile 25 entfernt und zudem eine Shortcode-Funktion erstellt. Der fertige Code sieht folgend aus:

/**
 * Custom Field / Info in a Woocommerce Product
 * @since 1.0.0
 */

/**
 * Display the custom field on the front end of a Woocommerce product
 * @since 1.0.0
 */

function hnp_display_custom_field_1()
{
    global $post;
    // Check for the custom field value
    $product = wc_get_product($post->ID);
    $title = $product->get_meta('hnp_custom_text_field_title_1');
    if ($title)
    {
        // Only display our field if we've got a value for the field title
        printf('%s', esc_html($title));
    }
}

/**
 * Create the custom text input field in the Backend of a Woocommerce Product
 * @since 1.0.0
 */

function hnp_hnp_create_custom_field_1()
{
    $args = array(
        'id' => 'hnp_custom_text_field_title_1',
        'label' => __('Custom Input', 'hnp') ,
        'class' => 'hnp-custom-field',
        'desc_tip' => true,
        'description' => __('Enter the title of your custom text field.', 'chnp') ,
    );
    woocommerce_wp_text_input($args);
}
add_action('woocommerce_product_options_general_product_data', 'hnp_hnp_create_custom_field_1');

/**
 * Save the custom field
 * @since 1.0.0
 */
function hnp_save_custom_field_1($post_id)
{
    $product = wc_get_product($post_id);
    $title = isset($_POST['hnp_custom_text_field_title_1']) ? $_POST['hnp_custom_text_field_title_1'] : '';
    $product->update_meta_data('hnp_custom_text_field_title_1', sanitize_text_field($title));
    $product->save();
}
add_action('woocommerce_process_product_meta', 'hnp_save_custom_field_1');

/**
 * Custom Shortcode
 * @since 1.0.0
 */


function hnp_custom_short1(){
    return hnp_display_custom_field_1();
}

add_shortcode('hnp_custom_shortcode_1', 'hnp_custom_short1'); 

Auch diese Funktion kann mehrfach genutzt werden, sofern die Zahl “1” aus dem kompletten Code ausgetauscht wird. Das Shortcode für die Frontend-Anzeige ist:

[hnp_custom_shortcode_1]

Das Shortcode kann in Widgets, Produktbeschreibungen, Texteditoren oder bei anderen Nutzungsmöglichkeiten (z.B. Pagebuildern) genutzt werden. Sollte das Shortcode in eine HTML-Datei eingefügt werden, wäre der passende Code:

<?php echo do_shortcode('[hnp_custom_shortcode_1]'); ?>

Sollte das Shortcode in eine PHP Datei (mit geöffneten PHP Tag) eingebunden werden, wäre der Code:

echo do_shortcode('[hnp_custom_shortcode_1]'); 

Weitere Möglichkeiten:
Es könnten auch Container, Bilder oder andere HTML Tags für das Frontend eingebunden werden, indem Zeile 25 erweitert wird:

printf('%s', esc_html($title));

Dieser Tag übergibt die eingetragenen Daten des Backends:

%s

Hierbei ein Code mit zusätzlich einem Bild und in einem Container:

  printf('<div class="hnp-container_1"><h3>Überschrift:</h3><p>%s</p><br><img src="www.url_zum_bild" alt="alt_tag" /></div>', esc_html($title));

Zu beachten ist, dass das Backend-Feld nur mit Text (ohne Code) gefüllt werden sollte, ansonsten könnten Fehler erzeugt werden. Deswegen sollten HTML-Codes ausschließlich über die HTML / PHP Dateien eingebunden werden.

Sie wurden gehackt oder Ihre Webseiten mit Viren/Malware infiziert? Wir säubern und schützen Ihre Webseite: → Webseiten-Anti-Virus-Service