Hi,
I would like to have the numbers shown next to the stars in the product page. It appears on hoover but I would like to have it in the text
the stars (7 avis client, Note 4.71 sur 5)
Do you have a quick css to do that ?
Hey anniet!
You wouldn’t be able to do that with just CSS. You would need to edit Woocommerce. Perhaps this will help, http://clicknathan.com/web-design/better-woocommerce-star-ratings-shortcode-plugin/.
Cheers!
Elliott
Are you sure?
It was possible in Abundance with this code
#top div .star-rating span, div #reviews #comments ol.commentlist li:nth-child(odd) .comment-text .star-rating span {
height: 16px;
}
and I can see the data when I hoover on the stars, so it is in the code. It is just a question of showing it;
Hi!
Pretty sure. Yes, it’s set as the title but you cannot access attributes via CSS. Perhaps some javascripting might work.
<script type = "text/javascript">
jQuery(document).ready(function(){
var title = jQuery('.star-rating').attr('title');
jQuery('.star-rating').append(title);
});
</script>
Regards,
Elliott
Thanks,
I will try
Where should I put the javascipt ?
Hi!
You can add this in the functions.php file:
function add_custom_script(){
?>
<script>
jQuery(document).ready(function(){
var title = jQuery('.star-rating').attr('title');
jQuery('.star-rating').append(title);
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');
Or try this in the Quick CSS field:
.entry-summary .woocommerce-product-rating .star-rating:before {
content: attr(title);
position: absolute;
width: 200px;
display: block;
bottom: -20px;
font-size: 12px;
}
Regards,
Ismael
Thanks Ismael, you’re the king of the CSS. The quick css works perfectly.