Design Upgrade for WisdmLabs Ratings, Reviews & Feedback for LearnDash

The Design Upgrade Pro for LearnDash plugin has come a long way in the past 18 months. Today, we’re excited to announce another plugin integration, this time with the WisdmLabs Ratings, Reviews & Feedback plugin. We’ve improved the overall styling of the plugin, plus given you a few color choices and the ability to hide several features.

NOTE
Existing Design Upgrade Pro users, update to version 2.7 or higher to gain access to these new features. Improved styles are available in version 2.5+ of the free plugin.

Jump to: 1:30 for free features, 3:51 for pro features

Recommended Product

If you’re not familiar with Ratings, Reviews & Feedback (RRF), it adds a handful of nice features to your LearnDash-powered site.

• Allow users to leave star ratings & write reviews on your LearnDash courses
• Course reviews can be manually approved
• Ratings can be filtered by star rating and sorted by top comments or most recent
• The star rating shows up alongside the course title when using the LearnDash Course Grid add-on
• Users can send private feedback to administrators once they complete a course

Now let’s talk about how Design Upgrade Pro works with the Ratings, Reviews & Feedback plugin.

Learn more & purchase the Ratings, Reviews & Feedback plugin →

Ratings, Reviews & Feedback Integration

It’s important to mention that our free Design Upgrade for LearnDash plugin includes all of the base styling upgrades for the Ratings, Reviews & Feedback plugin. You’ll need the pro version to customize things, but the free version itself provides some nice design improvements.

Both the Free & Pro Versions…

• Improve spacing throughout many areas of the plugin
• Assign a consistent border-radius to all boxed elements, modal popups, etc.
• Assign consistent link colors & styling for all text links
• Use either a dark grey text color or your theme’s default text color for text, as well as provide a more legible line-height in some areas

👇 All of the following features are only available in the pro version 👇

Text Links

All text links used throughout the RRF plugin will inherit your chosen link color settings under General Design.

Border Radius

We also use your “Global Border Radius” setting in General Design in quite a few places throughout the RRF plugin.

• The sort & filter box
• All modal popups
• Individual comments, if using a background color option (see below)

Here’s an example of one of RRF’s modal popups using the global border radius, which is set to 0. Also notice the buttons using the primary button color (blue), hover color (pink) & button border radius of 0.

Buttons

All buttons used throughout the RRF plugin use the styles set in the Buttons section. We consider most RRF buttons as primary buttons, so they will use your primary button styles. But there are a few standard buttons as well. And your button border radius will be applied to all buttons.

We also converted the “Edit your review” button to a text link, as we felt the previous button style was distracting from the other review elements nearby. And most people won’t need to edit a review once they’ve posted it, so this item doesn’t need as much prominence as it was previously given.

Star Rating Colors

Most star ratings you see around the web are yellow, but they don’t have to be. If implemented thoughtfully, you can use a different color that fits more closely with your brand. Design Upgrade Pro lets you do just that.

• Empty Star Color: When a star has yet to be filled in, it will have a border around it. This custom color will be applied to that border.
• Filled Star Color: Once the star is filled in, either by the user choosing it during their review, or on the average rating display, you can select a custom color.
• Rating Bars: When viewing all the ratings & reviews for a course, there are bars to denote what percentage each star (1-5) has received. These bars will use your “Filled Star” color.

Here’s an example that uses dark grey for empty stars and purple for filled stars:

Rating Bars

You might have already noticed that the images on this page use two different styles of rating bars. That’s because our plugin offers two options for Rating Bar Style.

• The default, plain background color bars that come with RRF (as seen in purple above). Note: These will inherit the border-radius set in the Progress Bar section of our plugin.
• Amazon-inspired rating bars with shadows and a larger fill area, as seen below, using the default yellow. Note: This style will always use a 1px border radius.

Hiding Features

The RRF plugin itself gives you the ability to disable comments on reviews. Simply navigate to Course Reviews > Settings to disable review comments.

But there are a few additional elements that the Design Upgrade Pro plugin allows you to hide.

Sort & Filter Section

If you’d like to remove the sorting & filtering options in Ratings, Reviews & Feedback, you can simply check a box in Design Upgrade Pro and it’ll disappear.

Helpful? Ratings

The RRF plugin also adds the ability for users to click a thumbs up icon to signify that the review was helpful. WisdmLabs has not provided a way for you to disable this feature, so we decided to give you the option to hide it.

When combined together, you can create a really clean course reviews section, with just the vital information you want to display.

Because WisdmLabs uses the default WordPress comment system for their course reviews, we’ve decided to pull in a few settings that we’re already using for Focus Mode comments.

• Avatar Style
• Background Color

If you’re using the RRF plugin, we’ll check your settings in the Focus Mode section of Design Upgrade Pro. If you’re customizing either the comment avatar style or using a comment background color, we’ll apply those same styles to all your reviews in the RRF plugin.

Consistency is a beautiful thing 😉.

Here’s an example of a review using the 8px global border radius, with a light blue background color applied. Notice the avatar has an 8px border radius as well.

Comment Avatar Style

You set this in the Focus Mode section. The available options are:

• Circle (default)
• Inherit border radius
• Square

Comment Background Color

You set this in the Focus Mode section. If left blank, no background color will be used, and a thin grey line will separate each review.

If you choose a background color for comments in Focus Mode, we’ll apply that same background color here for all your course reviews.

NOTE
We highly recommend a very light color so that the dark grey text remains legible.

And we also intelligently use your global border radius for the corners 🙌.

We are committed to working closely with other LearnDash plugin developers to help you create the most beautiful LMS you can imagine.

If you’re using a LearnDash plugin that could use a design upgrade, please let us know in the comments. We’re always open to suggestions.