Hide displayed variation cutom fields data when empty in Woocommerce

Question

I add custom fields to product variations (thanks to this post)

I add this code in wp-content hemes\my_theme\woocommerce\single-product\add-to-cart\product-attributes.php template:





    
        
        Caratteristiche tecniche
        
        

            
                 $product_attribute ) : ?>
                        
                    
                    
                            
                            
                        
                    

                
            


            
                

                    

                
            



            
                (i) Scarica la scheda tecnica
            


            
                Richiedi informazioni

                Assistenza Clienti
                
                    ORARI

                    Dal Lunedì al Venerdì

                    8:00 / 13:00 - 14:00 / 17:00
                

                    (i) assistenza@grafoplast.it
                     
                    (i) +39 0131 718477
                
            

        

    






     apply_filters( 'woocommerce_quantity_input_min', $product->get_min_purchase_quantity(), $product ),
            'max_value'   => apply_filters( 'woocommerce_quantity_input_max', $product->get_max_purchase_quantity(), $product ),
            'input_value' => isset( $_POST['quantity'] ) ? wc_stock_amount( wp_unslash( $_POST['quantity'] ) ) : $product->get_min_purchase_quantity(), // WPCS: CSRF ok, input var ok.
        )
    );
    ?>
    
        Disponibilità immediata
        I costi di spedizione sono esclusi

This works very well!

In the code above I add many rows. Each line corresponds to a new custom field. To simplify, in this post I paste only one row with only one custom field. The code below is the part of table to hide ...if custom field is empty.


   My Field Label
   
      {{{ data.variation.my_field }}}

If {{{ data.variation.my_field }}} is empty, Woocommerce shows the row. I've many custom fields in product variations (see attachment) so I try to show only the rows with a value.

I would like to hide the row if {{{ data.variation.my_field }}} is empty.

I tried this but it does not work:

{{{ #if data.variation.my_field }}}

   
      My Field
      
         {{{ data.variation.my_field }}}
      
   

{{{/if }}}

How to Add Custom Fields to Product Variations (this part works)

Now I write you all the code that I used to add custom field to product variations. I don't know if it can help you to solve the problem ;)

To add custom field for variations I wrote this in function.php.

I create new custom field for variations (here called "My Field"):

function my_field_settings( $loop, $variation_data, $variation ) {
    woocommerce_wp_text_input(
        array(
            'id'            => "my_field{$loop}",
            'label'         => __( 'My Field', 'woocommerce' ),
            'name'          => "my_field[{$loop}]",
            'value'         => get_post_meta( $variation->ID, 'my_field', true ),
            'wrapper_class' => 'form-row form-row-33',
        )
    );
}
add_action( 'woocommerce_product_after_variable_attributes', 'my_field_settings', 10, 3 );

After, I save the new custom field:

function my_field_save( $variation_id, $loop ) {
   $text_field = $_POST['my_field'][ $loop ];
   update_post_meta( $variation_id, 'my_field', esc_attr( $text_field ));
}
add_action( 'woocommerce_save_product_variation', 'my_field_save', 10, 2 );

At the end I add my new custom field:

function my_field_load( $variation ) {     
    $variation['my_field'] = get_post_meta( $variation[ 'variation_id' ], 'my_field', true );
    return $variation;
}
add_filter( 'woocommerce_available_variation', 'my_field_load' );

LoicTheAztec · Accepted Answer

I have revisited all your code, using WooCommerce CRUD Methods and latest WooCommerce hooks.

I have added some jQuery code to allow showing or hiding the "Diametro nominale" display.

I have shortened the code on the template...

Here is that code:

function add_admin_variation_custom_fields( $loop, $variation_data, $variation ) {
    $variation_object = wc_get_product($variation->ID);

    woocommerce_wp_text_input( array(
        'id'            => "diametro_nominale_{$loop}",
        'label'         => __( 'Diametro nominale', 'woocommerce' ),
        'value'         => $variation_object->get_meta('diametro_nominale'),
        'wrapper_class' => 'form-row form-row-33',
    ) );
}
add_action( 'woocommerce_product_after_variable_attributes', 'add_admin_variation_custom_fields', 10, 3 );


function save_admin_variation_custom_fields( $variation, $i ) {
    if ( isset($_POST['diametro_nominale_'.$i]) ) {
        $variation->update_meta_data('diametro_nominale', sanitize_text_field($_POST['diametro_nominale_'.$i]));
    }
 }
 add_action( 'woocommerce_admin_process_variation_object', 'save_admin_variation_custom_fields', 10, 2 );


function display_variation_custom_field_values( $variation_data, $product, $variation ) {   
    $diametro_nominale = $variation->get_meta('diametro_nominale');
    $variation_data['diametro_nominale'] = empty($diametro_nominale) ? 0 : $diametro_nominale;

    return $variation_data;
}
add_filter( 'woocommerce_available_variation', 'display_variation_custom_field_values', 10, 3 );


function variation_custom_fields_js() {   
    ?>


Code goes in functions.php file of your child theme (or in a plugin).
And the shortened code for single-product/product-attributes.php template file:
?>
 $product_attribute ) : ?>
        
    
            
            
        
    


    
        
    


Tested and works.

Hide displayed variation cutom fields data when empty in Woocommerce

Answers (1)

Related Questions