Afficher fileds personnalisés dans les variations Page produit WooCommerce

Question

J'ai créé deux champs personnalisés dans les variations avec le code suivant (Merci Remi Corso):

functions.php

Ajouter Variation Paramètres

add_action('woocommerce_product_after_variable_attributes', 'variation_settings_fields', 10, 3); 

Enregistrer les paramètres de variante

add_action('woocommerce_save_product_variation', 'save_variation_settings_fields', 10, 2); 

Créer de nouveaux champs pour v ariations

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) 
     ) 
    ); 
} 

Enregistrer de nouveaux champs pour les 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)); 
    } 
} 

Ces champs personnalisés stocker les URL et seront affichées sous forme de liens. Je cherche à afficher ces champs mais j'ai beaucoup de problèmes pour trouver la bonne solution.

Quelqu'un peut-il me guider? Dois-je me concentrer sur le fichier "variable.php"? Et le JS? Ou je peux rendre les champs par des hameçons?

Merci d'avance!

Answer 1

Le code suivant que j'ai créé fonctionne parfaitement. Je suis nouveau à JS et je suis sûr que peut être amélioré. J'espère que cela sera utile. Pour créer des champs personnalisés lit le message de REMI.

Explication: Avec « WC_Product variable » objet peut afficher les champs personnalisés de variation du produit,

Pour afficher ces champs que j'ai utilisé jquery, le contenu de la durée « sku » sera notre référence comme indiqué sur le produit page. Ce code dans le fichier "variations.php".

<?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>