I have this code where I need to insert a value based on a condition in: **///////// HERE THE MY CODE /////////**

Here I have overridden single-product/add-to-cart/variation.php Woomerce template file via my active theme:

<script type="text/template" id="tmpl-variation-template">
<div class="woomerce-variation-description">
{{{ data.variation.variation_description }}}
</div>
 
<div class="woomerce-variation-price">
{{{ data.variation.price_html }}}
</div>
 
<div class="woomerce-variation-custom_field">
{{{ data.variation.custom_field}}}
///////// HERE MY CODE /////////
</div>
 
<div class="woomerce-variation-availability">
{{{ data.variation.availability_html }}}
</div>
</script>

The condition should check the value of the variable `{{{ data.variation.custom_field}}}` and if this data is greater than 10 then the code should print "Yes". 

**Something like**: 

    if( $data.variation.custom_field > 10 ){ 
        echo "yes";
    }

But it's not working. I guess, this should be done using Javascript instead of php but I don't know how grab the variable value.

I have this code where I need to insert a value based on a condition in: **///////// HERE THE MY CODE /////////**

Here I have overridden single-product/add-to-cart/variation.php Woomerce template file via my active theme:

<script type="text/template" id="tmpl-variation-template">
<div class="woomerce-variation-description">
{{{ data.variation.variation_description }}}
</div>
 
<div class="woomerce-variation-price">
{{{ data.variation.price_html }}}
</div>
 
<div class="woomerce-variation-custom_field">
{{{ data.variation.custom_field}}}
///////// HERE MY CODE /////////
</div>
 
<div class="woomerce-variation-availability">
{{{ data.variation.availability_html }}}
</div>
</script>

The condition should check the value of the variable `{{{ data.variation.custom_field}}}` and if this data is greater than 10 then the code should print "Yes". 

**Something like**: 

    if( $data.variation.custom_field > 10 ){ 
        echo "yes";
    }

But it's not working. I guess, this should be done using Javascript instead of php but I don't know how grab the variable value.

• javascript
• php
• templates
• woomerce
• product-variations

• What template system are you using here? It's not tagged. – tadman Commented Mar 24, 2021 at 11:48
• data.variation.custom_field might be the correct notation to access such a nested variable inside whatever templating language is used here - but it surely is not the correct way to access it in plain PHP. The dot . is the concatenation operator on that level. – C3roe Commented Mar 24, 2021 at 11:48
• I have never seen native WooCommerce template files use that kind of templating syntax. Pretty sure there must be some additional ponent at play here. – C3roe Commented Mar 24, 2021 at 12:03
• 1 Okay, so it is supposed to be this file then, github./woomerce/woomerce/blob/release/5.0/templates/… ? That would mean these are templates to be used by the underscore library on the client then, codex.wordpress/Javascript_Reference/wp.template Not sure if the data is even available to PHP then, directly in that template file. (You can try and do a var_dump($data);, to see if a variable by that name exists in that context.) – C3roe Commented Mar 24, 2021 at 12:09
• 1 Might make more sense to do this in underscorejs then. stackoverflow./questions/7230470/… – C3roe Commented Mar 24, 2021 at 12:11

2 Answers 2

There is no need to use additional javascript (or jQuery) code for that.

The following will handle a product variation custom field displaying "YES" if the custom field value is bigger than 10 (otherwise nothing).

You will need to replace your exiting hooked function that use woomerce_available_variation hook, with one of the following ways.

There are mainly 2 ways:

1). The simplest way, without overriding variation.php template:

// Frontend: Handle Conditional display and include custom field value on product variation
add_filter( 'woomerce_available_variation', 'variation_data_custom_field_conditional_display', 10, 3 );
function variation_data_custom_field_conditional_display( $data, $product, $variation ) {
    // Get custom field value and set it in the variation data array (not for display)
    $data['custom_field'] = $variation->get_meta('custom_field');
    
    // Defined custom field conditional display
    $displayed_value = $data['custom_field'] > 10 ? 'YES' : '';

    // Frontend variation: Display value below formatted price
    $data['price_html'] .= '</div>' . $displayed_value . '
    <div class="woomerce-variation-custom_field_html">';

    return $data;
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.

2). Another simple way (overriding variation.php template):

