Adding WooCommerce CSS classes for attributes

Question

How can I add a CSS class for the product attribute in Woocommerce? For Example, I need to display individual icons for each attribute via :before & :after pseudoelements.

Thanks in advance!

P.S. Sorry fot delay I thought that you are familiar with the syntax of Woocommerce. Also Woocommerce use actions & hooks to display some information. For example to display attributes on the product page. I want to display Woocommcerce product attributes with individual icons. Now I added php code after the hook in content-product.php (woocomemrce template to display products in loop)

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

By this method I can display product attributs and add icon to the attributes. But I can add only one icon, because in Woocommerce there is no functionality to add CSS classes foe each attribute.

Answer 1

If you want to assign the CSS class for eache of the Woocommerce specific attribute value you can use this 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 **/

For example I have added this code to the Woocomemrce - content-product.php after the hook:

do_action( 'woocommerce_after_shop_loop_item_title' );

And added some CSS code like this:

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

Answer 2

I have understood that you need to add different classes (for CSS) for each attribute. For this you have to edit the following php file in woocommerece. In your wordpress go to wp-content\plugins\woocommerce\templates\single-product and open product-attributes.php file. Replace following code. Note:Either you can edit in plugin directly or you can copy this file into your child theme.

<?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 	    https://docs.woocommerce.com/document/template-structure/
 * @author 		WooThemes
 * @package 	WooCommerce/Templates
 * @version     3.1.0
 */

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

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

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

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

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

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

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