Variable product attribute: Customizing each displayed radio buttons text value

2021 Update

Here is your revisited code that will display only around the "Tab" attribute radio buttons custom displayed text a <span> tag with a different class value based on a combination of the attribute slug and the $term_slug.

So you will be able to apply some CSS style colors to each radio button displayed custom text for the 'pa_tab' attribute only, adding those CSS rules to your active theme style.css…

Here is that revisited code:

// Custom function that get the variation id from product attribute option namefunction get_variation_id_from_option_name( $term_slug, $taxonomy, $product_id ) {    global $wpdb;    return $wpdb->get_var( $wpdb->prepare( "        SELECT pm.post_id        FROM {$wpdb->prefix}postmeta pm        LEFT JOIN {$wpdb->prefix}posts p ON pm.post_id = p.ID        WHERE pm.meta_key LIKE '%s'        AND pm.meta_value = '%s'        AND p.post_parent = %d    ", 'attribute_' . $taxonomy, $term_slug, $product_id ) );}// Display the product variation price inside the variations dropdown.add_filter( 'woocommerce_variation_option_name', 'display_price_in_variation_option_name' );function display_price_in_variation_option_name( $option_name ) {    global $product;    $taxonomy = 'pa_tab'; // HERE Define the targetted product attribute taxonomy pa_color        $term     = get_term_by( 'name', $option_name, $taxonomy );    if ( is_admin() || ! is_a( $term, 'WP_Term' ) || ! is_a( $product, 'WC_Product' ) ) {        return $option_name;    }    $variation_id = get_variation_id_from_option_name( $term->slug, $taxonomy, $product->get_id() );    if ( $variation_id > 0 ) {        $variation  = wc_get_product( $variation_id );        $price_html = wc_price( wc_get_price_to_display( $variation ) );        if ( has_term( $option_name, $taxonomy, $product->get_id() ) ) {            $output = ' <span class="'.$taxonomy.'-price">' . strip_tags( $price_html ) . '</span><span class="'.$taxonomy.'-'.$term->slug.'"> - ('.$option_name.')</span>';        } else {            $output = ' ' . $option_name;        }        return $output;    }    return $option_name;}

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

This code is tested and works.

The generated html code is something like this:

<td class="value">    <div>        <input type="radio" name="attribute_pa_color" value="option-blue" id="pa_tab_v_option-blue">        <label for="pa_tab_v_option-blue">             <span class="pa_tab-price">$99.00</span>            <span class="pa_tab-option-blue"> - (Option Blue)</span>        </label>    </div>    <div>        <input type="radio" name="attribute_pa_color" value="option-green" id="pa_tab_v_option-green">        <label for="pa_tab_v_option-green">             <span class="pa_tab-price">$299.00</span>            <span class="pa_tab-option-green"> - (Option Green)</span>        </label>    </div>    <!-- ... / ... ... -->                      </td>

So you target this specific radio buttons displayed custom text with CSS rules something like:

span.pa_tab-price {    font-family: lato, sans-serif;     font-size: medium;}span.pa_tab-option-blue, span.pa_tab-option-green,span.pa_tab-option-purple, span.pa_tab-option-orange {    font-family: lato, sans-serif;     font-size: medium;    font-style: normal;    font-weight: 300;}span.pa_tab-option-blue {    color: blue;}span.pa_tab-option-green {    color: green;}span.pa_tab-option-purple {    color: purple;}span.pa_tab-option-orange {    color: orange;}

This is just an example