// Frontend: Handle Conditional display and include custom field value on product variation
add_filter( 'woomerce_available_variation', 'variation_data_custom_field_conditional_display', 10, 3 );
function variation_data_custom_field_conditional_display( $data, $product, $variation ) {
    // Get custom field value and set it in the variation data array (not for display)
    $data['custom_field'] = $variation->get_meta('custom_field');

    // Frontend display: Define custom field conditional display
    $data['custom_field_html'] = $data['custom_field'] > 10 ? "YES" : "";

    return $data;
}

Code goes in functions.php file of the active child theme (or active theme).

Then in your custom template single-product/add-to-cart/variation.php you will replace:

{{{ data.variation.custom_field}}}

with:

{{{ data.variation.custom_field_html }}}

It will work nicely without any additional requirements.

Here is a plete code example for the munity, based on the 2nd Way:

1). Admin variations: Display a custom field and save it's value

// Admin: Add a custom field in product variations options pricing
add_action( 'woomerce_variation_options_pricing', 'add_admin_variation_custom_field', 10, 3 );
function add_admin_variation_custom_field( $loop, $variation_data, $variation ){

   woomerce_wp_text_input( array(
        'id'          => 'custom_field['.$loop.']',
        'label'       => __('Custom Field', 'woomerce' ),
        'placeholder' => __('Enter Custom Field value here', 'woomerce' ),
        'desc_tip'    => true,
        'description' => __('This field is for … (explanation / description).', 'woomerce' ),
        'value'       => get_post_meta( $variation->ID, 'custom_field', true )
    ) );
}

// Admin: Save custom field value from product variations options pricing
add_action( 'woomerce_save_product_variation', 'save_admin_variation_custom_field', 10, 2 );
function save_admin_variation_custom_field( $variation_id, $i ){
    if( isset($_POST['custom_field'][$i]) ){
        update_post_meta( $variation_id, 'custom_field', sanitize_text_field($_POST['custom_field'][$i]) );
    }
}

Code goes in functions.php file of the active child theme (or active theme).

2). Frontend variations: Conditional display based on selected variation and custom field value

// Frontend: Handle Conditional display and include custom field value on product variation
add_filter( 'woomerce_available_variation', 'variation_data_custom_field_conditional_display', 10, 3 );
function variation_data_custom_field_conditional_display( $data, $product, $variation ) {
    // Get custom field value and set it in the variation data array (not for display)
    $data['custom_field'] = $variation->get_meta('custom_field');
    
    // Frontend display: Define custom field conditional display
    $data['custom_field_html'] = $data['custom_field'] > 10 ? __("YES", "woomerce") : "";
    
    return $data;
}

Code goes in functions.php file of the active child theme (or active theme).

3). Template override: single-product/add-to-cart/variation.php file to your active theme's:

<?php
/**
 * Single variation display
 *
 * This is a javascript-based template for single variations (see https://codex.wordpress/Javascript_Reference/wp.template).
 * The values will be dynamically replaced after selecting attributes.
 *
 * @see https://docs.woomerce./document/template-structure/
 * @package WooCommerce/Templates
 * @version 2.5.0
 */

defined( 'ABSPATH' ) || exit;

?>
<script type="text/template" id="tmpl-variation-template">
    <div class="woomerce-variation-description">{{{ data.variation.variation_description }}}</div>
    <div class="woomerce-variation-price">{{{ data.variation.price_html }}}</div>
    <div class="woomerce-variation-custom_field">{{{ data.variation.custom_field_html}}}</div>
    <div class="woomerce-variation-availability">{{{ data.variation.availability_html }}}</div>
</script>
<script type="text/template" id="tmpl-unavailable-variation-template">
    <p><?php esc_html_e( 'Sorry, this product is unavailable. Please choose a different bination.', 'woomerce' ); ?></p>
</script>

Tested and works.

Related: WooCommerce: Add/display Product or Variation custom field everywhere

Based on https://codex.wordpress/Javascript_Reference/wp.template and similar template engine like https://github./blueimp/JavaScript-Templates#evaluation, you need to build a template with evaluation.

In your case, it should be something like:

<div class="woomerce-variation-custom_field">
  <#  if (data.variation.custom_field > 10) { #>
    yes
  <# } #>
</div>

Also, here https://lkwdwrd./wp-template-js-templates-wp you can find an example with if statement itself.