Replace WooCommerce attribute labels by a custom image for each

I am working on project and I need some group help.

I am using woocommerce product system and on shop archive page product I am showing attribute-label: attribute-value (just like text).

attribute-label:attribute-value (ex. Transmission: Manual)

Is there a way to show attribute-label as image? I can’t add html code like <img src..."/> and styling with CSS doesn’t help too.

I have searched for plugins and more.. But nothing on web.

To show attributes on product shop page i have used this function:

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

Can someone help me with this? How to change attribute-label with image?

Answer

Updated since WC 3.2+

As Product attributes dont have images, you should create a in your active theme a folder images (if it doesn’t exist) and inside a subfolder attributes.

For each product attribute, you will have to add an image inside this subfolder attributes, which name will be the name of your attribute (the slug). For example for “Color” attribute you will have to add an image named color.jpg.

Then I have make some changes in your code, to get this working. Only the terms set in the product for each attribute will be displayed. For each attribute you will get an image.

Here is the 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 goes in function.php file of your active child theme (or theme) or also in any plugin file.

This code is tested and work.