Set and display a custom product variation value dynamically on WooCommerce single products

I have a WooCommerce jewelry site. On single variable product page I have variations and I added a text box (text box is for the customer to write something that will be printed on the jewelry).

So I expect the page to work as follows: If the customer selects a particular product variation and starts typing in the textbox price of the product should change depending on number of letters (NOTE: this should only work if one specific variation is selected) on every other product price will be fixed.

I did manage to do the part for the textbox price update.

The issue I am having here is with the selection of specific product variation.

Based on Display the product attribute term for the selected variation in Woocommerce answer, I tried to solve this problem with the following code attempt:

function vendor_defined_taxonomy() {
    return 'Materijal'; 
}

add_action( 'woocommerce_product_meta_end', 'display_product_vendors', 10 );
function display_product_vendors() {
    $taxonomy = vendor_defined_taxonomy();
    $term_ids = wp_get_post_terms( get_the_ID(), $taxonomy, array('fields' => 
    'ids') );
    if( sizeof($term_ids) > 0 ){ 
        echo '<span class="posted_in vendors"></span>';
    }
}

add_filter( 'woocommerce_available_variation', 'selected_variation_vendor_value', 10, 3 );
function selected_variation_vendor_value( $data, $product, $variation ) {
    $taxonomy = vendor_defined_taxonomy();

    if( isset($data['attributes']['attribute_'.$taxonomy]) )
        $term = get_term_by( 'slug', $data['attributes']['attribute_'.$taxonomy], $taxonomy );

    if( isset($term) && is_a($term, 'WP_Term' ) )
        $data['variation_description'] .= '<input type="hidden" name="vendor- hidden" id="vendor-hidden" value="'.$term->name.'">';

    return $data;
}

add_action('woocommerce_before_add_to_cart_button', 'custom_product_jquery_script');
function custom_product_jquery_script() {
    global $product;

    $taxonomy     = vendor_defined_taxonomy();
    $terms_string = $product->get_attribute($taxonomy);

    if( ! empty($terms_string) ) :
    ?>
    <script type="text/javascript">
    jQuery(function($) {
        var form = 'form.variations_form',       
            selected = 'input[name="variation_id"]',
            vendorVal = 'input#vendor-hidden',
            vendorTarget = 'span.vendors',
            vendorHtml = $(vendorTarget).text(), 
            vendorLabel = '';

        // On variation select
        $(form).on( 'blur', 'select', function() {
            if($(selected).val() != ''){
                $(vendorTarget).text("");
                if($(vendorVal).val() == 'Zlato'){
                    //$(vendorTarget).text(vendorLabel+' 
                    '+$(vendorVal).val());
                    $(vendorTarget).text("here is your text");
                }
            } 
        });
    });
    </script>
    <?php
    endif;
}

But I can’t make it work to print the “Matrijal” product attribute selected name value under product meta section.

Product attribute name is “Matrijal” (and slug “mats”) … and for example a term name is “Zlato” (and slug “zlato”).

Any help?

Answer

You are making things more complicated that they should be…

Here is a lightweight and effective way to add specific selected variation custom value (from specific product attribute) to an additional html ” after single product meta.

You just need to define the correct product attribute taxonomy in the first function.

The code:

// Add custom variation data to variation form data
add_filter( 'woocommerce_available_variation', 'add_variation_vendor_value', 10, 3 );
function add_variation_vendor_value( $data, $product, $variation ) {
    // Here define the targeted taxonomy used in product variation
    $taxonomy  = 'pa_mats';

    $term_name = $variation->get_attribute($taxonomy);

    if( ! empty($term_name) ) {
        $data['vendor_value'] = $term_name;
    }
    return $data;
}

// Display after product meta an empty span html on variable products 
add_action( 'woocommerce_product_meta_end', 'display_product_vendors', 10 );
function display_product_vendors() {
    global $product;

    if ( $product->get_type() === 'variable' ) {
        echo '<span class="posted_in vendors"></span>';
    }
}

// Fill in our html "span" with specific text value from selected variation
add_action('woocommerce_after_variations_form', 'custom_product_variation_js');
function custom_product_variation_js() {
    ?>
    <script type="text/javascript">
    jQuery(function($) {
        var $form   = $('form.variations_form'),
            $vendor = $('span.vendors'),
            text    = $vendor.text();

        $form.on('show_variation', function(event, data){ // On selected variation
            if ( data.vendor_value ) {
                $vendor.text( data.vendor_value );
            }
        }).on('hide_variation', function(){ // Not on selected variation
            $vendor.text( text );
        });
    });
    </script>
    <?php
}

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

Tested and works on last WooCommerce version (4.9.2) on a variable product with a defined product attribute (for variations) taxonomy.

Remember that product attribute taxonomy always start with “pa_” + product attribute slug.