) Hinzufügen von CSS-Klassen für Attribute

Question

Wie kann ich eine CSS-Klasse für das Produktattribut in Woocommerce hinzufügen? Zum Beispiel muss ich für jedes Attribut individuelle Icons anzeigen über: vor &: nach Pseudoelementen.

Vielen Dank im Voraus!

P.S. Sorry fot delay Ich dachte, dass Sie mit der Syntax von Woocommerce vertraut sind. Auch Woocommerce verwendet Aktionen & Haken, um einige Informationen anzuzeigen. Zum Beispiel um Attribute auf der Produktseite anzuzeigen. Ich möchte Woocommerce-Produktattribute mit individuellen Symbolen anzeigen. Jetzt habe ich PHP-Code nach dem Haken in inhalts product.php (woocomemrce Vorlage Produkte in Schleife anzuzeigen)

/** 
* woocommerce_after_shop_loop_item_title hook. 
* 
* @hooked woocommerce_template_loop_rating - 5 
* @hooked woocommerce_template_loop_price - 10 
*/ 
do_action('woocommerce_after_shop_loop_item_title'); 
/** ATTRIBUTES BEGIN **/ 

// Get the attributes 
$attributes = $product->get_attributes(); 
// Start the loop 
foreach ($attributes as $attribute) : 

// Check and output, adopted from /templates/single-product/product-attributes.php 
    if ($attribute['is_taxonomy']) { 
     $values = wc_get_product_terms($product->id, $attribute['name'], array('fields' => 'names')); 
     echo apply_filters('woocommerce_attribute', wpautop(wptexturize(implode(', ', $values))), $attribute, $values); 
    } else { 
     // Convert pipes to commas and display values 
     $values = array_map('trim', explode(WC_DELIMITER, $attribute['value'])); 
     echo apply_filters('woocommerce_attribute', wpautop(wptexturize(implode(', ', $values))), $attribute, $values); 
    } 

endforeach; 
/** ATTRIBUTES END **/ 

Durch dieses Verfahren kann ich Produkt attribut angezeigt und das Symbol auf die Attribute hinzufügen. Aber ich kann nur ein Icon hinzufügen, weil es in Woocommerce keine Funktionalität gibt, CSS-Klassen für jedes Attribut hinzuzufügen.

Answer 1

Ich habe verstanden, dass Sie für jedes Attribut verschiedene Klassen (für CSS) hinzufügen müssen. Dazu müssen Sie die folgende PHP-Datei in woocommerce bearbeiten. In Ihrem WordPress gehen Sie zu wp-content \ plugins \ woocommerce \ templates \ single-Produkt und öffnen Sie Produkt-Attribute.php Datei. Nachfolgenden Code ersetzen. Hinweis: Entweder können Sie direkt im Plugin bearbeiten oder Sie können diese Datei in Ihr untergeordnetes Thema kopieren.

<?php 
 
/** 
 
* Product attributes 
 
* 
 
* Used by list_attributes() in the products class. 
 
* 
 
* This template can be overridden by copying it to yourtheme/woocommerce/single-product/product-attributes.php. 
 
* 
 
* HOWEVER, on occasion WooCommerce will need to update template files and you 
 
* (the theme developer) will need to copy the new files to your theme to 
 
* maintain compatibility. We try to do this as little as possible, but it does 
 
* happen. When this occurs the version of the template file will be bumped and 
 
* the readme will list any important changes. 
 
* 
 
* @see \t  https://docs.woocommerce.com/document/template-structure/ 
 
* @author \t \t WooThemes 
 
* @package \t WooCommerce/Templates 
 
* @version  3.1.0 
 
*/ 
 

 
if (! defined('ABSPATH')) { 
 
\t exit; 
 
} 
 
?> 
 
<table class="shop_attributes"> 
 
\t <?php if ($display_dimensions && $product->has_weight()) : ?> 
 
\t \t <tr> 
 
\t \t \t <th><?php _e('Weight', 'woocommerce') ?></th> 
 
\t \t \t <td class="product_weight"><?php echo esc_html(wc_format_weight($product->get_weight())); ?></td> 
 
\t \t </tr> 
 
\t <?php endif; ?> 
 

 
\t <?php if ($display_dimensions && $product->has_dimensions()) : ?> 
 
