web-dev-qa-db-fra.com

WooCommerce montrant un classement par étoiles au lieu d'une chaîne de révision de texte

Sur mon site WooCommerce, j'essaie d'indiquer le nombre d'étoiles d'un produit examiné. Au lieu de cela, il affiche ceci:

Évalué 3,38 sur 5 basé sur 8 évaluations clients

Qu'est-ce qui me manque avec le code suivant?

$rating_count = $product->get_rating_count();
$review_count = $product->get_review_count();
$average      = $product->get_average_rating();
echo wc_get_rating_html( $average, $rating_count );

Lorsque je passe de mon thème personnalisé au thème WordPress par défaut, les notations s'affichent.

woocommerceratingreview
1
Zach Smith

Souffert du même problème. Finalement, après beaucoup de recherches et d’essais, j’ai trouvé cette solution.

Cela obtient le modèle d'où la note est affichée. Mais cela s’affiche comme ceci: Rated 4.50 out of 5 based on 2 customer ratings (2 customer reviews)

<div class="rating-custom">
    <?php wc_get_template( 'single-product/rating.php' ); ?>
</div>

Ensuite, collez ce code CSS dans un fichier CSS personnalisé.

/*star rating for products*/
.rating-custom div.product .woocommerce-product-rating {
    margin-bottom: 1.618em;
}

.rating-custom .woocommerce-product-rating .star-rating {
    margin: .5em 4px 0 0;
    float: left;
}

.rating-custom .woocommerce-product-rating::after, .rating-custom .woocommerce-product-rating::before {

    content: ' ';
    display: table;

}

.rating-custom .woocommerce-product-rating {
    line-height: 2;
}

.rating-custom .star-rating {
    float: right;
    overflow: hidden;
    position: relative;
    height: 1em;
    line-height: 1;
    font-size: 1em;
    width: 5.4em;
    font-family: star;
}

.rating-custom .star-rating::before {
    content: '\73\73\73\73\73';
    color: #d3ced2;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
}

.rating-custom .star-rating {
    line-height: 1;
    font-size: 1em;
    font-family: star;
}

.rating-custom .star-rating span {
    overflow: hidden;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
    padding-top: 1.5em;
}

.rating-custom .star-rating span::before {
    content: '\53\53\53\53\53';
    top: 0;
    position: absolute;
    left: 0;
}

.rating-custom .star-rating span {

    overflow: hidden;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
    padding-top: 1.5em;

}

Sortie:

 rating output 

3
Regolith

Peut-être est-il plus facile d’intégrer une solution existante pour obtenir ce que vous voulez. Voir l'image ci-dessous:

 Rating Score 

J'ai récemment trouvé des critiques TrustFeed pour WooCommerce, qui m'ont aidé à remplacer les formulaires de base simples et ennuyeux de critiques de WooCommerce par une solution de notation avancée et dynamique, qui inspirent réellement les acheteurs à en acheter davantage!

Le plugin est gratuit et peut être téléchargé via le dépôt officiel du plugin WordPress:

https://wordpress.org/plugins/trustfeed-reviews-and-customer-feedback-for-woocommerce/

Il comprend des fonctionnalités spéciales pour aider les entreprises en ligne honnêtes à collecter et à mettre en valeur les avis de clients afin de stimuler les ventes, les conversions, la confiance et les preuves sociales.

Certaines caractéristiques spéciales sont:

  • Créez des enquêtes de satisfaction personnalisées
    • Classement par étoiles
    • Tags dynamiques
    • Avis texte
    • Plus à venir…
  • Envoyez des courriels après l'achat pour encourager les acheteurs à laisser des commentaires.
  • Recueillir des critiques à l'échelle.
  • Présentez les commentaires sur les principaux points de conversion de votre site Web.
  • Affichez vos avis dans un format utile, réactif et personnalisable.
  • Modérer et gérer les commentaires/critiques.
  • Créez un mini-site pour augmenter votre référencement avec le contenu généré par l'utilisateur
  • Personnaliser l'apparence du widget.
  • Apprendre des informations basées sur les données

Toi bonne nouvelle. Vous pouvez commencer gratuitement!

  • Pour en savoir plus sur TrustFeed, visitez le site www.trustfeed.co.
  • Pour afficher le panneau d'administration, connectez-vous simplement à https://admin.trustfeed.co et créez un compte gratuit.
0
Alex