Tagged: , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #515711

    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 ?

    #515900

    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 9 years, 1 month ago by Elliott.
    #516484

    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;

    #516571

    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

    #516603

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

    #517204

    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

    #517240

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

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.