\t \t <tr> 
 
\t \t \t <th><?php _e('Dimensions', 'woocommerce') ?></th> 
 
\t \t \t <td class="product_dimensions"><?php echo esc_html(wc_format_dimensions($product->get_dimensions(false))); ?></td> 
 
\t \t </tr> 
 
\t <?php endif; ?> 
 
    <?php 
 
\t \t //Here I added a variable for incrementing. 
 
\t \t $class_name=1; 
 
\t ?> 
 
\t <?php foreach ($attributes as $attribute) : $class_name++; ?> 
 
\t \t <tr> 
 
\t \t \t <th class="my_classname_<?php echo $class_name++; ?>"><?php echo wc_attribute_label($attribute->get_name()); ?></th> 
 
\t \t \t <td><?php 
 
\t \t \t \t $values = array(); 
 

 
\t \t \t \t if ($attribute->is_taxonomy()) { 
 
\t \t \t \t \t $attribute_taxonomy = $attribute->get_taxonomy_object(); 
 
\t \t \t \t \t $attribute_values = wc_get_product_terms($product->get_id(), $attribute->get_name(), array('fields' => 'all')); 
 

 
\t \t \t \t \t foreach ($attribute_values as $attribute_value) { 
 
\t \t \t \t \t \t $value_name = esc_html($attribute_value->name); 
 

 
\t \t \t \t \t \t if ($attribute_taxonomy->attribute_public) { 
 
\t \t \t \t \t \t \t $values[] = '<a href="' . esc_url(get_term_link($attribute_value->term_id, $attribute->get_name())) . '" rel="tag">' . $value_name . '</a>'; 
 
\t \t \t \t \t \t } else { 
 
\t \t \t \t \t \t \t $values[] = $value_name; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t } 
 
\t \t \t \t } else { 
 
\t \t \t \t \t $values = $attribute->get_options(); 
 

 
\t \t \t \t \t foreach ($values as &$value) { 
 
\t \t \t \t \t \t $value = make_clickable(esc_html($value)); 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 

 
\t \t \t \t echo apply_filters('woocommerce_attribute', wpautop(wptexturize(implode(', ', $values))), $attribute, $values); 
 
\t \t \t ?></td> 
 
\t \t </tr> 
 
\t <?php endforeach; ?> 
 
</table>

Answer 2

Wenn Sie die CSS-Klasse für eache des WooCommerce spezifischen Attributwert zuweisen möchten, können Sie diesen Code verwenden:

/** ATTRIBUTES BEGIN **/ 

// Get the attributes 
$attributes = $product->get_attributes(); 
// Start the loop 
foreach ($attributes as $attribute) : 

// Check and output, adopted from /templates/single-product/product-attributes.php 
    if ($attribute['is_taxonomy']) { 
     $values = wc_get_product_terms($product->id, $attribute['name'], array('fields' => 'names')); 
     if($attribute['name'] == 'pa_usl_otpuska'){ 
     foreach($values as $value){ 
     $value_classname = $value; // how can I get the value name?? 
    }  
     echo apply_filters('woocommerce_attribute', wpautop(wptexturize('<span class="lbl ' . $value_classname . '">'. implode('</span><span class="lbl ' . $value . '">', $values).'</span>')), $attribute, $values); 
    } else { 
    echo apply_filters('woocommerce_attribute', wpautop(wptexturize(implode(', ', $values))), $attribute, $values); 
    } 
} else { 

    // Convert pipes to commas and display values 
     $values = array_map('trim', explode(WC_DELIMITER, $attribute['value'])); 
    echo apply_filters('woocommerce_attribute', wpautop(wptexturize(implode(', ', $values))), $attribute, $values); 

    } 
endforeach; 
/** ATTRIBUTES END **/ 

Zum Beispiel habe ich diesen Code hinzugefügt die Woocommemrce - content-product.php nach dem Haken:

do_action('woocommerce_after_shop_loop_item_title'); 

, und fügte einige CSS-Code wie folgt aus:

.lbl.reciept:before{ 
    font-family: FontAwesome; 
    content: "\f0f6"; 
    padding-right:10px; 
    color:#FF9F41; 
    font-size:25px; 
}