) Ajout de classes CSS pour les attributs

Question

Comment puis-je ajouter une classe CSS pour l'attribut de produit dans Woocommerce? Par exemple, j'ai besoin d'afficher des icônes individuelles pour chaque attribut via: avant &: après pseudo-éléments.

Merci d'avance!

P.S. Désolé pour le retard Je pensais que vous connaissez la syntaxe de Woocommerce. Woocommerce utilise également des actions & pour afficher des informations. Par exemple pour afficher les attributs sur la page du produit. Je souhaite afficher les attributs du produit Woocommcerce avec des icônes individuelles. Maintenant, j'ai ajouté un code php après le crochet en product.php de contenu (modèle woocomemrce pour afficher les produits en boucle)

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

Par cette méthode, je peux afficher attributes de produits et ajouter l'icône aux attributs. Mais je ne peux ajouter qu'une seule icône, car dans Woocommerce il n'y a pas de fonctionnalité pour ajouter des classes CSS à chaque attribut.

Answer 1

J'ai compris que vous devez ajouter différentes classes (pour CSS) pour chaque attribut. Pour cela, vous devez éditer le fichier php suivant dans woocommerece. Dans votre wordpress allez à wp-content \ plugins \ woocommerce \ templates \ seul produit et ouvrir product-attributes.php fichier. Remplacer le code suivant. Remarque: Soit vous pouvez éditer directement dans le plugin, soit vous pouvez copier ce fichier dans votre thème enfant.

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

Si vous souhaitez affecter la classe CSS pour eache de la valeur d'attribut spécifique WooCommerce vous pouvez utiliser ce code:

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

Par exemple, j'ai ajouté ce code le Woocomemrce - content-product.php après le crochet:

do_action('woocommerce_after_shop_loop_item_title'); 

et a ajouté un code CSS comme ceci:

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