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 7 months ago

5 Posts

2 Users

1 Reactions

5,805 Views

RSS

Zo.Zo.Lee

(@zo-zo-lee)

Posts: 9

Active Member

Topic starter

Translate ▼

[#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?

Posted : 04/08/2025 11:01 am

Topic Tags

ratings custom shape

Jacob

(@jacob)

Posts: 132

Estimable Member Support

Translate ▼

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.

Posted : 04/08/2025 5:27 pm

Zo.Zo.Lee

(@zo-zo-lee)

Posts: 9

Active Member

Topic starter

Translate ▼

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

Posted : 05/08/2025 5:33 am

Jacob

(@jacob)

Posts: 132

Estimable Member Support

Translate ▼

@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.

Posted : 05/08/2025 7:38 pm

Zo.Zo.Lee

(@zo-zo-lee)

Posts: 9

Active Member

Topic starter

Translate ▼