How to fix bootstrap carousal for featured product

Question

I tried few plugins for having featured product slider carousal for my woocommerce wordpress site but they didn't work as i intended so i tried to create on my own. Its almost worked except that it is displaying additional posts that don't exist at all. They don't exist even as products. First picture shows the product that is featured. Second picture is extra content that don't exist at all. The number of such unnecessary posts is equal to the multiple of total number of featured products. Suggestion on similar question reflects almost what i have done but It have problems. In my case i have 5 featured products and it is displaying 25 unnecessary posts. Currently, i tried just to display one item at a time and after fixing this issue i will display 3 posts at a time so it loops twice giving 6 posts to slide.

<div id="featured" class="carousel slide ">
                            <div class="carousel-inner ">
                            <?php
                            $args = array( 'post_type' => 'product',
                                           'meta_key' => '_featured',
                                           'meta_value' => 'yes',
                                           'posts_per_page' => 8,
                                           'post_status'     => 'publish',
                                           'offset'          => 0,
                                           'numberposts'     => 6,
                                           //'orderby' =>'rand',
                                           'order' => 'DESC' 
                                           );
                            $featured_loop = new WP_Query( $args );
                            //echo "<pre>";
                            //print_r($featured_loop);
                            //echo "</pre>";

                            if ( $featured_loop->have_posts()){

                                $i = 1; $count;
                                for ($count=0; $count < 6;) { 

                                    foreach ( $featured_loop as $featured ) {
                                    $featured_loop->the_post();
                                    ?>
                                    <div class=
                                      <?php
                                        echo '"';
                                        echo 'item '; 
                                        if ($i == 1) {
                                          echo 'active';
                                        }

                                        echo '"';

                                        ?>>

                                        <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 ">
                                                <div class="thumbnail">
                                                <i class="tag"></i>
                                                <a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                                                <?php 

                                                    if (has_post_thumbnail( $featured->post->ID )){
                                                            echo get_the_post_thumbnail($featured->post->ID, 'shop_catalog');
                                                        }
                                                        else {
                                                        echo '<img width ="150" src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" class="img-responsive img-rounded" />';
                                                        }

                                                ?>
                                                </a>
                                                </div><!-- thumbnail -->
                                                <div class="panel-body text-center">
                                                        <h6><?php the_title(); ?> </h6>                         
                                                </div><!-- panel-body text-center -->

                                            </div><!-- col-xs-6 col-sm-4 col-md-4 col-lg-4 -->
                                        </div>
                                    <?php

                                    $i++;


                                    }
                                    $count++;

                                }

                            }


                            ?>








                                </div><!-- carousal item class ends -->


                            </div><!-- carousal inner ends -->
                            <a class="left carousel-control" href="#featured" data-slide="prev"><i class="fa fa-arrow-left"></i></a>
                            <a class="right carousel-control" href="#featured" data-slide="next"><i class="fa fa-arrow-right"></i></a>  

                            <?php wp_reset_postdata(); wp_reset_query(); ?>
                        </div><!-- carousel slide -->  

Answer 1

First of all, your iteration is wrong. You are first running a malformed for loop n= 6 times, then for each integer from 0 to 5 you a running a foreach loop m times, resulting in a malformed loop with complexity of O(n*m) that don't solve your problem.

Here's your code, rewritten. Hope it helps.

<div id="featured" class="carousel slide ">
    <div class="carousel-inner ">
        <?php
        $args          = array(
            'post_type'      => 'product',
            'meta_key'       => '_featured',
            'meta_value'     => 'yes',
            'posts_per_page' => 6,
            'post_status'    => 'publish',
            'offset'         => 0,
            'order'          => 'DESC'
        );
        $featured_loop = new WP_Query( $args );
        if ( $featured_loop->have_posts() ):
            while ( $featured_loop->have_posts() ) : $featured_loop->the_post(); ?>
                <div class="<?php echo 'item'; ?>">
                    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 ">
                        <div class="thumbnail">
                            <i class="tag"></i>
                            <a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                                <?php echo woocommerce_get_product_thumbnail(); ?>
                            </a>
                        </div>
                        <div class="panel-body text-center">
                            <h6><?php the_title(); ?> </h6>
                        </div>
                    </div>
                </div>
            <?php endwhile; ?>
            <a class="left carousel-control" href="#featured" data-slide="prev"><i class="fa fa-arrow-left"></i></a>
            <a class="right carousel-control" href="#featured" data-slide="next"><i class="fa fa-arrow-right"></i></a>
            <?php wp_reset_postdata(); endif; ?>
    </div>
</div>
<?php wp_reset_query(); ?>

Answer 2

Answering this with help from @Sorin Gheata. He forgot to make it work as bootstrap carousel.

<div id="featured" class="carousel slide ">
    <div class="carousel-inner ">
        <?php
        $args          = array(
            'post_type' => 'product',
        'meta_key' => '_featured',
        'meta_value' => 'yes',
        'numberposts'     => 6,
        'posts_per_page' => 6
        );
        $featured_loop = new WP_Query( $args );//global $product;
        if ( $featured_loop->have_posts() ):
            while ( $featured_loop->have_posts() ) : $featured_loop->the_post(); ?>
                                        <div class=
                                      <?php
                                        echo '"';
                                        echo 'item '; 
                                        if ($i == 1) {
                                          echo 'active';
                                        }

                                        echo '"';

                                        ?>>
                    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 ">
                        <div class="thumbnail">
                            <i class="tag"></i>
                            <a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                                <?php echo woocommerce_get_product_thumbnail(); ?>
                            </a>
                        </div>
                        <div class="panel-body text-center">
                            <h6><?php the_title(); ?> </h6>
                        </div>
                    </div>
                </div>

            <?php  $i++; endwhile; ?>
            <a class="left carousel-control" href="#featured" data-slide="prev"><i class="fa fa-arrow-left"></i></a>
            <a class="right carousel-control" href="#featured" data-slide="next"><i class="fa fa-arrow-right"></i></a>
            <?php wp_reset_postdata(); endif; ?>
    </div>
</div>
<?php wp_reset_query(); ?>