Skip Navigation

[Résolu] Show a list of Woocommerce categories with images

Ce fil est résolu. Voici une description du problème et la solution proposée.

We want to show a list of WooCommerce Product Categories with the corresponding image for each category. This is easily done by using the [wpv-woo-productcategory-images] shortcode in Toolset WooCommerce Views plugin. We simply put this shortcode inside View loop that outputs product categories.

Please note that the solution offered in this support thread is outdated. The shortcode [wpv-woo-productcategory-images] was added to Toolset after this thread was created. You should use the [wpv-woo-productcategory-images] shortcode and not the workaround proposed in this ticket.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 3 réponses, has 2 voix.

Last updated by emerson Il y a 7 années et 10 mois.

Assigned support staff: emerson.

Auteur
Publications
#142755

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.

#143349

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

#143623

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

#143729

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