wordpress - shortcodes - ¿Cómo se agregan las clasificaciones de estrellas para productos en woocommerce?

woocommerce caracteristicas

Question

Tengo una tienda woocommerce y quiero agregar calificaciones por estrellas a cada uno de los productos cuando veas sus miniaturas. Ya tengo las estrellas en la gran vista de productos, pero quiero que se muestren debajo de cada miniatura como en la mayoría de las tiendas de comercio electrónico como timberland.com. Sé que puedo usar css para deshabilitar elementos de la vista pero no agregarlos. ¿Alguna idea?

Answer 1

De hecho, hay una manera mucho más lacónica de manejar esto. Simplemente use las funciones incorporadas que Woocommerce ha construido:

add_action(''woocommerce_after_shop_loop_item'', ''get_star_rating'' );
function get_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>'';
}

He confirmado que esto funciona para mí.

Answer 2

Con esas funciones (o la más corta a continuación, que emite el mismo HTML), logra generar la calificación en números, reutilizando completamente las funciones de Woocommerce:

function get_star_rating() {
global $woocommerce, $product;
/*$average = $product->get_average_rating();*/
echo $product->get_rating_html();
}

Entonces necesitas darle un estilo para mostrar las estrellas. Para una calificación de 3 de 5 estrellas, Woothemes lo hace así (el truco está en el ancho y: antes del CSS correspondiente):

HTML (salida por Woocommerce):

<div itemprop="reviewRating" itemscope="" itemtype="http://schema.org/Rating" class="star-rating" title="Rated 3 out of 5">
<span style="width:60%"><strong itemprop="ratingValue">3</strong> out of 5</span>
</div>

Y el CSS (puede haber algunas líneas redundantes aquí):

#reviews .comment .star-rating {
float: none;
font-size: 1em;
margin: 0;
position: absolute;
top: 2px;
right: 20px;
}
.star-rating {
overflow: hidden;
height: 1em;
line-height: 1em;
width: 5.1em;
font-family: "fontawesome";
}
.star-rating:before {
content: "/f006/f006/f006/f006/f006";
float: left;
top: 0;
left: 0;
position: absolute;
letter-spacing: 0.1em;
letter-spacing: 0/9;
color: #fbfeff;
}
.star-rating span {
overflow: hidden;
float: left;
top: 0;
left: 0;
position: absolute;
padding-top: 1.5em;
}
.star-rating span:before {
content: "/f005/f005/f005/f005/f005";
top: 0;
position: absolute;
left: 0;
letter-spacing: 0.1em;
letter-spacing: 0/9;
color: #f36557;
}
.star-rating {
line-height: 1em;
font-size: 1em;
font-family: "fontawesome";
}

¡Espero que ayude!

Answer 3

A partir de WooCommerce 3.0+ este es el código correcto:

$product = wc_get_product( $id );
echo wc_get_rating_html( $product->get_average_rating() );

El método get_rating_html () en el objeto del producto ha sido desaprobado.

Más información aquí: https://docs.woocommerce.com/wc-apidocs/function-wc_get_rating_html.html

Answer 4

Puedes poner esto en tu archivo themes functions.php:

add_action(''woocommerce_after_shop_loop_item'', ''my_print_stars'' );
function my_print_stars(){
global $wpdb;
global $post;
$count = $wpdb->get_var("
SELECT COUNT(meta_value) FROM $wpdb->commentmeta
LEFT JOIN $wpdb->comments ON $wpdb->commentmeta.comment_id = $wpdb->comments.comment_ID
WHERE meta_key = ''rating''
AND comment_post_ID = $post->ID
AND comment_approved = ''1''
AND meta_value > 0
");
$rating = $wpdb->get_var("
SELECT SUM(meta_value) FROM $wpdb->commentmeta
LEFT JOIN $wpdb->comments ON $wpdb->commentmeta.comment_id = $wpdb->comments.comment_ID
WHERE meta_key = ''rating''
AND comment_post_ID = $post->ID
AND comment_approved = ''1''
");
if ( $count > 0 ) {
$average = number_format($rating / $count, 2);
echo ''<div class="starwrapper" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">'';
echo ''<span class="star-rating" title="''.sprintf(__(''Rated %s out of 5'', ''woocommerce''), $average).''"><span style="width:''.($average*16).''px"><span itemprop="ratingValue" class="rating">''.$average.''</span> </span></span>'';
echo ''</div>'';
}
}

Tenga en cuenta que es posible que necesite cambiar woocommerce_after_shop_loop_item a un gancho diferente según su diseño y dónde exactamente desea que aparezcan las estrellas.

Esta página enumera los ganchos de acción de WooCommerce : http://wcdocs.woothemes.com/codex/extending/hooks/ . No veo ningún gancho asociado específicamente a la miniatura, pero puedes probar woocommerce_after_shop_loop_item_title o woocommerce_after_shop_loop_item .

(Esta función es esencialmente copiada de single-product-reviews.php de WooCommerce)