Variable product attribute: Customizing each displayed radio buttons text value

This is what I want - different colours for each "Option"

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

Read more here: Variable product attribute: Customizing each displayed radio buttons text value

Leave a Reply

Your email address will not be published. Required fields are marked *