Display the product attribute term for the selected variation in Woocommerce

Question

In Woocommerce, I use the following code to get the product attribute terms.

function action_woocommerce_product_meta_end() {
    global $product;

    $term_ids = wp_get_post_terms( $product->get_id(), 'pa_apple-id', array('fields' => 'ids') );

    echo get_the_term_list( $product->get_id(), 'pa_apple-id', '<span class="posted_in">' . _n( 'Vendor:', 'Vendors:', count( $term_ids ), 'woocommerce' ) . ' ', ', ', '</span>' );
}
add_action( 'woocommerce_product_meta_end', 'action_woocommerce_product_meta_end', 10, 0 );

But this is displaying all the terms:

Instead, I would like to display only the corresponding unique term for the product attribute pa_apple-id, when a variation is selected.

LoicTheAztec LoicTheAztec · Accepted Answer · 2019-02-16T12:17:14

2021 update:

The following answer is outdated and replaced by the following thread instead: Set and display a custom product variation value dynamically on WooCommerce single products

This is much more complicated as it's a live event on client side, so javascript/jQuery is required and some more code:

// Set the defined product attribute taxonomy
function vendor_defined_taxonomy() {
    // The targeted product attribute taxonomy
    return 'pa_apple-id'; 
}

// Display the vendors on product meta
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 ){
        $label = _n("Vendor:", "Vendors:", count($term_ids), "woocommerce");
        echo get_the_term_list( get_the_ID(), $taxonomy, '<span class="posted_in vendors">' . $label . ' ', ', ', '</span>' );
    }
}

// Display the selected variation vendor in a hidden imput field
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;
}

// Replace the vendors on product meta by the selected variation vendor
add_action('woocommerce_after_variations_form', '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 = '<?php _e("Vendor:", "woocommerce"); ?>';

        // Once DOM is loaded
        setTimeout(function() {
            if($(selected).val() != ''){
                $(vendorTarget).text(vendorLabel+' '+$(vendorVal).val());
            }
        }, 300 );

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

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

Display the product attribute term for the selected variation in Woocommerce

1 Answers