How to List Woocommerce products in the bootstrap Carousel

Asked

Viewed 339 times

1

	<div class="container-fluid">
    <div class="row">
        <div class="row">
            <div class="col-md-9">
                <h3 class="titulocarosel">
                   Produtos mais vendidos</h3>
            </div>
            <div class="col-md-3">
                <!-- Controls -->
                <div class="controls pull-right hidden-xs">
                    <a class="left fa fa-chevron-left btn btn-success" href="#carousel-example"
                        data-slide="prev"></a><a class="right fa fa-chevron-right btn btn-success" href="#carousel-example"
                            data-slide="next"></a>
                </div>
            </div>
        </div>
        <div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
			
			<?php $posts_slides = new wp_Query(array('post_type' => 'product', 'posts_per_page'=>6)); 

$i=1;
while($posts_slides ->have_posts()) :$posts_slides->the_post();

?>
          <div class="item <?php if($i == 1) echo 'active';?>">
		  
                    <div class="row">
		
                        <div class="col-sm-3 col-xs-12">

                            <div class="col-item">
                                <div class="photo">
                                    <?php woocommerce_template_loop_product_thumbnail()?> 
                                </div>
                                <div class="info">
							
                                    <div class="row">
                                        <div class="price2 col-md-12">
                                       <h2 class="titulo1"><?php woocommerce_template_loop_product_title()?></h2>
									  
										
										 
                                        </div>
										
										  <p> <?php the_content() ?></p>
									   
									   
                                         <p class="preço1"><?php woocommerce_template_loop_price()?> </p>
										
										
                                       
                                    </div>
									
                                    <div class="separator clear-left" id="botao2">
                                      
                                            <?php woocommerce_template_loop_add_to_cart ()?>
                                        
                                    </div>
                                    <div class="clearfix">
                                    </div>
									
                                </div>
								
                            </div>
							  
                        </div>

			
                        <div class="col-sm-3 col-xs-12">
                     <div class="col-item">
                                <div class="photo">
                                    <?php woocommerce_template_loop_product_thumbnail()?> 
                                </div>
                                <div class="info">
							
                                    <div class="row">
                                        <div class="price2 col-md-12">
                                       <h2 class="titulo1"><?php woocommerce_template_loop_product_title()?></h2>
									  
										
										 
                                        </div>
										
										  <p> <?php the_content() ?></p>
									   
									   
                                         <p class="preço1"><?php woocommerce_template_loop_price()?> </p>
										
										
                                       
                                    </div>
									
                                    <div class="separator clear-left" id="botao2">
                                      
                                            <?php woocommerce_template_loop_add_to_cart ()?>
                                        
                                    </div>
                                    <div class="clearfix">
                                    </div>
                                </div>
								
                            </div>
							
                        </div>
						
                        <div class="col-sm-3">
                        <div class="col-item">
                                <div class="photo">
                                    <?php woocommerce_template_loop_product_thumbnail()?> 
                                </div>
                                <div class="info">
							
                                    <div class="row">
                                        <div class="price2 col-md-12">
                                       <h2 class="titulo1"><?php woocommerce_template_loop_product_title()?></h2>
									  
										
										 
                                        </div>
										
										  <p> <?php the_content() ?></p>
									   
									   
                                         <p class="preço1"><?php woocommerce_template_loop_price()?> </p>
										
										
                                       
                                    </div>
									
                                    <div class="separator clear-left" id="botao2">
                                      
                                            <?php woocommerce_template_loop_add_to_cart ()?>
                                        
                                    </div>
                                    <div class="clearfix">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                         <div class="col-item">
                                <div class="photo">
                                    <?php woocommerce_template_loop_product_thumbnail()?> 
                                </div>
                                <div class="info">
							
                                    <div class="row">
                                        <div class="price2 col-md-12">
                                       <h2 class="titulo1"><?php woocommerce_template_loop_product_title()?></h2>
									  
										
										 
                                        </div>
										
										  <p> <?php the_content() ?></p>
									   
									   
                                         <p class="preço1"><?php woocommerce_template_loop_price()?> </p>
										
										
                                       
                                    </div>
									
                                    <div class="separator clear-left" id="botao2">
                                      
                                            <?php woocommerce_template_loop_add_to_cart ()?>
                                        
                                    </div>
                                    <div class="clearfix">
                                    </div>
                                </div>
                            </div>
                        </div>
						
                    </div>
                </div>
				    <?php $i++; endwhile;   ?>
                <div class="item">
                    <div class="row">
                        <div class="col-sm-3">
                           <div class="col-item">
                                <div class="photo">
                                    <?php woocommerce_template_loop_product_thumbnail()?> 
                                </div>
                                <div class="info">
							
                                    <div class="row">
                                        <div class="price2 col-md-12">
                                       <h2 class="titulo1"><?php woocommerce_template_loop_product_title()?></h2>
									  
										
										 
                                        </div>
										
										  <p> <?php the_content() ?></p>
									   
									   
                                         <p class="preço1"><?php woocommerce_template_loop_price()?> </p>
										
										
                                       
                                    </div>
									
                                    <div class="separator clear-left" id="botao2">
                                      
                                            <?php woocommerce_template_loop_add_to_cart ()?>
                                        
                                    </div>
                                    <div class="clearfix">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                        <div class="col-item">
                                <div class="photo">
                                    <?php woocommerce_template_loop_product_thumbnail()?> 
                                </div>
                                <div class="info">
							
                                    <div class="row">
                                        <div class="price2 col-md-12">
                                       <h2 class="titulo1"><?php woocommerce_template_loop_product_title()?></h2>
									  
										
										 
                                        </div>
										
										  <p> <?php the_content() ?></p>
									   
									   
                                         <p class="preço1"><?php woocommerce_template_loop_price()?> </p>
										
										
                                       
                                    </div>
									
                                    <div class="separator clear-left" id="botao2">
                                      
                                            <?php woocommerce_template_loop_add_to_cart ()?>
                                        
                                    </div>
                                    <div class="clearfix">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                         <div class="col-item">
                                <div class="photo">
                                    <?php woocommerce_template_loop_product_thumbnail()?> 
                                </div>
                                <div class="info">
							
                                    <div class="row">
                                        <div class="price2 col-md-12">
                                       <h2 class="titulo1"><?php woocommerce_template_loop_product_title()?></h2>
									  
										
										 
                                        </div>
										
										  <p> <?php the_content() ?></p>
									   
									   
                                         <p class="preço1"><?php woocommerce_template_loop_price()?> </p>
										
										
                                       
                                    </div>
									
                                    <div class="separator clear-left" id="botao2">
                                      
                                            <?php woocommerce_template_loop_add_to_cart ()?>
                                        
                                    </div>
                                    <div class="clearfix">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                           <div class="col-item">
                                <div class="photo">
                                    <?php woocommerce_template_loop_product_thumbnail()?> 
                                </div>
                                <div class="info">
							
                                    <div class="row">
                                        <div class="price2 col-md-12">
                                       <h2 class="titulo1"><?php woocommerce_template_loop_product_title()?></h2>
									  
										
										 
                                        </div>
										
										  <p> <?php the_content() ?></p>
									   
									   
                                         <p class="preço1"><?php woocommerce_template_loop_price()?> </p>
										
										
                                       
                                    </div>
									
                                    <div class="separator clear-left" id="botao2">
                                      
                                            <?php woocommerce_template_loop_add_to_cart ()?>
                                        
                                    </div>
                                    <div class="clearfix">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

so the guys put a slider bootstrap to list the latest products, best selling products, etc.... It is time to list the products instead of listing 1 product per div he is repeating the products follow the picture below to explain better , I believe it is not too complicated to solve this problem, I do not have good knowledge in php and I’m picking up, someone knows the solution?

inserir a descrição da imagem aqui

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.