Add and display multiple Custom Fields for Variations in WooCommerce - php

Question

Based on Enhanced WooCommerce Custom Fields for Variations answer code for adding a custom field to a product variation which works.
I have added additional custom fields, 6 at all. When I update the product, the data does not save and does not display on the front end either.
What have I done incorrectly when adding the additional custom fields?
My code:
// Add a custom field to variation settings
add_action( 'woocommerce_product_after_variable_attributes', 'variation_settings_fields', 10, 3 );
function variation_settings_fields( $loop, $variation_data, $variation ) {
// Text Field
woocommerce_wp_text_input(
array(
'id' => '_model[' . $variation->ID . ']',
'label' => __( 'model', 'woocommerce' ),
'placeholder' => 'http://',
'desc_tip' => 'true',
'description' => __( 'Enter the custom value here.', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, '_model', true )
)
);
// Text Field
woocommerce_wp_text_input(
array(
'id' => '_wattage[' . $variation->ID . ']',
'label' => __( 'wattage', 'woocommerce' ),
'placeholder' => 'http://',
'desc_tip' => 'true',
'description' => __( 'Enter the custom value here.', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, '_wattage', true )
)
);
// Text Field
woocommerce_wp_text_input(
array(
'id' => '_lumen[' . $variation->ID . ']',
'label' => __( 'lumen', 'woocommerce' ),
'placeholder' => 'http://',
'desc_tip' => 'true',
'description' => __( 'Enter the custom value here.', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, '_lumen', true )
)
);
// Text Field
woocommerce_wp_text_input(
array(
'id' => '_material[' . $variation->ID . ']',
'label' => __( 'material', 'woocommerce' ),
'placeholder' => 'http://',
'desc_tip' => 'true',
'description' => __( 'Enter the custom value here.', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, '_material', true )
)
);
// Text Field
woocommerce_wp_text_input(
array(
'id' => '_dimension[' . $variation->ID . ']',
'label' => __( 'dimension', 'woocommerce' ),
'placeholder' => 'http://',
'desc_tip' => 'true',
'description' => __( 'Enter the custom value here.', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, '_dimension', true )
)
);
// Text Field
woocommerce_wp_text_input(
array(
'id' => '_year[' . $variation->ID . ']',
'label' => __( 'year', 'woocommerce' ),
'placeholder' => 'http://',
'desc_tip' => 'true',
'description' => __( 'Enter the custom value here.', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, '_year', true )
)
);
}
// Save custom field value from variation settings
add_action( 'woocommerce_admin_process_variation_object', 'save_variation_settings_fields', 10, 2 );
function save_variation_settings_fields( $variation, $loop ) {
if( isset($_POST['_model'][$loop]) ) {
$variation->update_meta_data( '_model', sanitize_text_field($_POST['_model'][$loop]) );
}
if( isset($_POST['_wattage'][$loop]) ) {
$variation->update_meta_data( '_wattage', sanitize_text_field($_POST['_wattage'][$loop]) );
}
if( isset($_POST['_lumen'][$loop]) ) {
$variation->update_meta_data( '_lumen', sanitize_text_field($_POST['_lumen'][$loop]) );
}
if( isset($_POST['_material'][$loop]) ) {
$variation->update_meta_data( '_material', sanitize_text_field($_POST['_material'][$loop]) );
}
if( isset($_POST['_dimension'][$loop]) ) {
$variation->update_meta_data( '_dimension', sanitize_text_field($_POST['_dimension'][$loop]) );
}
if( isset($_POST['_year'][$loop]) ) {
$variation->update_meta_data( '_year', sanitize_text_field($_POST['_year'][$loop]) );
}
}
// Add variation custom field to single variable product form
add_filter( 'woocommerce_available_variation', 'add_variation_custom_field_to_variable_form', 10, 3 );
function add_variation_custom_field_to_variable_form( $variation_data, $product, $variation ) {
$variation_data['model'] = $variation->get_meta('_model');
$variation_data['wattage'] = $variation->get_meta('_wattage');
$variation_data['lumen'] = $variation->get_meta('_lumen');
$variation_data['material'] = $variation->get_meta('_material');
$variation_data['dimension'] = $variation->get_meta('_dimension');
$variation_data['year'] = $variation->get_meta('_year');
return $variation_data;
}
add_action( 'woocommerce_product_additional_information', 'add_html_container_to_display_selected_variation_custom_field' );
function add_html_container_to_display_selected_variation_custom_field( $product ){
echo '<div class="custom_variation-text-field"></div>';
}
// Display selected variation custom field value to product the tab
add_action( 'woocommerce_after_variations_form', 'display_selected_variation_custom_field_js' );
function display_selected_variation_custom_field_js(){
?>
<script type="text/javascript">
(function($){
$('form.cart').on('show_variation', function(event, data) {
$('.custom_variation-text-field').text(data.text_field);
}).on('hide_variation', function(event) {
$('.custom_variation-text-field').text('');
});
})(jQuery);
</script>
<?php
}

Answer 1

