wordpress - Display custom fileds in variations product page Woocommerce -
i've created 2 custom fields in variations 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 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 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 , displayed links . looking displaying these fields i'm having lot of troubles finding right solution.
can guide me? should focus on file "variable.php"? , js? or can render fields hooks?
thanks in advance!
the following code created works perfectly. new js , i'm sure can improved. hope helpful. create custom fields reads post of remi.
explanation: "wc_product variable" object can display custom fields of product variation,
to display these fields used jquery, contents of span "sku" our reference shown on product page. code in "variations.php" file.
<?php // "wc_product variable" object custom fields variations. $product_id = $product->id; $variation = new wc_product_variable( $product_id ); $arrvariations = $variation->get_children (); // foreach construct div contain custom fields foreach ($arrvariations $varid) { $cfvalone = get_post_meta( $varid, '_custom_field_one', true ); $cfvaltwo = get_post_meta( $varid, '_custom_field_two', true ); // check custom fields 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 div , embed sku of variation processed later js. ?> <div class="varskudiv" data-varskudiv="<? echo $varsku;?>" style="display:none;"> <?php if (!empty($cfonecont)) {?> <a href="<? echo $cfonecont;?>">custom field one</a> <?php } ?> <?php if (!empty($cftwocont)) {?> <a href="<? echo $cftwocont;?>">custom field two</a> <?php } ?> </div> <? }}?> <br/> <script> jquery(document).ready(function( $ ) { // take contents of span "sku" create js //we must consider span complete once screen loaded. $(window).bind("load", function() { woosku = $(".sku").text(); // map div created "varskudiv" , load values in array wooarrsku = $('div.varskudiv').map(function(){ return $(this).data('varskudiv'); }).get(); // make loop, if values match show div. var indexsku; (indexsku = 0; indexsku < wooarrsku.length; indexsku++) { if (woosku == wooarrsku[indexsku]) { $('.varskudiv[data-varskudiv="'+ woosku +'"]').css( "display", "inline-block" ); } } }); // once loaded screen, if span "sku" changes, start process again , hide previous div displayed. $('.sku').bind("domsubtreemodified",function(){ woosku = $(".sku").text(); wooarrsku = $('div.varskudiv').map(function(){ return $(this).data('varskudiv'); }).get(); var indexsku; (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>
Comments
Post a Comment