Attribute Variable Attribute: Configure each displayed text value of the radio buttons

Question

In WooCommerce, I use the plug-in for WC Variations converters (from 8manos) to replace typical drop-down selectors with a radio button .

I have added the code below to my child function.php themes:

 // 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 managed to create all four option names to see if this was possible. Although, I need each of them to represent 4 different colors. . Where I can use some help.

The image below shows what I want (different colors for each option):
Ignore the "Color" variation. Just need to change the tab.

At the moment, the name of the variation in each of the four parameters of the radio is “red”, and for each of them I need a different color.

What do I need to change in my code to achieve this?

thanks

Answer 1

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

This way, you can apply some CSS style colors to each switch that displays its own text for the pa_tab attribute only by adding these CSS rules to your active style.css theme ...

Here is what the revised code is:

 // 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'; if ( empty( $term ) || 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 = wc_get_product( $variation_id[0] ); 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; } 

The code goes in the function.php file of your active child theme (or theme), as well as in any plug-in file.

This code has been verified and works.

The generated html code looks 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 specific radio buttons by displaying your own text with CSS rules, for example:

 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.