WP_Query per Prodotti WooCommerce

Question

WP_Query per Prodotti WooCommerce

19 apr 2018, 18:03:40

Visualizzazioni: 54.5K

Voti: 5

Sto cercando di visualizzare i prodotti WooCommerce in un loop personalizzato. Questo è il mio codice:

<?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">Nylon leggero e design a T per una vestibilità confortevole. Taglie Junior...</p>
        <div class="useraction">
           <a href="#" class="wishlist" data-toggle="tooltip" title="Lista dei desideri"><i class="fas fa-heart"></i></a>
           <a href="#" class="addtocart" data-toggle="tooltip" title="Aggiungi al carrello"><i class="fas fa-cart-plus"></i> Aggiungi al carrello</a>
           <a href="#" class="quickview" data-toggle="tooltip" title="Anteprima rapida"><i class="fas fa-eye"></i></a>
        </div>
     </figcaption>
 </figure>

Sono riuscito a visualizzare il titolo, il prezzo e il link del prodotto, ma se avete opzioni migliori vi prego di farmelo sapere, lo apprezzerei molto. Ora sto cercando di visualizzare anche la valutazione a stelle del prodotto, la descrizione breve e il pulsante aggiungi al carrello, così come la lista dei desideri e l'anteprima rapida. Come posso farlo? Avete qualche opzione migliore?

Milan Bastola

297

wp query sviluppo temi woocommerce offtopic query e commerce

Commenti

Dovresti evitare di usare WP_Query(). Vedi qui: https://cfxdesign.com/create-a-custom-woocommerce-product-loop-the-right-way/. Anche se stai chiedendo maggiori dettagli su come personalizzare l'output effettivo del loop, che è più una questione di templating.

cfx

24 mag 2018 22:18:55

Tutte le risposte alla domanda

Commenti

questa non è la soluzione che sto cercando.

Milan Bastola

20 apr 2018 17:39:44

Per visualizzare la valutazione a stelle del prodotto nel tuo codice

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

Ora vai nel file functions.php nella cartella del tuo tema e inserisci il codice seguente

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

Ora vai nel file style.css nella cartella del tuo tema e inserisci il codice seguente

@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;
}

troverai il file star.woff nel seguente percorso

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

copialo e incollalo nella tua directory e collegalo al file css

Md. Mehedi Hassan

3

7 set 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 __( 'Nessun prodotto trovato' );
        }
        wp_reset_postdata();
    ?>
</ul><!--/.products-->

Dharmishtha Patel

713

20 apr 2018 10:14:43