WP_Query for WooCommerce Products

Question

I am trying to display WooCommerce products in custom loop. This is my code:

<?php
  $args = array( 'post_type' => 'product', 'posts_per_page' => 6, 'product_cat' => 'apparel', 'orderby' => 'date' );
  $loop = new WP_Query( $args );
  while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>

  <div class="col-4">
    <figure class="figure">
      <a href="<?php echo get_permalink( $loop->post->ID ) ?>">
         <?php echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog');?>
      </a>
      <div class="updetails">
        <p class="price">$<?php echo $product->get_price(); ?></p>
           <p class="offer"><?php woocommerce_show_product_sale_flash( $post, $product ); ?></p>
      </div>
      <figcaption class="figure-caption">
        <h3 class="title"><?php echo the_title(); ?></h3>
        <div class="rating">
          <img src="<?php echo get_template_directory_uri(); ?>/img/rating.png" class="img-fluid" />
        </div>
        <p class="description">Lightweight nylon and T-back design for a comfortable fit. Junior Sizes...</p>
        <div class="useraction">
           <a href="#" class="wishlist" data-toggle="tooltip" title="Wishlist"><i class="fas fa-heart"></i></a>
           <a href="#" class="addtocart" data-toggle="tooltip" title="Add To Cart"><i class="fas fa-cart-plus"></i> Add To Cart</a>
           <a href="#" class="quickview" data-toggle="tooltip" title="Quickview"><i class="fas fa-eye"></i></a>
        </div>
     </figcaption>
 </figure>

I have managed to display title, price and product link, But If you have better option please do let me know, I will appreciate this. I am now trying to display product star rating, short description and add to cart button as well as wishlist and quickview. How can I do that? Do you have any better option?

Answer 1

<ul class="products">
    <?php
        $args = array(
            'post_type' => 'product',
            'posts_per_page' => 12
            );
        $loop = new WP_Query( $args );
        if ( $loop->have_posts() ) {
            while ( $loop->have_posts() ) : $loop->the_post();
                wc_get_template_part( 'content', 'product' );
            endwhile;
        } else {
            echo __( 'No products found' );
        }
        wp_reset_postdata();
    ?>
</ul><!--/.products-->

Answer 2

For display product star rating in your code

<div class="rating">
      <?php add_star_rating(); ?>
</div>

Now go to functios.php in your theme folder and insert the code below

function add_star_rating(){
    global $woocommerce, $product;
    $average = $product->get_average_rating();

    echo '<div class="star-rating"><span style="width:'.( ( $average / 5 ) * 100 ) . '%"><strong itemprop="ratingValue" class="rating">'.$average.'</strong> '.__( 'out of 5', 'woocommerce' ).'</span></div>';
}
add_action('woocommerce_after_shop_loop_item', 'add_star_rating' );

Now go to style.css in your theme folder and insert the code below

@font-face {
  font-family: star;
  src: url("../lets_buy_24/assets/fonts/star.woff") format("woff");
  font-style: normal;
  font-weight: 400;
}


.star-rating {
    /*font-size: .857em;
    display: block;
    float: none;
    float: right;*/
    margin: .3em 0;
    overflow: hidden;
    position: relative;
    height: 1em;
    line-height: 1;
    font-size: 1em;
    width: 5.4em;
    font-family: star;
}

.star-rating::before {
    content: "\73\73\73\73\73";
    color: #df3737;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
}

.star-rating span {
    overflow: hidden;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
    padding-top: 1.5em;
}

.star-rating span::before {
    content: "\53\53\53\53\53";
    top: 0;
    position: absolute;
    left: 0;
    color: #df3737;
}

.star-rating strong {
    display: block;
}

you will find the star.woff file in the the below path

wordpress\wp-content\plugins\woocommerce\assets\fonts\star.woff

copy it and pest your directory and link it for css file