0

I want to display every 3 products in a <ul>

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();
    ?>
0

2 Answers 2

0

This would work:

<?php
        $args = array(
            'post_type' => 'product',
            'posts_per_page' => 8,
            'orderby' => 'date',
            );
        $loop = new WP_Query( $args );
        if ( $loop->have_posts() ) {
            $i=1;
            echo '<ul>';
            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
            if ($i % 3 == 1){
                echo '</ul><ul>';
            }
            $i++;
            endwhile;
            echo '</ul>';
        } else {
            echo __( 'No products found' );
        }
        wp_reset_postdata();
    ?>
4
0

Please use the code as below:

    $break_after = 3;
    $counter = 0;
    $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(); 
            if ($counter % $break_after == 0) {
                echo '<ul>';
            } ?>

            <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 
            if ($counter % $break_after == ($break_after-1)) {
                echo '</ul>';
            }
            ++$counter;
        endwhile;
    } else {
        echo __( 'No products found' );
    }
    wp_reset_postdata();

Hope that helps!!

Not the answer you're looking for? Browse other questions tagged or ask your own question.