CODEWITHSUNDEEP
wordpressschema.orgrating
Hashmi mart
Hashmi mart

Reputation: 21

Rating is showing numbers instead of stars

I don't know why my website's Schema.org markup is showing number and characters instead of stars.

For example, it's showing "3 out of 5" instead of "***".

How can I fix it?

I'm using WordPress and All In One Schema Rich Snippets plugin.

Upvotes: 2

Views: 2621

Answers (2)

George Obonyo
George Obonyo

Reputation: 21

Am using elementor page builder and I encountered the same problem.Turns out that the problem arises when your are trying to display the star rating on a page other than woocommerce single product pages.

Solution: assign class="woocommerce"

to the elementor widget that you are using to place the star rating. It could be the shortcode widget, html, text editor or anything crazy you are trying to do with elementor

Upvotes: 0

Regolith
Regolith

Reputation: 2982

Suffered with same problem. Finally after lot of search and trial I came up with this solution.

This gets the template where the rating is displayed from. But it displays like this: Rated 4.50 out of 5 based on 2 customer ratings (2 customer reviews)

<div class="rating-custom">
    <?php wc_get_template( 'single-product/rating.php' ); ?>
</div>

Then paste this css code in a custom css.

/*star rating for products*/
.rating-custom div.product .woocommerce-product-rating {
    margin-bottom: 1.618em;
}

.rating-custom .woocommerce-product-rating .star-rating {
    margin: .5em 4px 0 0;
    float: left;
}

.rating-custom .woocommerce-product-rating::after, .rating-custom .woocommerce-product-rating::before {

    content: ' ';
    display: table;

}

.rating-custom .woocommerce-product-rating {
    line-height: 2;
}

.rating-custom .star-rating {
    float: right;
    overflow: hidden;
    position: relative;
    height: 1em;
    line-height: 1;
    font-size: 1em;
    width: 5.4em;
    font-family: star;
}

.rating-custom .star-rating::before {
    content: '\73\73\73\73\73';
    color: #d3ced2;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
}

.rating-custom .star-rating {
    line-height: 1;
    font-size: 1em;
    font-family: star;
}

.rating-custom .star-rating span {
    overflow: hidden;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
    padding-top: 1.5em;
}

.rating-custom .star-rating span::before {
    content: '\53\53\53\53\53';
    top: 0;
    position: absolute;
    left: 0;
}

.rating-custom .star-rating span {

    overflow: hidden;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
    padding-top: 1.5em;

}

Output:

rating output

Upvotes: 2

Related Questions