[Resolved] Show a list of Woocommerce categories with images

[Author]

Posts

[mikeM-5]

I want to render a list of product categories but include the image. I've got a view that lists out the categories but can't seem to figure out how to get the image associated with the category.

[emerson]

Dear Mike,
I assume you are already assigned images to your product categories.Currently right now, this is not yet supported with Views as there are no shortcodes to display WooCommerce product category images by default. I suggest you will check this tip from stackoverflow:

http://stackoverflow.com/questions/12717112/how-to-display-woocommerce-category-image

Since you already have a View that displays the categories. You can create a custom shortcode to display the woocommerce category image, something like this (based from the code):
[php]
function views_output_woocommerce_category_image_func() {
// verify that this is a product category page
if (is_product_category()){
global $wp_query;
// get the query object
$cat = $wp_query->get_queried_object();
// get the thumbnail id user the term_id
$thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
// get the image URL
$image = wp_get_attachment_url( $thumbnail_id );
// print the IMG HTML
return '<img src="'.$image.'" alt="" width="762" height="365" />';
}
}
add_shortcode('views_output_woocommerce_category_image', 'views_output_woocommerce_category_image_func');
[/php]

Then your Views, you can simply add the [views_output_woocommerce_category_image] shortcode to output the woocommerce category image. Please let me know how it goes. Thanks.

Cheers,
Emerson

[mikeM-5]

Hi Emerson, this doesn't work. When I put in the code, nothing renders. I took out the if statement and then tied to return $cat->term_id and nothing is returned. If I put in ID instead of term_id, I get the same number for each item.

Here is the view code:
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop>

<div class="catListWrapp">
<div class="image">
[views_output_woocommerce_category_image]
</div>
<div class="catTitle">[wpv-taxonomy-title]</div>
<div class="clear"></div>
</div>

</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

And function:

function views_output_woocommerce_category_image_func() {
// verify that this is a product category page
global $wp_query;
// get the query object
$cat = $wp_query->get_queried_object();
// get the thumbnail id user the term_id
$thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
// get the image URL
$image = wp_get_attachment_url( $thumbnail_id );
// print the IMG HTML
//return '<img src="'.$image.'"/>';
return $cat->term_id;

}
add_shortcode('views_output_woocommerce_category_image', 'views_output_woocommerce_category_image_func');

Any other ideas??

[emerson]

Dear Mike,
Actually I take a closer look at the StackOverflow code and run it. Yes you are right, it does not produce the images because its not hook properly to WP Views. I have modified the code below which uses the $WP_Views global variable to retrieved the terms that is requested. I tested and its working well for me. Can you try it too?

[php]
add_shortcode('views_output_woocommerce_category_image','views_output_woocommerce_category_image_func');
function views_output_woocommerce_category_image_func() {
global $WP_Views;
//Get Taxonomy info
$taxonomydata_passed_by_views=$WP_Views-&gt;taxonomy_data;

//Get Term info
$term_info_tax=$taxonomydata_passed_by_views['term'];

//Get Term ID
$term_id_tax=$term_info_tax-&gt;term_id;

//Get Thumbnail ID assigned to that term ID
$thumbnail_id = get_woocommerce_term_meta( $term_id_tax, 'thumbnail_id', true );

//Get the Image URL for that thumbnail ID
$image = wp_get_attachment_url( $thumbnail_id );

//If image exist, return it to the shortcode
if ( $image ) {
return '&lt;img src=&quot;' . $image . '&quot; alt=&quot;&quot; /&gt;';
}

}
[/php]

Please let me know how it goes 🙂

Cheers,
Emerson