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

В WooCommerce я использую плагин Radio Buttons для WC Variations (by 8manos), чтобы заменить типичные селектора выпадающих списков с помощью кнопок Radio Buttons .

Я добавил приведенный ниже код к моим дочерним темам function.php :

 // 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( $term ) { global $wpdb, $product; if ( empty( $term ) ) return $term; if ( empty( $product->id ) ) return $term; $result = $wpdb->get_col( "SELECT slug FROM {$wpdb->prefix}terms WHERE name = '$term'" ); $term_slug = ( !empty( $result ) ) ? $result[0] : $term; $query = "SELECT postmeta.post_id AS product_id FROM {$wpdb->prefix}postmeta AS postmeta LEFT JOIN {$wpdb->prefix}posts AS products ON ( products.ID = postmeta.post_id ) WHERE postmeta.meta_key LIKE 'attribute_%' AND postmeta.meta_value = '$term_slug' AND products.post_parent = $product->id"; $variation_id = $wpdb->get_col( $query ); $parent = wp_get_post_parent_id( $variation_id[0] ); if ( $parent > 0 ) { $_product = new WC_Product_Variation( $variation_id[0] ); return '' ."<font size='3' face='Lato'>". wp_kses( woocommerce_price( $_product->get_price() ), array() ) . "<font size='3' color='red' face='Lato' style='normal' weight='300'>".' - ('.$term.')'; } return $term; } 

Мне удалось создать все четыре названия вариантов, чтобы увидеть, возможно ли это. Хотя, мне нужно, чтобы каждый из них был 4 разных цвета. Вот где я могу воспользоваться помощью.

На изображении ниже показано, что я хочу (разные цвета для каждого параметра):
Игнорировать вариацию «Цвет». Просто нужно изменить вариант «Tab». Это то, что я хочу - разные цвета для каждого «варианта»,

На данный момент имя вариации в каждом из четырех параметров радио является «красным», и для каждого из них я хотел бы иметь другой цвет.

Что мне нужно изменить в моем коде, чтобы добиться этого?

благодаря

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

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

Вот что пересмотренный код:

 // Display the product variation price inside the variations dropdown. add_filter( 'woocommerce_variation_option_name', 'display_price_in_variation_option_name', 10, 1 ); function display_price_in_variation_option_name( $term ) { global $wpdb, $product; // Define HERE the targetted attribute taxonomy slug $tax_slug = 'pa_tab'; if ( empty( $term ) || empty( $product->id ) ) return $term; $result = $wpdb->get_col( "SELECT slug FROM {$wpdb->prefix}terms WHERE name = '$term'" ); $term_slug = ( !empty( $result ) ) ? $result[0] : $term; $query = "SELECT postmeta.post_id AS product_id FROM {$wpdb->prefix}postmeta AS postmeta LEFT JOIN {$wpdb->prefix}posts AS products ON ( products.ID = postmeta.post_id ) WHERE postmeta.meta_key LIKE 'attribute_%' AND postmeta.meta_value = '$term_slug' AND products.post_parent = $product->id"; $variation_id = $wpdb->get_col( $query ); $parent = wp_get_post_parent_id( $variation_id[0] ); if ( $parent > 0 ) { $_product = wc_get_product( $variation_id[0] ); if ( has_term( $term, $tax_slug, $_product->id) ) $output = ' <span class="'.$tax_slug.'-price">' . wp_kses( woocommerce_price( $_product->get_price() ), array() ) . '</span><span class="' . $tax_slug . '-' . $term_slug . '"> - ('.$term.')</span>'; else $output = ' ' . $term; return $output; } return $term; } 

Код идет в файле 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; } 

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