Bootstrap grid in loop - php

Question

I am trying to make something like the image.
I'm using WordPress and woocommerce and would like to display products like this.
This is the normal html that does the work.
I need to be able to put it into a loop:
<div class="container" style="width: 100%">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Span 3</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div>Span 2</div>
<div>Span 2</div>
<div>Span 2</div>
</div>
</div>
</div>
I am using the bootstrap grid.css
Here is what I have done:
while ($loop->have_posts()) : $loop->the_post();
if ($product_counter < $product_counter_max) {
if ($grid_counter == 0) { ?>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<img src="<?php echo get_the_post_thumbnail_url($loop->post->ID); ?>"/>
<?php echo get_the_title();
$product = wc_get_product($loop->post->ID);
/**reviews**/
$average = $product->get_average_rating($loop->post->ID);
$review_count = $product->get_review_count($loop->post->ID);
if ($average != 0) {
for ($x = 0; $x < 5; $x++) {
if ($x < $average) {
echo '<i class="fa fa-star swatchchecked"></i>';
} else {
echo '<i class="fa fa-star"></i>';
}
}//for loop
}//end of if
else {
echo "No Rating Yet";
}//end of reviews
echo '<p>' . sprintf("%.2f", $product->get_price()) . '</p>';
?>
</div>
<?php
} else {
?>
<div style="clear: both">there</div>
<?php
}
}
$grid_counter++;
$product_counter++;
endwhile;
} else {
echo __('No products found');
}
wp_reset_postdata();
I'm not sure how to make the little items stack 3 on top of each other like the image
Please help!

Answer 1

So here's a way to create the grid layout you want. While the minute details aren't included in this answer, what I'm providing for you should give you enough of an idea of how to set up the inner portions to layout how you want those to layout.
If it was me... I'd set it up so that with your incremented grid, you can make different layouts for the columns 1 and 3 vs column 2 and 4. But like I said, this should point you in the right direction.
// Not sure why you are using a counter value when you can
// set the loop to return whatever you want. But you didn't show your loop
$product_counter_max = 8;
// Set grid counter at 1;
$grid_counter = 1;
$product_counter = 0;
echo '<div class="row">';
if ($loop->have_posts()){
while ($loop->have_posts()) : $loop->the_post();
// This next line could be superflous based on earlier comment
if ($product_counter < $product_counter_max) {
if ($grid_counter == 1 || $grid_counter == 5 ) {
echo '<div class="col-3">';
} else {
// Add an extra wrapper div around the second and fourth column
if ($grid_counter == 2 || $grid_counter == 6 ) echo '<div class="col-3">';
// This is an inner column
echo '<div class="col-12">';
}?>
<img src="<?php echo get_the_post_thumbnail_url($loop->post->ID); ?>"/>
<?php echo get_the_title();
$product = wc_get_product($loop->post->ID);
/**reviews**/
$average = $product->get_average_rating($loop->post->ID);
$review_count = $product->get_review_count($loop->post->ID);
if ($average != 0) {
for ($x = 0; $x < 5; $x++) {
if ($x < $average) {
echo '<i class="fa fa-star swatchchecked"></i>';
} else {
echo '<i class="fa fa-star"></i>';
}
}//for loop
}//end of if
else {
echo "No Rating Yet";
}//end of reviews
echo '<p>' . sprintf("%.2f", $product->get_price()) . '</p>';
?>
</div>
<?php
if ($grid_counter == 4 || $grid_counter == 8 ) echo '</div>';
}
$grid_counter++;
$product_counter++;
endwhile;
} else {
echo __('No products found');
}
wp_reset_postdata();
echo '</div>';