因此，您將這個特定的單選按鈕定位為顯示自定義文本的 CSS 規則如下:

span.pa_tab-price {字體系列:拉托，無襯線；字體大小:中等；}span.pa_tab-option-blue, span.pa_tab-option-green,span.pa_tab-option-purple, span.pa_tab-option-orange {字體系列:拉托，無襯線；字體大小:中等；字體樣式:正常；字體粗細:300；}span.pa_tab-option-blue {顏色:藍色；}span.pa_tab-option-green {顏色:綠色；}span.pa_tab-option-purple {顏色:紫色；}span.pa_tab-option-orange {顏色為橙色;}

這只是一個例子

In WooCommerce I am using WC Variations Radio Buttons plugin (by 8manos) to replace the typical dropdown selectors with Radio Buttons.

I've added the below code to my child themes 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;
}

I've been able to style all four variation names just to see if it was possible. Although, I need each of them to be 4 different colours. That's where I can use some help.

The image below shows what I want (different colours for each "Option"):
Ignore "Color" variation. Just need to modify the "Tab" variation.

For the moment, the variation name in each of the four radio options is 'red', and I would like a different color for each.

What do I have to change in my code, to achieve that?

Thanks

2021 Update

Here is your revisited code that will display only around the "Tab" attribute radio buttons custom displayed text a <span> tag with a different class value based on a combination of the attribute slug and the $term_slug.

So you will be able to apply some CSS style colors to each radio button displayed custom text for the 'pa_tab' attribute only, adding those CSS rules to your active theme style.css…

Here is that revisited code:

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

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

This code is tested and works.

The generated html code is something like this:

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

This is just an example

這篇關于可變產品屬性:自定義每個顯示的單選按鈕文本值的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！