Переменный атрибут продукта: настройка каждого отображаемого текстового значения переключателей

Обновление 2021 года

Вот ваш обновленный код, который будет отображать только вокруг переключателей атрибута Tab настраиваемый отображаемый текст тега <span> с другим значением класса на основе комбинации заголовка атрибута и $term_slug.

Таким образом, вы сможете применить некоторые цвета стиля CSS к каждому отображаемому переключателю настраиваемому тексту только для атрибута 'pa_tab', добавив эти правила CSS к вашей активной теме style.css…

Вот этот обновленный код:

// Custom function that get the variation id from product attribute option name
function 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;
}

Код находится в файле function.php вашей активной дочерней темы (или темы) или также в любом файле плагина.

Этот код протестирован и работает.

Сгенерированный html-код выглядит примерно так:

<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>

Таким образом, вы настраиваете этот конкретный переключатель, отображающий настраиваемый текст, с помощью правил CSS, например:

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;
}

Это просто пример