web-dev-qa-db-ja.com

ウーコマースの製品の星評価をどのように追加しますか？

私はwoocommerceストアを持っていて、サムネイルが表示されたら、各製品に星評価を追加したいと思います。私はすでに大きな製品ビューで星を持っていますが、timberland.comのようなほとんどのeコマースストアのように、各サムネイルの下に星を表示したいと思います。私はcssを使用してビューからアイテムを無効にできますが、追加できないことを知っています。何かご意見は？

wordpresse-commerceratingwoocommerce
7
kbsas14

これをテーマの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>';
    }

}

デザインや星を表示したい場所によっては、woocommerce_after_shop_loop_itemを別のフックに変更する必要がある場合があります。

このページには、WooCommerceアクションフックがリストされています： http://wcdocs.woothemes.com/codex/extending/hooks/ 。特にサムネイルに関連付けられているフックはありませんが、woocommerce_after_shop_loop_item_titleまたはwoocommerce_after_shop_loop_itemを試してみてください。

（この関数は基本的にWooCommerceのsingle-product-reviews.phpからコピーされます）

17
root

これを処理するには、実際にはもっと簡潔な方法があります。 Woocommerceが作成した組み込み関数を使用するだけです。

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

これでうまくいくことを確認しました。

14
Martyn Chamberlin

これらの関数（または同じHTMLを出力する以下の短い関数）を使用すると、Woocommerceの関数を完全に再利用して、評価を数値で出力できます。

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

次に、星を表示するようにスタイルを設定する必要があります。 5つ星のうち3つの評価の場合、Woothemesは次のようにします（トリックは、対応するCSSの幅と：beforeにあります）。

HTML（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>

そしてCSS（ここにいくつかの冗長な行があるかもしれません）：

#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";
}

お役に立てば幸いです。

1
Jacobo Polavieja

WooCommerce 3.0以降では、これは正しいコードです。

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

製品オブジェクトのget_rating_html（）メソッドは廃止されました。

詳細はこちら： https://docs.woocommerce.com/wc-apidocs/function-wc_get_rating_html.html

1
ryanka