我有一个woocommerce商店,当你看到他们的缩略图时,我想为每个产品添加星级 . 我已经在大产品视图中拥有明星,但我希望它们显示在每个缩略图下方,就像大多数电子商务商店一样,例如timberland.com . 我知道我可以使用css来禁用视图中的项目,但不能添加它们 . 有什么想法吗?
你可以把它放到你的主题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_after_shop_loop_item
此页面列出了 WooCommerce 动作挂钩:http://wcdocs.woothemes.com/codex/extending/hooks/ . 我没有看到任何与缩略图相关的钩子,但您可以尝试 woocommerce_after_shop_loop_item_title 或 woocommerce_after_shop_loop_item .
woocommerce_after_shop_loop_item_title
(此功能基本上是从WooCommerce的single-product-reviews.php复制的)
实际上有一种更简洁的方法来处理这个问题 . 只需使用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>'; }
我已经确认这对我有用 .
使用这些功能(或下面较短的功能,输出相同的HTML),您设法输出数字评级,完全重用Woocommerce的功能:
function get_star_rating() { global $woocommerce, $product; /*$average = $product->get_average_rating();*/ echo $product->get_rating_html(); }
然后你需要设计它以显示星星 . 对于3星中的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"; }
希望有所帮助!
从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
4 回答
你可以把它放到你的主题functions.php文件中:
请注意,您可能需要将
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复制的)
实际上有一种更简洁的方法来处理这个问题 . 只需使用Woocommerce构建的内置函数:
我已经确认这对我有用 .
使用这些功能(或下面较短的功能,输出相同的HTML),您设法输出数字评级,完全重用Woocommerce的功能:
然后你需要设计它以显示星星 . 对于3星中的3星评级,Woothemes就是这样做的(诀窍在于宽度和:相应的CSS之前):
HTML(Woocommerce输出):
和CSS(这里可能有一些冗余行):
希望有所帮助!
从WooCommerce 3.0开始,这是正确的代码:
不推荐使用产品对象上的get_rating_html()方法 .
更多信息:https://docs.woocommerce.com/wc-apidocs/function-wc_get_rating_html.html