Tagged: , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • October 8, 2015 at 12:05 pm #515711
    anniet

    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 ?

    October 8, 2015 at 3:42 pm #515900
    Elliott

    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

    • This reply was modified 10 years, 1 month ago by Elliott.
    October 9, 2015 at 2:49 pm #516484
    anniet

    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;

    October 9, 2015 at 4:55 pm #516571
    Elliott

    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

    October 9, 2015 at 5:44 pm #516603
    anniet

    Thanks,
    I will try
    Where should I put the javascipt ?

    October 12, 2015 at 9:30 am #517204
    Ismael

    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

    October 12, 2015 at 10:47 am #517240
    anniet

    Thanks Ismael, you’re the king of the CSS. The quick css works perfectly.

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘adding number next to the stars in the product reviews’ is closed to new replies.