title: Woocommerce featured product carousel using bootstrap
body: <p>I want to have thumbnail images of the products on my home page in a bootstrap carousal using a custom product loop. </p>
  
  <p>I have achieved a part of it through following code but this is showing a single item in a row. I want to have 5 items in a single row and when user clicks next or previous buttons other item should scroll in. </p>
  
  <p>Your help is appreciated. </p>
  
  <pre><code>&lt;div id="featured" class="carousel slide "&gt;
      &lt;div class="carousel-inner "&gt;
          &lt;?php
          $args          = array(
              'post_type' =&gt; 'product',
          'meta_key' =&gt; '_featured',
          'meta_value' =&gt; 'yes',
          'numberposts'     =&gt; 6,
          'posts_per_page' =&gt; 6
          );
          $featured_loop = new WP_Query( $args );//global $product;
          if ( $featured_loop-&gt;have_posts() ):
              while ( $featured_loop-&gt;have_posts() ) : $featured_loop-&gt;the_post(); ?&gt;
                                          &lt;div class=
                                        &lt;?php
                                          echo '"';
                                          echo 'item '; 
                                          if ($i == 1) {
                                            echo 'active';
                                          }
  
                                          echo '"';
  
                                          ?&gt;&gt;
                      &lt;div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 "&gt;
                          &lt;div class="thumbnail"&gt;
                              &lt;i class="tag"&gt;&lt;/i&gt;
                              &lt;a id="id-&lt;?php the_id(); ?&gt;" href="&lt;?php the_permalink(); ?&gt;" title="&lt;?php the_title(); ?&gt;"&gt;
                                  &lt;?php echo woocommerce_get_product_thumbnail(); ?&gt;
                              &lt;/a&gt;
                          &lt;/div&gt;
                          &lt;div class="panel-body text-center"&gt;
                              &lt;h6&gt;&lt;?php the_title(); ?&gt; &lt;/h6&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;?php  $i++; endwhile; ?&gt;
              &lt;a class="left carousel-control" href="#featured" data-slide="prev"&gt;&lt;i class="fa fa-arrow-left"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;a class="right carousel-control" href="#featured" data-slide="next"&gt;&lt;i class="fa fa-arrow-right"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;?php wp_reset_postdata(); endif; ?&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;?php wp_reset_query(); ?&gt;
  </code></pre>