Ersetzen WooCommerce-Attribut-Etiketten durch ein benutzerdefiniertes Bild für jede

Question

Ich arbeite am Projekt und ich brauche einige Gruppen Hilfe.

Ich verwende Woocommerce-Produkt-System und auf Shop-Archiv Seite Produkt Ich zeige Attribut-Label: Attribut-Wert (genau wie Text).

Attribut-label: Attribut-Wert (. Ex Getriebe: Schaltgetriebe)

Gibt es eine Möglichkeit Attribut-Label als Bild zu zeigen? Ich kann HTML-Code wie <img src..."/> nicht hinzufügen und Styling mit CSS hilft auch nicht.

Ich habe nach Plugins und mehr gesucht .. Aber nichts im Web.

Um Attribute auf Produkt-Shop Seite zeige ich diese Funktion verwendet haben:

function isa_woocommerce_all_pa(){ 


    global $product; 
    $attributes = $product->get_attributes(); 

    if (! $attributes) { 
     return; 
    } 

    $out = '<ul class="custom-attributes">'; 

    foreach ($attributes as $attribute) { 


     // skip variations 
     if ($attribute->get_variation()) { 
     continue; 
     } 
     $name = $attribute->get_name(); 
     if ($attribute->is_taxonomy()) { 

      $terms = wp_get_post_terms($product->get_id(), $name, 'all'); 
      // get the taxonomy 
      $tax = $terms[0]->taxonomy; 
      // get the tax object 
      $tax_object = get_taxonomy($tax); 
      // get tax label 
      if (isset ($tax_object->labels->singular_name)) { 
       $tax_label = $tax_object->labels->singular_name; 
      } elseif (isset($tax_object->label)) { 
       $tax_label = $tax_object->label; 
       // Trim label prefix since WC 3.0 
       if (0 === strpos($tax_label, 'Product ')) { 
        $tax_label = substr($tax_label, 8); 
       }     
      } 


      $out .= '<li class="' . esc_attr($name) . '">'; 
      $out .= '<span class="attribute-label">' . esc_html($tax_label) . ': </span> '; 
      $out .= '<span class="attribute-value">'; 
      $tax_terms = array(); 
      foreach ($terms as $term) { 
       $single_term = esc_html($term->name); 
       // Insert extra code here if you want to show terms as links. 
       array_push($tax_terms, $single_term); 
      } 
      $out .= implode(', ', $tax_terms); 
      $out .= '</span></li>'; 

     } else { 
      $value_string = implode(', ', $attribute->get_options()); 
      $out .= '<li class="' . sanitize_title($name) . ' ' . sanitize_title($value_string) . '">'; 
      $out .= '<span class="attribute-label">' . $name . ': </span> '; 
      $out .= '<span class="attribute-value">' . esc_html($value_string) . '</span></li>'; 
     } 
    } 

    $out .= '</ul>'; 

    echo $out; 
} 
add_action('woocommerce_single_product_summary', 'isa_woocommerce_all_pa', 25); 

jemand mir dabei helfen? Wie ändere ich Attribut-Label mit Bild?

Answer 1

seit WC 3.2+

Aktualisiert

Als Produkt Attribute nicht haben Bilder, sollten Sie ein in Ihrem aktiven Thema images (wenn es nicht vorhanden ist) und in einem Unterordner erstellen Sie einen Ordner attributes.

Für jedes Produkt Attribut, werden Sie ein Bild in diesem Unterordner attributes hinzufügen müssen, der Name der Name Ihres Attribut sein wird (die Schnecke). Zum Beispiel für das Attribut "Farbe" müssen Sie ein Bild mit dem Namen color.jpg hinzufügen.

Dann habe ich einige Änderungen in Ihrem Code vorgenommen, damit das funktioniert. Nur die für jedes Attribut im Produkt festgelegten Begriffe werden angezeigt. Für jedes Attribut erhalten Sie ein Bild. Hier

ist der Code:

add_action('woocommerce_single_product_summary', 'isa_woocommerce_all_pa', 25); 
function isa_woocommerce_all_pa(){ 
    global $product; 

    $attributes = $product->get_attributes(); 

    if (! $attributes) return; 

    $out = '<ul class="custom-attributes">'; 

    foreach ($attributes as $attribute) { 

     if ($attribute->get_variation()) continue; // skip variations 

     if ($attribute->is_taxonomy()) { 
      $taxonomy = $attribute->get_name(); 
      $taxo_obj = $attribute->get_taxonomy_object(); 
      $name = $taxo_obj->attribute_name; // <== Corrected 
      $label = $taxo_obj->attribute_label; // <== Corrected 

      $out .= '<li class="' . esc_attr($taxonomy) . '">'; 

      ## ATTRIBUTE IMAGE ## 
      // For a child theme use get_stylesheet_directory_uri() instead. 
      $out .= '<img class="attribute-image" src="'.get_template_directory_uri().'/images/attributes/'.$name.'.jpg" alt="Attribute '.$label.'"/> '; 
      $out .= '<span class="attribute-values">'; 

      $terms = wp_get_post_terms($product->get_id(), $taxonomy, array('fields' => 'names')); 

      foreach ($terms as $term_name) 
       $term_names['name'] = $term_name; 

      $out .= implode(', ', $term_names); 
      $out .= '</span></li>'; 

     } else { 
      $value_string = implode(', ', $attribute->get_options()); 
      $out .= '<li class="' . sanitize_title($taxonomy) . ' ' . sanitize_title($value_string) . '">'; 
      $out .= '<span class="attribute-label">' . $taxonomy . ': </span> '; 
      $out .= '<span class="attribute-value">' . esc_html($value_string) . '</span></li>'; 
     } 
    } 
    $out .= '</ul>'; 

    echo $out; 
} 

-Code geht in function.php Datei Ihres aktiven Kind Thema (oder Thema) oder auch in jeder Plugin-Datei.

Dieser Code ist getestet und funktioniert.