Show multiple product custom fields values in cart on Woocommerce - php

Question

I have a problem with custom fields & values from my product page appearing on the cart page. As you can see from the screenshots, I have three fields: "Color," "Texto1" and "Texto2" and only the first seems to appear on my cart page.
This is the code that print the fields on the product page:
// Field 1
if( ! empty( $FieldType1 ) ){
if( $FieldType1 == "TEXT AREA"){
echo '<div>
<label>'.$FieldName1.':<br></label> <textarea name="FieldTypeValue1" maxlength="'.$FieldLenght1.'" rows="2" cols="80" placeholder="" required></textarea>
</div><br>';
}
if( $FieldType1 == "TEXT BOX"){
echo '<div>
<label>'.$FieldName1.':<br></label> <input type="text" maxlength="'.$FieldLenght1.'" name="FieldTypeValue1" value="" required>
</div><br>';
}
if( $FieldType1 == "DROP DOWN"){
echo '<div>
<label>'.$FieldName1.':<br></label>
<select name="FieldTypeValue1">';
foreach ($Dropdown1Content as $Dropdown1IndividualContent) {
echo '<option>';
echo $Dropdown1IndividualContent;
echo '</option>';
}
echo '</select></div><br>';
}
}
// Field 2
if( ! empty( $FieldType2 ) ){
if( $FieldType2 == "TEXT AREA"){
echo '<div>
<label>'.$FieldName2.':<br></label> <textarea name="FieldTypeValue2" maxlength="'.$FieldLenght2.'" rows="2" cols="80" placeholder="" required></textarea>
</div><br>';
}
if( $FieldType2 == "TEXT BOX"){
echo '<div>
<label>'.$FieldName2.':<br></label> <input type="text" maxlength="'.$FieldLenght2.'" name="FieldTypeValue2" value="" required>
</div><br>';
}
if( $FieldType2 == "DROP DOWN"){
echo '<div>
<label>'.$FieldName2.':<br></label>
<select name="FieldTypeValue2">';
foreach ($Dropdown2Content as $Dropdown2IndividualContent) {
echo '<option>';
echo $Dropdown2IndividualContent;
echo '</option>';
}
echo '</select></div><br>';
}
}
// Field 3
if( ! empty( $FieldType3 ) ){
if( $FieldType3 == "TEXT AREA"){
echo '<div>
<label>'.$FieldName3.':<br></label> <textarea name="FieldTypeValue3" maxlength="'.$FieldLenght3.'" rows="2" cols="80" placeholder="" required></textarea>
</div><br>';
}
if( $FieldType3 == "TEXT BOX"){
echo '<div>
<label>'.$FieldName3.':<br></label> <input type="text" maxlength="'.$FieldLenght3.'" name="FieldTypeValue3" value="" required>
</div><br>';
}
if( $FieldType3 == "DROP DOWN"){
echo '<div>
<label>'.$FieldName3.':<br></label>
<select name="FieldTypeValue3">';
foreach ($Dropdown3Content as $Dropdown3IndividualContent) {
echo '<option>';
echo $Dropdown3IndividualContent;
echo '</option>';
}
echo '</select></div><br>';
}
}
This is the code that saves the value of the fields on the product page
// Store custom field label and value in cart item data
add_action( 'woocommerce_add_cart_item_data','save_my_custom_checkout_field', 10, 2 );
function save_my_custom_checkout_field( $cart_item_data, $product_id ) {
if( isset( $_REQUEST['FieldTypeValue1'] ) ) {
$cart_item_data['custom_data']['label'] = get_post_meta($product_id, 'FieldName1', true);
$cart_item_data['custom_data']['value'] = sanitize_text_field( $_REQUEST['FieldTypeValue1'] );
$cart_item_data['custom_data']['ukey'] = md5( microtime().rand() );
}
return $cart_item_data;
if( isset( $_REQUEST['FieldTypeValue2'] ) ) {
$cart_item_data['custom_data']['label'] = get_post_meta($product_id, 'FieldName2', true);
$cart_item_data['custom_data']['value'] = sanitize_text_field( $_REQUEST['FieldTypeValue2'] );
$cart_item_data['custom_data']['ukey'] = md5( microtime().rand() );
}
return $cart_item_data;
if( isset( $_REQUEST['FieldTypeValue3'] ) ) {
$cart_item_data['custom_data']['label'] = get_post_meta($product_id,'FieldName3', true);
$cart_item_data['custom_data']['value'] = sanitize_text_field( $_REQUEST['FieldTypeValue3'] );
$cart_item_data['custom_data']['ukey'] = md5( microtime().rand() );
}
return $cart_item_data;
And this is the one that print the values on the cart:
// Display items custom fields label and value in cart and checkout pages
add_filter( 'woocommerce_get_item_data', 'render_meta_on_cart_and_checkout', 10, 2 );
function render_meta_on_cart_and_checkout( $cart_data, $cart_item ){
$custom_items = array();
/* Woo 2.4.2 updates */
if( !empty( $cart_data ) ) {
$custom_items = $cart_data;
}
if( isset( $cart_item['custom_data'] ) ) {
$custom_items[] = array(
'name' => $cart_item['custom_data']['label'],
'value' => $cart_item['custom_data']['value'],
);
}
return $custom_items;
}
The Custom fields on product page:
The product in cart (with the missing data):
I'm not sure if the problem is at the point where values are saved or at the point where they are printed.
Any help would be much appreciated.

Answer 1

Try this hooked functions instead, where I have revisited your code to make it work:
// Store custom field label and value in cart item data
add_filter( 'woocommerce_add_cart_item_data','save_my_custom_checkout_field', 20, 2 );
function save_my_custom_checkout_field( $cart_item_data, $product_id ) {
$label1 = get_post_meta( $product_id, 'FieldName1', true );
$label2 = get_post_meta( $product_id, 'FieldName2', true );
$label3 = get_post_meta( $product_id, 'FieldName3', true );
if( isset( $_REQUEST['FieldTypeValue1'] ) && ! empty( $label1 ) )
$cart_item_data['custom_data']['1'] = array(
'label' => $label1,
'value' => sanitize_text_field( $_REQUEST['FieldTypeValue1'] ),
);
if( isset( $_REQUEST['FieldTypeValue2'] ) && ! empty( $label2 ) )
$cart_item_data['custom_data']['2'] = array(
'label' => $label2,
'value' => sanitize_text_field( $_REQUEST['FieldTypeValue2'] ),
);
if( isset( $_REQUEST['FieldTypeValue3'] ) && ! empty( $label3 ) )
$cart_item_data['custom_data']['3'] = array(
'label' => $label3,
'value' => sanitize_text_field( $_REQUEST['FieldTypeValue3'] ),
);
if( count($cart_item_data['custom_data']) > 0 )
$cart_item_data['custom_data']['key'] = md5( microtime().rand() );
return $cart_item_data;
}
// Display items custom fields label and value in cart and checkout pages
add_filter( 'woocommerce_get_item_data', 'render_meta_on_cart_and_checkout', 20, 2 );
function render_meta_on_cart_and_checkout( $cart_data, $cart_item ){
$custom_items = array();
if( !empty( $cart_data ) )
$custom_items = $cart_data;
if( isset( $cart_item['custom_data'] ) ) {
foreach( $cart_item['custom_data'] as $key => $custom_data ){
if( $key != 'key' ){
$custom_items[] = array(
'name' => $custom_data['label'],
'value' => $custom_data['value'],
);
}
}
}
return $custom_items;
}
Code goes in function.php file of your active child theme (or active theme).
Tested and works… You will get something like that:
For testing I have used the following to display the 3 custom fields on single product page:
// Displaying 3 custom fields on single product pages
add_action( 'woocommerce_before_add_to_cart_button', 'add_custom_fields_single_product', 20 );
function add_custom_fields_single_product(){
global $product;
echo '<div>
<label>'.__('Color').': </label><br>
<input type="text" name="FieldTypeValue1" value="" required>
</div><br>';
echo '<div>
<label>'.__('Texto 1').': </label><br>
<input type="text" name="FieldTypeValue2" value="" required>
</div><br>';
echo '<div>
<label>'.__('Texto 2').': </label><br>
<input type="text" name="FieldTypeValue3" value="" required>
</div><br>';
}
Changing the following for testing purpose only (in the functions code):
$label1 = get_post_meta( $product_id, 'FieldName1', true );
$label2 = get_post_meta( $product_id, 'FieldName2', true );
$label3 = get_post_meta( $product_id, 'FieldName3', true );
by:
$label1 = __('Color');
$label2 = __('Texto 1');
$label3 = __('Texto 2');