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

Question

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 1

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.