woocommerce: cambie la calificación del producto en bucle de formato textual a formato de visualización de estrellas

3 minutos de lectura

avatar de usuario de krishna89
krishna89

Estoy tratando de mostrar los productos de Woocommerce en bucle, mientras hacía esto noté que la revisión del producto se muestra en formato textual como “4.5 de 5”, pero estoy buscando una pantalla de tipo estrella ingrese la descripción de la imagen aquí

Y no estoy seguro de si esto se debe a mi tema, busqué en Google pero no pude obtener sugerencias adecuadas sobre esto.

avatar de usuario de amespower
amespower

Su rango de calificación de estrellas se establece en una fuente de texto. Cambie eso en el siguiente archivo: plugins/woocommerce/assets/css/woocommerce.css:

.star-rating span {
    font-family: "star";
}

  • Gracias por responder bklynM también Lo siento por la respuesta tardía. Revisé tu punto y lo encontré. Correcto. En mi complemento, en realidad estoy mostrando la lista de productos usando mi código personalizado y, como parte de esto, tenía esto <span class="col-md-6 col-sm-6 col-xs-6 product_maindetails_review woocommerce"> <?php woocommerce_template_loop_rating(); ?> </span> pero el div de marcado HTML de salida de calificación se muestra fuera de las etiquetas de intervalo

    – krishna89

    18 de agosto de 2015 a las 16:31


  • mi expectativa es que el woocommerce la clase de lapso ayudaría .star-rating span para ponerse al día con los estilos y fuentes predefinidos en woocommerce.css

    – krishna89

    18 de agosto de 2015 a las 16:38

  • No estoy seguro de seguirte. woocommerce_template_loop_rating() obtiene el archivo loop/rating.php. ¿Quiere decir que su html y sus clases no están saliendo como se esperaba? Posiblemente deba mirar el enlace “woocommerce_product_get_rating_html”. Mira aquí: hookr.io/filters/woocommerce_product_get_rating_html . Busque pistas en los archivos woocommerce/includes/abstracts/abstract-wc-product.php y woocommerce/includes/widgets/class-wc-widget-recent-reviews.php. Si he entendido mal, házmelo saber.

    – poder de ames

    18 de agosto de 2015 a las 18:56

  • Me di cuenta de la solución bklynM. Se trata de incluir la clase woocommerce y pongo la funcion woocommerce_template_loop_rating() en <div class="woocommerce"></div>. Esto ha funcionado para mí. Estoy editando un poco tu respuesta anterior. Gracias.

    – krishna89

    19 de agosto de 2015 a las 10:06

avatar de usuario de drjorgepolanco
jorgepolanco

La clase .star-rating está envuelta dentro de la clase .woocommerce. Dicho esto, para que pueda mostrar las estrellas en lugar del promedio real en el texto, debe agregar la clase .woocommerce a cualquiera de los padres de su calificación .star.

Puedes ver el css en plugins/woocommerce/assets/css/woocommerce.scss

Agregue este código para obtener la calificación en su bucle y ajuste el bucle con la clase .woocommerce.

<?php woocommerce_get_template( 'single-product/rating.php' ); ?>

Ejemplo

<ul class="woocommerce">

    <?php  

        $args = array(
            'post_type' => 'product',
            'order_by'  => 'post_id',
            'order'     => 'ASC'
        );


        $loop = new WP_Query($args);

    ?>

    <?php  while ($loop -> have_posts()) : $loop -> the_post(); ?>
        
        <li>
            <?php the_post_thumbnail(); ?>
            <?php woocommerce_get_template( 'loop/price.php' ); ?>
            <?php woocommerce_get_template( 'single-product/rating.php' ); ?>
            <?php woocommerce_get_template( 'loop/add-to-cart.php' ); ?>
        </li>

    <?php endwhile; ?>
</ul>

¿Ha sido útil esta solución?