programing

woocommerce에서 제품에 대한 별 등급은 어떻게 추가합니까?

minimums 2023. 3. 9. 21:56
반응형

woocommerce에서 제품에 대한 별 등급은 어떻게 추가합니까?

저는 woocommerce 매장을 가지고 있는데, 각 제품의 썸네일이 보이면 별점을 붙이고 싶습니다.이미 큰 제품 뷰에 별표가 있습니다만, timberland.com 등 대부분의 전자상거래 스토어처럼 각 섬네일 아래에 별표가 표시되도록 하고 싶습니다.css를 사용하여 항목을 보기에서 비활성화할 수 있지만 추가할 수 없습니다.무슨 생각 있어?

사실 훨씬 더 간단한 방법이 있어요.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>';
}

나는 이것이 나에게 효과가 있다는 것을 확인했다.

테마 기능에 넣을 수 있습니다.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의 단일 제품 리뷰에서 복사한 것입니다.php)

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 를 참조해 주세요.

이러한 함수(또는 같은 HTML을 출력하는 아래의 짧은 함수)를 사용하면 Woocommerce의 함수를 완전히 재사용하여 등급을 숫자로 출력할 수 있습니다.

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

그럼 스타일에 맞춰서 해야죠.별 5개 중 3개의 등급이 매겨진 경우 Woothemes는 다음과 같이 수행합니다(해당 CSS의 폭과 : 앞에 함).

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

도움이 됐으면 좋겠네요!

언급URL : https://stackoverflow.com/questions/14227121/how-do-you-add-the-star-ratings-for-products-in-woocommerce

반응형