attribut de produit variable: Personnalisation de chaque boutons radio valeur affichée texte

Question

En WooCommerce J'utilise WC Variations Radio Buttons plug-in (par 8manos) pour remplacer les sélecteurs de liste déroulante typique avec Boutons radio.

J'ai ajouté le code ci-dessous pour mes thèmes enfants 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; 
} 

Je suis en mesure de style les quatre noms de variation juste pour voir s'il était possible. Bien que, j'ai besoin que chacun d'eux soit 4 couleurs différentes. C'est là que je peux utiliser de l'aide.

L'image ci-dessous montre ce que je veux (différentes couleurs pour chaque "Option"):
Ignorer la variation "Couleur". Juste besoin de modifier la variation "Tab".

Pour le moment, le nom de variation dans chacune des quatre options de la radio est « rouge », et je voudrais une couleur différente pour chacun.

Que dois-je changer dans mon code pour y arriver?

Merci

Answer 1

Voici votre code revisité qui affiche seulement autour des boutons radio d'attributs « onglet » texte affiché sur commande une étiquette <span> avec une valeur de classe différente basée sur une combinaison de la limace d'attribut et le $term_slug.

Vous pourrez appliquer des couleurs de style CSS à chaque bouton radio affiche un texte personnalisé pour l'attribut « pa_tab » uniquement, l'ajout de ces règles CSS à votre thème actif style.css ...

Voici ce code revisité:

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

} 

code va dans le fichier function.php de votre thème enfant actif (ou le thème) ou encore dans un fichier de plug-in.

Ce code a été testé et fonctionne.

Le code HTML généré est quelque chose comme ceci:

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

---

donc vous ciblez ces boutons radio spécifiques affichés texte personnalisé avec les règles CSS quelque chose comme:

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

Ceci est juste un exemple