woocommerce retriving category name as div class? - wordpress

Question

ok I am trying to retrive the category name of a woocommerce product displayed in a wordpress loop and use it as the class for a li also inside the loop i've tried this:
<div id="isocontent" class="products">
<ul><?php while (have_posts()) : the_post(); ?>
<li class="<?php echo $product->get_categories(); ?> box">
<?php echo the_post_thumbnail(); ?>
<p><?php the_title(); ?></p>
<span href="<?php the_permalink(); ?> " class="amount price" data-original="<?php echo get_woocommerce_currency(); ?><?php echo $product->get_price(); ?>" data-price="<?php echo $product->get_price(); ?>" title="Original price: <?php echo $product->get_price(); ?>"><?php echo get_woocommerce_currency(); ?><?php echo $product->get_price(); ?></span>
Add to Cart
</li>
<?php endwhile; ?>
</ul>
</div>
this being the part i'm trying to retrive the class with:
<li class="<?php echo $product->get_categories(); ?> box">
but it just outputs this:
<li class="<a href=" http:="" localhost.no="" fanny="" kategori="" interior-sv="" "="" rel="tag">
which does retrieve the category but also screws with the markup breaking the loop.
I've also tried this:
<li <?php post_class('box'); ?>
but because woocommerce uses taxonmys it retrives the tags but not the product category.
any help is much appriciated
Kind regards
Chris

Answer 1

It's not quite as easy as making a single call - get_categories() is designed to show an HTML representation of the product categories. The product categories are actually a custom taxonomy, so you have to use get_the_terms() to get at it.
global $post;
$terms = get_the_terms( $post->ID, 'product_cat' );
foreach ( $terms as $term ){
$category_id = $term->term_id;
$category_name = $term->name;
$category_slug = $term->slug;
break;
}