How to Make Custom Product Loop in WooCommerce ?

How to Make Custom Product Loop in WooCommerce ?

woocommerce is a open source platform for online ecommerce in wordpress. which provide many functionality for easy shopping for customers in wordpress. You must have ever needed a custom WooCommerce product loop to customise and add few new classes to style it in a proper way since default styles does not look according to your imagination.

What is the product loop?

The product loop is a collection of products which will displayed on a category or archive page that visitors can visit. custom product loops can greatly enhance your online store’s interface and boost your customer’s shopping experience and interest.

Therefore, in this article, we’ll show you how to make a custom WooCommerce product loop which will give you the access to all css classes and to show your imagination. So let’s get started!

Method 1: Using WP_Query()

Here we will use wp_query() and create a foreach loop for products and all you need to do is to copy the given code and paste it into your themes function.php file

add_shortcode('custom_loop', 'custom_loop_shortcode');
function custom_loop_shortcode() {
    ob_start();
    $meta_query   = WC()->query->get_meta_query();

    $meta_query[] = array(
        'key'   => '_featured',
        'value' => 'yes'
    );
    $args = array(
        'post_type'   =>  'product',
        'post_status' => 'publish',
        'stock'       =>  1,
        'showposts'   =>  6,
        'orderby'     =>  'date',
        'order'       =>  'DESC',
        'meta_query'  =>  $meta_query   //Use it if you want featured products only
    );

    $loop = new WP_Query( $args );
    ?><ul><?php
    while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
        <li>    
            <?php 
                if ( has_post_thumbnail( $loop->post->ID ) ) 
                    echo get_the_post_thumbnail( $loop->post->ID, 'shop_catalog' ); 
                else 
                    echo '<img src="' . woocommerce_placeholder_img_src() . '" alt="Placeholder" width="65px" height="115px" />'; 
            ?>
            <h3><?php the_title(); ?></h3>

            <?php 
                echo $product->get_price_html(); 
                woocommerce_template_loop_add_to_cart( $loop->post, $product );
            ?>    
        </li>
    <?php 
    endwhile;
    ?></ul><?php
    wp_reset_query();     

    return ob_get_clean();
}

So in the above code a shortcode is created [custom_loop]. which is ready to place anywhere on the your site. This loop output the featured image wrapped with product title, price and add to cart button.