How to add <ul> in WP_Query to every 3 posts displayed?

I want to display every 3 products in a

    Example of how HTML should look:

    <ul>
        <li>product looping 1</li>
        <li>product looping 2</li>
        <li>product looping 3</li>
    </ul>
    <ul>
        <li>product looping 4</li>
        <li>product looping 5</li>
        <li>product looping 6</li>
    </ul>
    

    WP_Query Code:

    <?php
            $args = array(
                'post_type' => 'product',
                'posts_per_page' => 8,
                'orderby' => 'date',
                );
            $loop = new WP_Query( $args );
            if ( $loop->have_posts() ) {
                while ( $loop->have_posts() ) : $loop->the_post();
    
                    //wc_get_template_part( 'content', 'product' );
    
                ?>
                <li class="col-md-3">
                    <div class="gridproduto">
                        <a href="<?php the_permalink(); ?>">
                            <?php global $post, $product; ?>
                            <?php if ( $product->is_on_sale() ) : ?>
                                <?php echo apply_filters( 'woocommerce_sale_flash', '<span class="onsale">' . __( 'Sale!', 'woocommerce' ) . '</span>', $post, $product ); ?>
                            <?php endif; ?>
    
                            <span class="thumbnail-product">
                                <?php the_post_thumbnail( 'medium' ); ?>
                            </span>
                        </a>
                            <div class="main-infos">
                                <a href="<?php the_permalink(); ?>">
                                    <h5><?php the_title(); ?></h5>
                                    <div><?php echo $product->get_price_html(); ?></div>
                                    <span class="preco_boleto">
                                        <?php 
                                        $boleto = $product->get_price();
                                        $desconto = 10; 
                                        $division = $boleto - ( $boleto * ($desconto / 100) );
                                        echo "R$ " . number_format( round($division, 2), 2, ',', '.' );
                                        ?>
                                    </span>
                                    <span class="parcela">no boleto ou em até <br> 3x de <?php echo number_format( round( $product->get_price() / 3, 2), 2, ',', '.' ); ?> sem juros.</span>
                                </a>
                                <a href="#" class="btn-orange">Comprar</a>
                            </div>
    
                    </div>
                </li>
    
                <?php endwhile;
            } else {
                echo __( 'No products found' );
            }
            wp_reset_postdata();
        ?>
    

    Read more here: How to add <ul> in WP_Query to every 3 posts displayed?

Leave a Reply

Your email address will not be published. Required fields are marked *