Jeff
Jeff

Reputation: 543

WooCommerce get attribute thumbnail - Variation Swatches and Photos plugin

I am using the plugin WooCommerce Variation Swatches and Photos which lets me add a thumbnail to my product's attributes.

I need to list all the attributes on a template and I would like to also get and show the thumbnail.

$terms = get_terms( array(
    'taxonomy' => 'pa_texture',
    'hide_empty' => false,
) );
foreach ( $terms as $term ) {
    print_r($term);
}

The thumbnail feature is not default in WooCommerce so when I print_r $term there is no thumbnail URL:

WP_Term Object
(
    [term_id] => 54
    [name] => Guilin
    [slug] => guilin
    [term_group] => 0
    [term_taxonomy_id] => 54
    [taxonomy] => pa_texture
    [description] => Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet facilisis convallis.
    [parent] => 0
    [count] => 2
    [filter] => raw
    [meta_value] => 0
)

How can I get the attribute's thumbnail image?

Upvotes: 0

Views: 10083

Answers (5)

LoicTheAztec
LoicTheAztec

Reputation: 253794

The classic way for product categories terms 'product_cat' taxonomy is:

$terms = get_terms( array(
    'taxonomy' => 'product_cat',
    'hide_empty' => false,
) );

foreach ( $terms as $term ) {
    $thumb_id = get_woocommerce_term_meta( $term->term_id, 'thumbnail_id', true );
    $img_src = wp_get_attachment_url(  $thumb_id );
    echo '<p><img src="'.$img_src.'" alt="" />'.$term->name.'</p>';
}

So may be changing the taxonomy to product attributes like 'pa_texture', it should do the trick
(I hope, but I am not sure as I don't use Variation Swatches and Photos plugin).

Upvotes: 1

Heemanshu Bhalla
Heemanshu Bhalla

Reputation: 3765

Finally Fixed! I was not passing the right value in taxonomy. I was also using variation swatches plugin. below is the working code. I was trying to fetch "brands" attributes list with images.

I have used a shortcode and called function that has below code. If you want to know how to create shortcode check link below -

https://www.wpbeginner.com/wp-tutorials/how-to-add-a-shortcode-in-wordpress/

$attribute_taxonomies = wc_get_attribute_taxonomies();
$taxonomy_terms = array();

if ($attribute_taxonomies) :
    foreach ($attribute_taxonomies as $tax) :
        if (taxonomy_exists(wc_attribute_taxonomy_name($tax->attribute_name))) :
            
            if($tax->attribute_name=="brands"){
                $taxonomy_terms[$tax->attribute_name] = get_terms(wc_attribute_taxonomy_name($tax->attribute_name), 'number=6&orderby=name&hide_empty=1');
            }
        endif;
    endforeach;
endif;

foreach ($taxonomy_terms as $item) :
    foreach($item as $child):
         $thumbnail_id = get_woocommerce_term_meta( $child->term_id, 'product_pa_brands', true );
        $textureImg = wp_get_attachment_image_src( $thumbnail_id );
        //we are getting image in $textureImg[0]

        }
    endforeach;
endforeach;

Upvotes: 0

Dawid Lisiecki
Dawid Lisiecki

Reputation: 3

I had a similar problem when displaying images in upsells products. There is a mess, but:

if ( $products_upsells->have_posts() ) : while ( $products_upsells->have_posts() ) : $products_upsells->the_post();
        $_product = wc_get_product(get_the_ID());
        $attributes = $_product->get_attributes();
        $attr_id = $attributes['pa_kolor']['options'][0];
        $thumb_id = get_term_meta($attr_id);
        $img_src = wp_get_attachment_url($thumb_id['pa_kolor_swatches_id_photo'][0] );
        echo '<img src="'.$img_src.'" alt="" />';
    endwhile; endif;
    wp_reset_query();

See this code:

$_product = wc_get_product(get_the_ID());
$attributes = $_product->get_attributes();
$attr_id = $attributes['pa_kolor']['options'][0];
$thumb_id = get_term_meta($attr_id);
$img_src = wp_get_attachment_url($thumb_id['pa_kolor_swatches_id_photo'][0] );

Upvotes: 0

Michael Doye
Michael Doye

Reputation: 8171

This is untested, however some variation of the following should work:

foreach ( $terms as $key => $term ) {
    $thumbnail_id = get_woocommerce_term_meta( $term->term_id, $term->taxonomy . '_photo', true );
    $terms[ $key ]->thumb = wp_get_attachment_image_src( $thumbnail_id );
    print_r( $term );
}

If you look at the relevant plugin file, you can see how the author get the images. The code above is based loosely from that.

Upvotes: 1

Jeff
Jeff

Reputation: 543

Found the solution thanks to @Und3rTow's input.

The correct parameter in get_woocommerce_term_meta is pa_texture_swatches_id_photo.

Here is the final code:

$thumbnail_id = get_woocommerce_term_meta( $term->term_id, 'pa_texture_swatches_id_photo', true );
$textureImg = wp_get_attachment_image_src( $thumbnail_id ); ?>
<img src="<?php echo $textureImg[0]; ?>">

Upvotes: 1

Related Questions