WP_Query para Productos de WooCommerce

Question

WP_Query para Productos de WooCommerce

19 abr 2018, 18:03:40

Vistas: 54.5K

Votos: 5

Estoy tratando de mostrar productos de WooCommerce en un bucle personalizado. Este es mi código:

<?php
  // Argumentos para consultar productos de la categoría 'apparel'
  $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="Valoración del producto" title="Valoración del producto" />
        </div>
        <p class="description">Nylon ligero y diseño T-back para un ajuste cómodo. Tallas Junior...</p>
        <div class="useraction">
           <a href="#" class="wishlist" data-toggle="tooltip" title="Lista de deseos"><i class="fas fa-heart"></i></a>
           <a href="#" class="addtocart" data-toggle="tooltip" title="Añadir al carrito"><i class="fas fa-cart-plus"></i> Añadir al carrito</a>
           <a href="#" class="quickview" data-toggle="tooltip" title="Vista rápida"><i class="fas fa-eye"></i></a>
        </div>
     </figcaption>
 </figure>

He logrado mostrar el título, precio y enlace del producto, pero si tienes una mejor opción, por favor házmelo saber, lo agradeceré. Ahora estoy intentando mostrar la valoración por estrellas del producto, la descripción corta y el botón de añadir al carrito, así como la lista de deseos y vista rápida. ¿Cómo puedo hacer esto? ¿Tienes alguna mejor opción?

Milan Bastola

297

wp query desarrollo de temas woocommerce fueradetema consulta e commerce

Comentarios

Debes evitar usar WP_Query(). Consulta aquí: https://cfxdesign.com/create-a-custom-woocommerce-product-loop-the-right-way/. Aunque estás preguntando por más detalles sobre cómo personalizar la salida real del loop, lo cual es más una pregunta sobre plantillas.

cfx

24 may 2018 22:18:55

Todas las respuestas a la pregunta

Comentarios

esta no es la solución que estoy buscando.

Milan Bastola

20 abr 2018 17:39:44

Para mostrar la calificación por estrellas de productos en tu código

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

Ahora ve a functions.php en la carpeta de tu tema e inserta el siguiente código

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

Ahora ve a style.css en la carpeta de tu tema e inserta el siguiente código

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

Encontrarás el archivo star.woff en la siguiente ruta

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

cópialo y pégalo en tu directorio y enlázalo para el archivo 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 __( 'No se encontraron productos' );
        }
        wp_reset_postdata();
    ?>
</ul><!--/.products-->

Dharmishtha Patel

713

20 abr 2018 10:14:43