WP_Query pentru Produse WooCommerce

Question

WP_Query pentru Produse WooCommerce

19 apr. 2018, 18:03:40

Vizualizări: 54.5K

Voturi: 5

Încerc să afișez produsele WooCommerce într-o buclă personalizată. Acesta este codul meu:

<?php
  // Argumentele pentru interogarea produselor
  $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" alt="Rating produs" title="Rating produs" />
        </div>
        <p class="description">Material nylon ușor și design T-back pentru o potrivire confortabilă. Mărimi Junior...</p>
        <div class="useraction">
           <a href="#" class="wishlist" data-toggle="tooltip" title="Listă dorințe"><i class="fas fa-heart"></i></a>
           <a href="#" class="addtocart" data-toggle="tooltip" title="Adaugă în coș"><i class="fas fa-cart-plus"></i> Adaugă în coș</a>
           <a href="#" class="quickview" data-toggle="tooltip" title="Previzualizare rapidă"><i class="fas fa-eye"></i></a>
        </div>
     </figcaption>
 </figure>

Am reușit să afișez titlul, prețul și link-ul produsului, dar dacă aveți o opțiune mai bună vă rog să-mi spuneți, voi aprecia acest lucru. Acum încerc să afișez rating-ul produsului cu stele, descrierea scurtă și butonul de adăugare în coș, precum și lista de dorințe și previzualizarea rapidă. Cum pot face asta? Aveți vreo opțiune mai bună?

Milan Bastola

297

wp query dezvoltare teme woocommerce offtopic interogare e commerce

Comentarii

Ar trebui să eviți utilizarea WP_Query(). Vezi aici: https://cfxdesign.com/create-a-custom-woocommerce-product-loop-the-right-way/. Deși întrebi pentru mai multe detalii despre cum să personalizezi efectiv output-ul loop-ului, ceea ce este mai degrabă o întrebare de template.

cfx

24 mai 2018 22:18:55

Toate răspunsurile la întrebare

Comentarii

acesta nu este soluția pe care o caut.

Milan Bastola

20 apr. 2018 17:39:44

Pentru a afișa evaluarea stele a produsului în codul tău

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

Acum mergi la functions.php în folderul temei tale și inserează codul de mai jos

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> '.__( 'din 5', 'woocommerce' ).'</span></div>';
}
add_action('woocommerce_after_shop_loop_item', 'add_star_rating' );

Acum mergi la style.css în folderul temei tale și inserează codul de mai jos

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


.star-rating {
    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;
}

vei găsi fișierul star.woff în calea de mai jos

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

copiază-l și lipește-l în directorul tău, apoi leagă-l pentru fișierul css

Md. Mehedi Hassan

3

7 sept. 2019 15:22:29

Dharmishtha Patel 713 · Accepted Answer · 2018-04-20T10:14:43Z

<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 __( 'Nu s-au găsit produse' );
        }
        wp_reset_postdata();
    ?>
</ul><!--/.products-->

Dharmishtha Patel

713

20 apr. 2018 10:14:43