Display custom fields in variations product page WooCommerce - wordpress

Question

I've created two custom fields in variations with the following code (Thanks Remi Corso):
functions.php
Add Variation Settings
add_action( 'woocommerce_product_after_variable_attributes', 'variation_settings_fields', 10, 3 );
Save Variation Settings
add_action( 'woocommerce_save_product_variation', 'save_variation_settings_fields', 10, 2 );
Create new fields for variations
function variation_settings_fields( $loop, $variation_data, $variation ) {
woocommerce_wp_text_input(
array(
'id' => '_pdf_ficha_tecnica[' . $variation->ID . ']',
'label' => __( 'PDF FICHA TÉCNICA', 'woocommerce' ),
'placeholder' => 'http://',
'desc_tip' => 'true',
'description' => __( 'aqui', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, '_pdf_ficha_tecnica', true )
)
);
woocommerce_wp_text_input(
array(
'id' => '_pdf_ficha_caracteristicas[' . $variation->ID . ']',
'label' => __( 'PDF FICHA CARACTERÍSTICAS', 'woocommerce' ),
'placeholder' => 'http://',
'desc_tip' => 'true',
'description' => __( 'aqui', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, '_pdf_ficha_caracteristicas', true )
)
);
}
Save new fields for variations
function save_variation_settings_fields( $post_id ) {
$text_field = $_POST['_pdf_ficha_tecnica'][ $post_id ];
if( ! empty( $text_field ) ) {
update_post_meta( $post_id, '_pdf_ficha_tecnica', esc_attr( $text_field ) );
}
$text_field = $_POST['_pdf_ficha_caracteristicas'][ $post_id ];
if( ! empty( $text_field ) ) {
update_post_meta( $post_id, '_pdf_ficha_caracteristicas', esc_attr( $text_field ) );
}
}
These custom fields store URLs and will be displayed as links <a href>. I looking to display these fields but I'm having a lot of trouble finding the right solution.
Can anyone guide me?
Should I focus on file "variable.php"?
And the JS?
Or can I render the fields by hooks?

Answer 1

The following code I created works perfectly. I am new to JS and I'm sure can be improved. I hope that will be helpful. To create Custom Fields reads the post of REMI.
Explanation: With "WC_Product Variable" object can display the Custom Fields of product variation,
To display these fields I used jquery, the contents of the span "sku" will be our reference as shown on the product page. This code in the "variations.php" file.
<?php
// With "WC_Product Variable" object I get the Custom Fields variations.
$product_id = $product->id;
$variation = new WC_Product_Variable( $product_id );
$arrvariations = $variation->get_children ();
// With foreach construct the div that will contain the Custom Fields
foreach ($arrvariations as $varid) {
$cfvalone = get_post_meta( $varid, '_custom_field_one', true );
$cfvaltwo = get_post_meta( $varid, '_custom_field_two', true );
// Check the Custom Fields are not empty
if (!empty($cfvalone) or !empty($cfvaltwo) ) {
$cfonecont = get_post_meta( $varid, '_custom_field_one', true );
$cftwocont = get_post_meta( $varid, '_custom_field_two', true );
$varsku = get_post_meta( $varid, '_sku', true );
// Built the DIV and embed SKU of the variation to be processed later by JS.
?>
<div class="varskudiv" data-varskudiv="<? echo $varsku;?>" style="display:none;">
<?php if (!empty($cfonecont)) {?>
CUSTOM FIELD ONE
<?php } ?>
<?php if (!empty($cftwocont)) {?>
CUSTOM FIELD TWO
<?php } ?>
</div>
<? }}?>
<br/>
<script>
jQuery(document).ready(function( $ ) {
// As we will take the contents of SPAN "sku" to create the JS
//we must consider that this SPAN is complete once the screen is loaded.
$(window).bind("load", function() {
woosku = $(".sku").text();
// Now we map the DIV we created "varskudiv" and load those values in an ARRAY
wooarrsku = $('div.varskudiv').map(function(){
return $(this).data('varskudiv');
}).get();
// Now we make loop, if the values match show the DIV.
var indexsku;
for (indexsku = 0; indexsku < wooarrsku.length; indexsku++) {
if (woosku == wooarrsku[indexsku]) {
$('.varskudiv[data-varskudiv="'+ woosku +'"]').css( "display", "inline-block" );
}
}
});
// Once loaded the screen, if the SPAN "sku" changes, start the process again and hide the previous DIV displayed.
$('.sku').bind("DOMSubtreeModified",function(){
woosku = $(".sku").text();
wooarrsku = $('div.varskudiv').map(function(){
return $(this).data('varskudiv');
}).get();
var indexsku;
for (indexsku = 0; indexsku < wooarrsku.length; indexsku++) {
if (woosku == wooarrsku[indexsku]) {
$('.varskudiv[data-varskudiv="'+ woosku +'"]').css( "display", "inline-block" );
}
else {$('.varskudiv[data-varskudiv="'+ wooarrsku[indexsku] +'"]').css( "display", "none" );
}
}
});
});
</script>