CODEWITHSUNDEEP
php
WordPress Mike
WordPress Mike

Reputation: 458

Wrap a div around every 4 items in a loop

I need to add <div class="row"> around the number of items set in $woocommerce_loop['columns']. I need output to look like:

<div class="row">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</div>
<div class="row">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</div>

What I currently have is only wrapping the div around every 4th list item. 

<?php
    // Store loop count we're currently on
    if ( empty( $woocommerce_loop['loop'] ) )
        $woocommerce_loop['loop'] = 0;

    // Store column count for displaying the grid
    if ( empty( $woocommerce_loop['columns'] ) )
        $woocommerce_loop['columns'] = apply_filters( 'loop_shop_columns', 4 );

    // Ensure visibility
    if ( ! $product->is_visible() )
        return;

    // Increase loop count
    $woocommerce_loop['loop']++;

    if ( $woocommerce_loop['loop'] % $woocommerce_loop['columns'] == 0) {
        echo '<div class="row">';
    }
?>

<li>
    <?php do_action( 'woocommerce_before_shop_loop_item' ); ?>
    <a style="position: relative;display: block;" href="<?php the_permalink(); ?>">
        <?php
            /**
             * woocommerce_before_shop_loop_item_title hook
             *
             * @hooked woocommerce_show_product_loop_sale_flash - 10
             * @hooked woocommerce_template_loop_product_thumbnail - 10
             */
            do_action( 'woocommerce_before_shop_loop_item_title' );
        ?>
        <?php
            /**
             * woocommerce_after_shop_loop_item_title hook
             *
             * @hooked woocommerce_template_loop_price - 10
             */
            do_action( 'woocommerce_after_shop_loop_item_title' );
        ?>
    </a>
    <a href="<?php the_permalink(); ?>">
            <h3><?php the_title(); ?></h3>
    </a>
    <?php do_action( 'woocommerce_after_shop_loop_item' ); ?>
</li>
<?php 
    if ( $woocommerce_loop['loop'] % $woocommerce_loop['columns'] == 0) {
        echo '</div>';
    }
?>

This is a template being called inside a loop in case you're wondering where the loop is.

Upvotes: 0

Views: 2042

Answers (2)

Sean
Sean

Reputation: 12433

Change your code to 

if ( $woocommerce_loop['loop'] % $woocommerce_loop['columns'] == 1) {
    echo '<div class="row">';
}

...

if ( $woocommerce_loop['loop'] % $woocommerce_loop['columns'] == 0) {
    echo '</div>';
}

This way it opens on the 1st, and closes on the 4th.

Upvotes: 2

Bryan
Bryan

Reputation: 3494

I would say the simplest answer is to use a variable to keep track of number of iterations and add when mod 4 = 0...

$count = 0;
if($count % $numOfRows == 0 || $count == 0)
{
    if($count % $numOfRows == 0)
         echo "</div>"
    if($count != count($arrayYourLoopingThrough) -1)
        echo "<div class='row'>";
}

elseif($count == count($arrayYourLoopingThrough) -1)
    echo "</div>";

probably be better if you used a list instead of a div with a class but this should do what you asked for.

Upvotes: 1

Related Questions