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

在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”变体即可.

目前,四个无线电选项中每个选项的变体名称都是“红色”,我希望每个选项都有不同的颜色.

为了达到这个目的,我需要在代码中进行哪些更改？

谢谢

解决方法:

以下是您重新访问的代码,该代码仅显示“Tab”属性单选按钮自定义显示的文本a< 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';

    // compatibility with WC +3
    $product_id = method_exists( $product, 'get_id' ) ? $product->get_id() : $product->id;

    if ( empty( $term ) || empty( $product_id ) )
        return $term;

    $result = $wpdb->get_var( "SELECT slug FROM {$wpdb->prefix}terms WHERE name = '$term'" );

    $term_slug = ( ! empty( $result ) ) ? $result : $term;

    $variation_id = $wpdb->get_var( "
        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
    ");

    $parent = wp_get_post_parent_id( $variation_id );

    if ( $parent > 0 ) {

        $_product = wc_get_product( $variation_id );

        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>

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

这只是一个例子