AI Search

Classic Search

Search Phrase:

Search Type:

Advanced search options

Search in Forums:

Search in date period:

Sort Search Results by:

AI Assistant

Notifications

Clear all

[Solved] Custom Shape for Custom Ratings

✦ Summarize Topic

How-to and Troubleshooting

Last Post by Zo.Zo.Lee 5 months ago

5 Posts

2 Users

1 Reactions

5,681 Views

RSS

Posts: 9

Zo.Zo.Lee

Topic starter

Translate ▼

Aug 04, 2025 11:01 am

(@zo-zo-lee)

Active Member

Joined: 5 months ago

[#10852]

If I add a custom icon to my custom rating field, it makes no sense to display the result as stars anyway... (in this case, it should be a range from too small to too loose, so 3 is perfect, not 5)

How can I change the shape for the results display so that it's bars instead of stars?

Topic Tags

ratings

4 Replies

Posts: 132

Jacob

Support

Translate ▼

Aug 04, 2025 5:27 pm

(@jacob)

Estimable Member

Joined: 10 years ago

Hi @zo-zo-lee

Check these links out, please.

https://wpdiscuz.com/docs/codex/filters/wpdiscuz_half_star_svg/
https://wpdiscuz.com/docs/codex/filters/wpdiscuz_full_star_svg/

In case you want to say thank you! 🙂

We'd really appreciate if you leave a good review on the plugin page.
This is the best way to say thank you to this project and the support team.

Posts: 9

Zo.Zo.Lee

Topic starter

Translate ▼

Aug 05, 2025 5:33 am

(@zo-zo-lee)

Active Member

Joined: 5 months ago

Thank you!
However, the actual product rating should still be stars. Is there a way to change just one custom rating field.

Posts: 132

Jacob

Support

Translate ▼

Aug 05, 2025 7:38 pm

(@jacob)

Estimable Member

Joined: 10 years ago

@zo-zo-lee

You can use the provided hooks and do something like this

add_filter('wpdiscuz_full_star_svg', function ($svg, $type, $icon) {
    if ($icon === 'fas fa-square') {
        $svg = '<svg width="100" height="100" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10 10 H90 V90 H10 Z" fill="none" class="wpd-star"/></svg>';
    }

    return $svg;
}, 10, 3);

add_filter('wpdiscuz_half_star_svg', function ($svg, $type, $icon) {
    if ($icon === 'fas fa-square') {
        $svg = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10 10 H90 V90 H10 Z" fill="none" class="wpd-star"/><path d="M10 10 H17 V90 H10 Z" fill="none" class="wpd-star wpd-active"/></svg>';
    }

    return $svg;
}, 10, 3);

In case you want to say thank you! 🙂

We'd really appreciate if you leave a good review on the plugin page.
This is the best way to say thank you to this project and the support team.