wooCommerce Custom product loop

by Faisal Khan Janjua

HTML

<pre>
<?php
$args = array( 'post_type' => 'product' ); // 'posts_per_page' => 1, 'product_cat' => 'shoes', 'orderby' => 'rand', 
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
<div class="product col-sm-4">    
  <a href="<?php echo get_permalink( $loop->post->ID ) ?>" title="<?php echo esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID); ?>">
    <?php woocommerce_show_product_sale_flash( $post, $product ); ?>
    <?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="'. the_title() .'" />'; ?>
    <h3><?php the_title(); ?></h3>
    <span class="price"><?php echo $product->get_price_html(); ?></span>
  </a>
  <?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>

</pre>

CSS

.product .add_to_cart_button.loading{
	overflow: hidden;
	width: 30px;
	height: 30px;
	margin: 0 auto;
	background: #DDD;
	position: relative;
	color: rgba(0,0,0,0);
}
.product .add_to_cart_button.loading::before{
	top: 0;
	left: 0;
	content: '';
	width: 30px;
	height: 30px;
	position: absolute;
	background-image: url('../onlineStore/img/preloader.gif');
	background-position: center center;
	background-size: 100%;
}
.product .add_to_cart_button.added{
	display: none;
}