Come si fa ad aggiungere la classificazione a stelle per i prodotti woocommerce?

Ho un negozio woocommerce e voglio aggiungere star rating, per ciascuno dei prodotti quando vedi che le loro miniature. Ho già le stelle in un prodotto di grande prospettiva, ma non li voglio visualizzare sotto ogni miniatura come la maggior parte degli e-commerce negozi timberland.com. So che posso usare i css per disattivare gli elementi da visualizzare, ma non aggiungerli. Ogni pensiero?

OriginaleL’autore kbsas14 | 2013-01-09

4 Replies
  1. 15

    Si può mettere questo nel vostro temi functions.php file:

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

    Si noti che potrebbe essere necessario modificare woocommerce_after_shop_loop_item a un diverso gancio a seconda del design e esattamente dove si desidera che le stelle.

    In questa pagina sono elencati WooCommerce azione ganci: http://wcdocs.woothemes.com/codex/extending/hooks/ . Non vedo ganci associati con la miniatura in particolare, ma si può provare woocommerce_after_shop_loop_item_title o woocommerce_after_shop_loop_item.

    (Questa funzione è essenzialmente copiato da WooCommerce s single-product-reviews.php)

    Che è esattamente quello che cercavo, grazie.
    Grazie. Mi ha davvero aiutato un sacco!

    OriginaleL’autore root

  2. 10

    C’è in realtà molto più conciso modo di gestire questo. Basta utilizzare il built-in funzioni di Woocommerce ha costruito:

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

    Ho confermato che questo funziona per me.

    Non dimenticare di controllare che il woocommerce plugin è abilitato avvolgendo il codice sopra in un if condizione: if (in_array('woocommerce/woocommerce.php', apply_filters('active_plugins', get_option('active_plugins')))) { ... }

    OriginaleL’autore Martyn Chamberlin

  3. 1

    Con quelle funzioni (o uno più breve, di seguito, le uscite che lo stesso codice HTML), si riesce a uscita la valutazione in numeri, il riutilizzo di Woocommerce funzioni completamente:

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

    Allora avete bisogno di stile per mostrare le stelle. Per una valutazione di 3 stelle su 5, Woothemes fa come questo (il trucco è nella larghezza e l’ :prima di CSS corrispondente):

    HTML (uscita da 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>

    E il CSS (ci possono essere alcune linee ridondanti qui):

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

    Speranza che aiuta!

    Ok, subito dopo la pubblicazione di questo ho finalmente trovato questo viene fatto tramite CSS. Woothemes sono grandi esempi di come è donde, nel caso in cui nessuno chiedendo. Grazie comunque!
    Quindi, forse, andare avanti e post come hai fatto per il resto di noi a vedere..??
    Beh, io ho detto come ho fatto. Doveva andare e controllare qualsiasi woocommerce tema da woothemes. Non ho messo il codice, perché non so se è davvero giusto… ma comunque, ho modificato la risposta con il codice. Vorrei andare la fonte originale ancora. Spero che questo chiarisce un po ‘ però. Evviva!

    OriginaleL’autore Jacobo Polavieja

Lascia un commento