WP_Query for WooCommerce产品

时间:2018-04-19 作者:Milan Bastola

我试图在自定义循环中显示WooCommerce产品。这是我的代码:

<?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>

我已经设法显示标题,价格和产品链接,但如果你有更好的选择,请让我知道,我将不胜感激。我现在正在尝试显示产品星级、简短描述、添加到购物车按钮以及愿望列表和快速查看。我该怎么做?你有更好的选择吗?

2 个回复
最合适的回答,由SO网友:Dharmishtha Patel 整理而成
<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-->
SO网友:Md. Mehedi Hassan

用于在代码中显示产品星级

<div class="rating">
      <?php add_star_rating(); ?>
</div>
现在转到functios。在主题文件夹中输入php,并插入下面的代码

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\' );
现在转到样式。css,并在下面插入代码

@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;
}
你会找到那颗星的。以下路径中的woff文件

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

复制它并有害于您的目录并将其链接到css文件

结束