Atributo de producto variable: personalización de cada valor de texto de los botones de radio mostrados

En WooCommerce estoy usando el complemento WC Variations Radio Buttons (por 8manos) para reemplazar los típicos selectores desplegables con los botones de opción .

He agregado el siguiente código a mi hijo 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 '' ."". wp_kses( woocommerce_price( $_product->get_price() ), array() ) . "".' - ('.$term.')'; } return $term; } 

Pude peinar los cuatro nombres de variación solo para ver si era posible. Aunque, necesito que cada uno de ellos sea de 4 colores diferentes. Ahí es donde puedo usar algo de ayuda.

La imagen a continuación muestra lo que quiero (diferentes colores para cada “Opción”):
Ignora la variación de “Color”. Solo necesita modificar la variación “Tab”.

Por el momento, el nombre de la variación en cada una de las cuatro opciones de radio es ‘rojo’, y me gustaría un color diferente para cada una.

¿Qué tengo que cambiar en mi código para lograr eso?

Gracias

Aquí está el código revisado que mostrará solo alrededor de los botones de opción del botón “Tab” texto personalizado una etiqueta con un valor de clase diferente basado en una combinación del atributo slug y $term_slug .

Por lo tanto, podrá aplicar algunos colores de estilo CSS a cada botón de opción que se muestre en el texto personalizado para el atributo ‘pa_tab’ solamente, y agregará esas reglas CSS a su tema activo style.css

Aquí está el código revisitado:

 // 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 = ' ' . wp_kses( woocommerce_price( $_product->get_price() ), array() ) . ' - ('.$term.')'; else $output = ' ' . $term; return $output; } return $term; } 

El código va en el archivo function.php de su tema hijo activo (o tema) o también en cualquier archivo de complemento.

Este código está probado y funciona.

El código html generado es algo como esto:

  

Por lo tanto, apunte a estos botones de radio específicos que se muestran en texto personalizado con reglas CSS, como:

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

Esto es solo un ejemplo