CODEWITHSUNDEEP
phpwordpresswoocommerce
Anders Kitson
Anders Kitson

Reputation: 1545

Changing html output structure for a product query in Wordpress

I am using a query that I found on the woocommerce docs, it is a sample products loop. It output's everything as list-items when I want them to outputted into divs with a grid column class. Is there a way to do that with this products loop or do I have to follow another approch?

here is the code so far

 <?php
    $params = array(
        'posts_per_page' => 5, //No of product to be fetched
        'post_type' => 'product'
    );

    $wc_query = new WP_Query($params);
    if ($wc_query->have_posts()) :
        while ($wc_query->have_posts()) :
            $wc_query->the_post();
            ?>
            <?php the_title(); ?>
    <?php
        endwhile;
            wp_reset_postdata();
    else:  ?>
        <p><?php _e( 'No Products' );?></p> 
<?php endif; ?>

Upvotes: 1

Views: 39

Answers (1)

Luan Cuba
Luan Cuba

Reputation: 73

This should solve your problem.

<?php
    $params = array(
        'posts_per_page' => 5, //No of product to be fetched
        'post_type' => 'product'
    );

    $wc_query = new WP_Query($params);
    if ($wc_query->have_posts()) :
        echo '<div class="your-main-grid-class-or-container">';
        while ($wc_query->have_posts()) :
            $wc_query->the_post();
            ?>
            <?php echo '<div class="your-child-class">'; ?>
            <?php the_title(); ?>
            <?php echo '</div>'; ?>
    <?php
        endwhile;
        echo '</div>'; //ending main grid class
            wp_reset_postdata();
    else:  ?>
        <p><?php _e( 'No Products' );?></p> 
<?php endif; ?>

Upvotes: 1

Related Questions