WooCommerce – Display price in variation option name

First off, I’ve switched the typical Option dropdown to Radio Buttons using “WC Variations Radio Buttons” by 8manos. I’ve added the below code to my child themes function.php. 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. This image shows what I want. At the moment, the variation name in each of the four radio options is ‘red’.

Sorry I can’t post the website as I am using MAMP/local.

  • Ignore “Color” variation. Just need to modify the “Tab” variation.

IMAGE: This is what I want – different colours for each “Option”

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

Read more here: WooCommerce – Display price in variation option name

Leave a Reply

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