Eigenes Datenfeld in Woocommerce

Worum gehts?

Der Kunde möchte noch zusätzliche, nicht im Standard enthaltene, Felder in der  WooCommerce Produktseite ausgeben.

Im konkreten Fall sollte das die Füllmenge der Flaschen sein.

woocommerce logo

Welche Felder könnten das sein?

  • Text fields
  • Select boxes
  • Checkboxes
  • Radio buttons
  • Textareas
  • Hidden fields

Wo kann man diese einbauen?

  • General
  • Inventory
  • Shipping
  • Linked Products
  • Attributes
  • Variations
  • Advanced

Bleiben wir aber beim konreten Fall. Es sollten gemischte Daten eingeben werden (Füllmenge: 0,75l) – also ein Mix aus Numbers und Strings. Ein Textfeld kann beides abbilden und natürlcih müssen die Werte auch in die DB geschrieben werden.

Wie geht das?

Der Code kommt in die functions.php des Child Themes! 

Wie das aussehen solte:

woocommerce datenfeld frontend
Frontend (Klick)
woocommerce datenfeld backend
Backend (Klick)

Die Kurzfassung:

In diesem Beispiel wird ein Feld angelegt mit dem Titel „Füllmenge“. Die Description gibt einen Tooltip für das Feld aus.

/**
* Displays the custom text field input field in the WooCommerce product data meta box
*/
function cfwc_create_custom_field() {
$args = array(
'id' => 'custom_text_field_title',
'label' => __( 'Füllmenge', 'cfwc' ),
'class' => 'cfwc-custom-field',
'desc_tip' => true,
'description' => __( 'Gib die Füllmenge ein.', 'ctwc' ),
);
woocommerce_wp_text_input( $args );
}
add_action( 'woocommerce_product_options_general_product_data', 'cfwc_create_custom_field' );

Speichern der Daten:

Natürlich wollen wir die Daten auch in die DB schreiben:

/**
* Saves the custom field data to product meta data
*/
function cfwc_save_custom_field( $post_id ) {
$product = wc_get_product( $post_id );
$title = isset( $_POST['custom_text_field_title'] ) ? $_POST['custom_text_field_title'] : '';
$product->update_meta_data( 'custom_text_field_title', sanitize_text_field( $title ) );
$product->save();
}
add_action( 'woocommerce_process_product_meta', 'cfwc_save_custom_field' );

Ausgabe des eigenen Feldes:

Jetzt bringen wir das noch nach vorn in die Produktdetails:

/**
* Displays custom field
*/
function cfwc_display_custom_field() {
global $post;
// Check for the custom field value
$product = wc_get_product( $post->ID );
$title = $product->get_meta( 'custom_text_field_title' );
if( $title ) {
	echo '<div class="contiene">';
echo get_post_meta($post->ID, 'custom_text_field_title', true);
echo '</div>';
}
}

add_action( 'woocommerce_after_shop_loop_item', 'cfwc_display_custom_field', 5);

Das war schon? NEIN!

Das DIV class=contiene erschafft mittels echo die Möglichkeit, das neu erschaffene Feld mit einer Klasse im CSS anzusprechen und ihm einen Style zu verpassen. Das ist ein Hack speziell für diesen Fall. 

add_action( ‘woocommerce_after_shop_loop_item’, ‘cfwc_display_custom_field’, 5); bezieht sich nur auf den Block, der hier erwünscht war. Es gibt etliche. die ansprechbar sind und ein Verzeichnis dazu findet sich z.B. hier.

Wem das jetzt immer noch zu umständlich ist, der kauft ein Plugin :-) Da findet sich beispielsweise das hier: WooCommerce Product Add-Ons Ultimate

Noch mehr informationen über verfügbare Felder und sonstiges zu diesem Thema:

How Do You Add Custom Fields to WooCommerce Products?

 

Happy coding :-)

Du brauchst hilfe zum Thema? Schreib mir....

Verwandte Artikel

web safe fonts schriften im web
Webdesign

Das Kreuz mit den Schriften im Web

Regel : Benutze web safe-Fonts bzw. websichere Schriften! Natürlich! Logisch! Nichts besser als Websafe Fonts. aber wie eigentlich? Erkenntnis: Es gibt kaum noch Websafe-Fonts! Wir haben doch Google Fonts! Natürlich. Das Erscheinen der

Weiter lesen »

Teilen

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Steffen Rössler

Steffen Rössler

Diplom-Webdesigner | dreifacher Vater | Klassik-Liebhaber | Schnellleser | UmDieEcke-Denker. Lebt und arbeitet in Braunau a. Inn

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Scroll to Top