0

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 . I looking for displaying these fields but I'm having a lot of troubles for finding the right solution.

Can anyone guide me? Should I focus on file "variable.php"? And the JS? Or I can render the fields by hooks?

Thanks in advance!

4

1 回答 1

0

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)) {?>
            <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( $ ) {
    // 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>
于 2016-02-11T16:46:11.753 回答