web-dev-qa-db-ja.com

テキストレビュー文字列ではなくスター評価レビューを表示しているWooCommerce

私のWooCommerceサイトで、私はレビューされた製品の星評価を出力しようとしています。代わりに、これを出力します。

8のカスタマー評価に基づく5のうち3.38の評価

次のコードで何が足りないのですか？

$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 );

カスタムテーマからデフォルトのWordPressテーマに切り替えると、評価が表示されます。

woocommerceratingreview
1
Zach Smith

同じ問題を抱えていた。検索と試行錯誤の末、ようやく私はこの解決策を思い付きました。

これは評価が表示されるテンプレートを取得します。しかし、それはこのように表示されます：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>

次に、このCSSコードをカスタムCSSに貼り付けます。

/*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;

}

出力：

rating output 

3
Regolith

おそらく、既存のソリューションを統合して必要なものを実現する方が簡単です。下の画像を参照してください。

Rating Score 

私は最近、WooCommerceのTrustFeedレビューを見つけました。基本的でつまらないWooCommerceレビューフォームを、実際に買い物客にもっと購入を促す高度で動的な評価およびレビューソリューションに置き換えるのに役立ちました。

このプラグインは無料で、公式のWordPressプラグインリポジトリからダウンロードすることができます。

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

それは販売、コンバージョン、信頼および社会的証拠を後押しするために誠実なオンラインビジネスが顧客レビューを集めて見せるのを助けるために特別な機能が付いています。

いくつかの特別な機能があります：

  • カスタム満足度調査を作成する
    • 星の評価
    • 動的タグ
    • テキストレビュー
    • もっと来て…
  • 買い物客がレビューを残すことを奨励するために購入後にメールを送信する。
  • 大規模なレビューを収集します。
  • あなたのウェブサイトの主な転換点に関するレビューを紹介します。
  • レビューを便利で即応性のあるカスタマイズ可能な形式で表示します。
  • フィードバック/レビューを管理および管理します。
  • ユーザー生成コンテンツでSEOを増やすためのミニサイトを作成する
  • ウィジェットの外観をカスタマイズする.
  • データ駆動型の洞察から学ぶ

良いニュースです。あなたは無料で始めることができます！

  • TrustFeedの詳細については、www.trustfeed.coをご覧ください。
  • 管理パネルを表示するには、 https://admin.trustfeed.co にログインして無料アカウントを作成してください。
0
Alex