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.

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:
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

Ersetzen von Eicons mit Font Awesome Header Elementor
Problem : Der Hamburger Icon und einige andere Elemente in Elementor benutzen Eicons. Diese sind eigentlich unnötig und kosten Ladezeit. Ich mag sie persönlich überhaupt nicht. Lösung: Ersetzten mit Font Awesome Diese Lösung

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