在 WooCommerce 中，我使用 WC Variations Radio Buttons插件 (由 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”变体即可。

目前，四个单选选项中每个选项的变体名称都是“红色”，我希望每个选项都有不同的颜色。

要实现这一目标，我必须更改代码中的哪些内容？

谢谢

最佳答案

2021 年更新

这是您重新访问的代码，它将仅显示在“Tab”属性单选按钮自定义显示的文本a <span> 周围 标签具有不同的类值，基于属性 slug 和 $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>

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

这只是一个例子

关于php - 可变产品属性 : Customizing each displayed radio buttons text value，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43435329/