可变产品属性：自每个显示的单选按钮的文本值

Question

在WooCommerce我使用WC Variations Radio Buttons插件（由8manos）与单选按钮更换典型下拉选择器。

我已经添加下面的代码，我的孩子主题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”变体。

目前，在每四个无线电选项的变化的名字是“红”，我想不同的颜色为每个。

我需要在我的代码中更改哪些内容才能实现？

感谢

Answer 1

这是你重新审视代码，将显示仅围绕“选项卡”属性无线电自定义显示的文本<span>标签基于属性蛞蝓的组合不同的类值按钮和$term_slug。

所以，你将能够使用一些样式颜色应用于每个单选按钮显示自定义文本为“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; 
} 

这只是一个例子