В 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; }
Это просто пример