Handle WooCommerce selected variation custom field conditional display

Question

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 Woocommerce template file via my active theme:

<script type="text/template" id="tmpl-variation-template">
<div class="woocommerce-variation-description">
{{{ data.variation.variation_description }}}
</div>
 
<div class="woocommerce-variation-price">
{{{ data.variation.price_html }}}
</div>
 
<div class="woocommerce-variation-custom_field">
{{{ data.variation.custom_field}}}
///////// HERE MY CODE /////////
</div>
 
<div class="woocommerce-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.

`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. — CBroe, Mar 24 '21 at 11:48
I have never seen native WooCommerce template files use that kind of templating syntax. Pretty sure there must be some additional component at play here. — CBroe, Mar 24 '21 at 12:03
@CBroe yes, that's it. It is woocommerce. I just updated my question to include this information. — JPashs, Mar 24 '21 at 12:05
Okay, so it is supposed to be this file then, https://github.com/woocommerce/woocommerce/blob/release/5.0/templates/single-product/add-to-cart/variation.php ? That would mean these are templates to be used by the underscore library on the client then, https://codex.wordpress.org/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.) — CBroe, Mar 24 '21 at 12:09
Might make more sense to do this _in_ underscorejs then. https://stackoverflow.com/questions/7230470/how-to-use-if-statements-in-underscore-js-templates — CBroe, Mar 24 '21 at 12:11
Have you tried something like this https://github.com/blueimp/JavaScript-Templates#evaluation ? — Pavlo Zhukov, Mar 27 '21 at 12:15
@JPashs Javascript is not needed and you can even achieve that without overriding `variation.php` template file. — LoicTheAztec, Mar 30 '21 at 21:40

score 3 · Answer 1 · answered Mar 27 '21 at 12:27

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

In your case, it should be something like:

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

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

LoicTheAztec · Accepted Answer · 2021-03-28T21:25:55.960

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 woocommerce_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( 'woocommerce_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="woocommerce-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( 'woocommerce_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 complete code example for the community, 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( 'woocommerce_variation_options_pricing', 'add_admin_variation_custom_field', 10, 3 );
function add_admin_variation_custom_field( $loop, $variation_data, $variation ){

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

// Admin: Save custom field value from product variations options pricing
add_action( 'woocommerce_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( 'woocommerce_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", "woocommerce") : "";
    
    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.org/Javascript_Reference/wp.template).
 * The values will be dynamically replaced after selecting attributes.
 *
 * @see https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 2.5.0
 */

defined( 'ABSPATH' ) || exit;

?>
<script type="text/template" id="tmpl-variation-template">
    <div class="woocommerce-variation-description">{{{ data.variation.variation_description }}}</div>
    <div class="woocommerce-variation-price">{{{ data.variation.price_html }}}</div>
    <div class="woocommerce-variation-custom_field">{{{ data.variation.custom_field_html}}}</div>
    <div class="woocommerce-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 combination.', 'woocommerce' ); ?></p>
</script>

Tested and works.

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

Handle WooCommerce selected variation custom field conditional display

2 Answers2