woocommerce custom loop with

index.php

I have made the necessary changes for the code to work. Make sure woocommerce add-to-cart.js or add-to-cart.min.js is enqueued in the page.

<div class="all_content_shop">
<?php wc_print_notices(); ?>
<?php $new_posts = new WP_Query( array(
    'post_type'      => 'product', //post of page of my post type
    'cat'            => 0, // category id, 0 for all categories.
    'posts_per_page' => 12,
    'offset'         => 0, //how many posts you want to eliminate from the query
    'orderby'        => '', // order by title or date ?
    'order'          => 'DESC'
) // order as ASC or DESC
); ?>
<?php if ( $new_posts->have_posts() ) :
    while ( $new_posts->have_posts() ) :
        $new_posts->the_post();
        global $product;
        $product = get_product( get_the_ID() ); //set the global product object?>

        <div class="col-md-3 single_all_c_s">
            <div class="shop_product_inner">
                <a href="<?php the_permalink() ?>">
                    <?php if ( has_post_thumbnail( get_the_ID() ) ) {
                        echo get_the_post_thumbnail( get_the_ID(), 'shop_single' );
                    } else {
                        echo '<img src="' . woocommerce_placeholder_img_src() . '" alt="Placeholder" />';
                    } ?>
                    <div class="shop_product_inner_caption">
                        <h2><?php the_title(); ?></h2>

                        <p><?php echo $product->get_price_html(); ?></p>
                        <?php woocommerce_template_loop_add_to_cart(); //ouptput the woocommerce loop add to cart button ?>
                    </div>
                </a>
            </div>
        </div>

    <?php endwhile;//Possibility to add else statement ?>
    <?php wp_reset_postdata(); ?>
<?php else: ?>
    <p class="not_found">Sorry, The post you are looking is unavailable!</p>
<?php endif;
wp_reset_query(); ?>