To make it save the data, I have made some changes in the 1st function (2nd one stay unchanged):
// Add a custom field to variation settings
add_action( 'woocommerce_product_after_variable_attributes', 'variation_settings_fields', 10, 3 );
function variation_settings_fields( $loop, $variation_data, $variation ) {
woocommerce_wp_text_input( array(
'id' => '_model[' . $loop . ']',
'label' => __( 'model', 'woocommerce' ),
'placeholder' => '',
'desc_tip' => 'true',
'description' => __( 'This is the description text...', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, '_model', true )
) );
woocommerce_wp_text_input(
array(
'id' => '_wattage[' . $loop . ']',
'label' => __( 'wattage', 'woocommerce' ),
'placeholder' => '',
'desc_tip' => 'true',
'description' => __( 'This is the description text...', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, '_wattage', true )
) );
woocommerce_wp_text_input( array(
'id' => '_lumen[' . $loop . ']',
'label' => __( 'lumen', 'woocommerce' ),
'placeholder' => '',
'desc_tip' => 'true',
'description' => __( 'This is the description text...', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, '_lumen', true )
) );
woocommerce_wp_text_input( array(
'id' => '_material[' . $loop . ']',
'label' => __( 'material', 'woocommerce' ),
'placeholder' => '',
'desc_tip' => 'true',
'description' => __( 'This is the description text...', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, '_material', true )
) );
woocommerce_wp_text_input( array(
'id' => '_dimension[' . $loop . ']',
'label' => __( 'dimension', 'woocommerce' ),
'placeholder' => '',
'desc_tip' => 'true',
'description' => __( 'This is the description text...', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, '_dimension', true )
) );
woocommerce_wp_text_input( array(
'id' => '_year[' . $loop . ']',
'label' => __( 'year', 'woocommerce' ),
'placeholder' => 'http://',
'desc_tip' => 'true',
'description' => __( 'Enter the custom value here.', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, '_year', true )
) );
}
// Save custom field value from variation settings
add_action( 'woocommerce_admin_process_variation_object', 'save_variation_settings_fields', 10, 2 );
function save_variation_settings_fields( $variation, $loop ) {
if( isset($_POST['_model'][$loop]) ) {
$variation->update_meta_data( '_model', sanitize_text_field($_POST['_model'][$loop]) );
}
if( isset($_POST['_wattage'][$loop]) ) {
$variation->update_meta_data( '_wattage', sanitize_text_field($_POST['_wattage'][$loop]) );
}
if( isset($_POST['_lumen'][$loop]) ) {
$variation->update_meta_data( '_lumen', sanitize_text_field($_POST['_lumen'][$loop]) );
}
if( isset($_POST['_material'][$loop]) ) {
$variation->update_meta_data( '_material', sanitize_text_field($_POST['_material'][$loop]) );
}
if( isset($_POST['_dimension'][$loop]) ) {
$variation->update_meta_data( '_dimension', sanitize_text_field($_POST['_dimension'][$loop]) );
}
if( isset($_POST['_year'][$loop]) ) {
$variation->update_meta_data( '_year', sanitize_text_field($_POST['_year'][$loop]) );
}
}
It should better work to custom fields data to database and display the saved values in admin.
Now the frontend display part is wrong (your last 2 functions).
You need first to think about how you want to display that multiple custom fields, how should be the html structure and the labels related to each custom field. So edit your question as I can't guess that for you.
Here is a working example with all your custom fields, to display the data in frontend single product pages, for the selected variation:
// Add variation custom field to single variable product form
add_filter( 'woocommerce_available_variation', 'add_variation_custom_field_to_variable_form', 10, 3 );
function add_variation_custom_field_to_variable_form( $variation_data, $product, $variation ) {
$variation_data['model'] = $variation->get_meta('_model');
$variation_data['wattage'] = $variation->get_meta('_wattage');
$variation_data['lumen'] = $variation->get_meta('_lumen');
$variation_data['material'] = $variation->get_meta('_material');
$variation_data['dimension'] = $variation->get_meta('_dimension');
$variation_data['year'] = $variation->get_meta('_year');
return $variation_data;
}
add_action( 'woocommerce_product_additional_information', 'add_html_container_to_display_selected_variation_custom_field' );
function add_html_container_to_display_selected_variation_custom_field( $product ){
echo '<div class="custom_variation-text-field">aaa</div>';
}
// Display selected variation custom field value to product the tab
add_action( 'woocommerce_after_variations_form', 'display_selected_variation_custom_field_js' );
function display_selected_variation_custom_field_js(){
?>
<script type="text/javascript">
(function($){
var a = '.custom_variation-text-field', b = $(a).html();
$('form.cart').on('show_variation', function(event, data) {
outputHtml = '';
if( data.model ) {
outputHtml += '<span><strong><?php _e("Model"); ?><strong>: '+data.model+'<span><br>';
}
if( data.wattage ) {
outputHtml += '<span><strong><?php _e("Wattage"); ?><strong>: '+data.wattage+'<span><br>';
}
if( data.lumen ) {
outputHtml += '<span><strong><?php _e("Lumen"); ?><strong>: '+data.lumen+'<span><br>';
}
if( data.material ) {
outputHtml += '<span><strong><?php _e("Material"); ?><strong>: '+data.material+'<span><br>';
}
if( data.dimension ) {
outputHtml += '<span><strong><?php _e("Dimension"); ?><strong>: '+data.dimension+'<span><br>';
}
if( data.year ) {
outputHtml += '<span><strong><?php _e("Year"); ?><strong>: '+data.year+'<span>';
}
if( outputHtml ) {
$(a).html(outputHtml);
}
}).on('hide_variation', function(event) {
$(a).html(b);
});
})(jQuery);
</script>
<?php
}
Code goes in functions.php file of the active child theme (or active theme). Tested and works.