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 -->
First of all, your iteration is wrong. You are first running a malformed
forloopn= 6 times, then for each integer from 0 to 5 you a running aforeachloopmtimes, 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.
Answering this with help from @Sorin Gheata. He forgot to make it work as bootstrap carousel.