Design Upgrade Pro for LearnDash

When LearnDash works fine but looks bolted on to your theme

You build the course, students log in, and the first thing they notice is that the lesson list, buttons and progress bars look nothing like the rest of your site. Fixing it with CSS usually ends in patches that break with every change and hours of trial and error. Design Upgrade Pro for LearnDash moves that work into the WordPress Customizer: more than 100 options to adjust how LearnDash looks without writing code.

What changes as soon as you activate Design Upgrade Pro for LearnDash

Before you touch any option, the plugin applies cleaner styles: LearnDash CSS moves closer to your theme's, font sizes return to the theme's values, clickable areas are larger and buttons are more consistent with each other. It also improves the content lists for lessons, topics, quizzes and assignments.

It detects whether you use the 3.0 or the Legacy template and shows the matching set of options in the Customizer. With 3.0 you also get options for focus mode, alerts, tooltips and login/registration.

Depending on what you sell, these are the options you will use most

If you have a grid course catalog

With the Course Grid add-on you can equalize item heights and remove gaps and positioning problems. You adjust borders, shadows and square or rounded corners, and add hover effects: shadow, lift or enlarge. There are four ribbon types (paid courses, free, already enrolled and custom) and the category dropdown supports width, background, border radius and padding.

If your students take long courses

• Course navigation: show all topics and quizzes without expandable arrows, or auto-expand them, with indentation and strikethrough on completed items.
• Progress bars: striped, animated, rounded or square, with their own height and color, and the option to hide the "X/Y steps" text or the percentage.
• Customizable completion colors for icons and statuses.

If you use a page builder

Focus mode supports edge-to-edge content width, designed for building with a page builder. You can also hide the title, breadcrumbs, bottom buttons or the back-to-course link. It works with Elementor, Beaver Builder and Divi: you lay out the page and the plugin styles the LearnDash elements inside it.

If you want to polish access and profile

The login and registration popup has more than 10 options: overlay color and opacity, borders, panels, form fields and the ability to remove the logo or descriptive texts. In the profile you can hide sections, statistics or the search, change the avatar and set your own URL for the edit profile link.

It needs the classic LearnDash templates: Modern UI layouts are left out

The plugin's styles do not work with LearnDash's Modern UI layouts (registration, course pages and group pages). To use it you have to disable them. With the 3.0 template, set LearnDash colors to "Default".

• Font sizes cannot be changed from the Customizer: they are inherited from the theme on purpose.
• It does not allow custom icons or checkmarks.
• The grid is only styled through the [ld_course_list] shortcode, not the new Course Grid block.
• It is an add-on: LearnDash must be installed separately.
• Themes that already ship their own LearnDash styles, such as Social Learner, are not compatible.

Frequently asked questions about Design Upgrade Pro for LearnDash

Which themes does it work with?

It is designed for almost any theme. It has been tested with BuddyBoss, Kadence, Astra, Divi, GeneratePress, eLumine (with LearnDash 3.0 or higher), OceanWP, LearnMate and Edufire.

Does it work with LearnDash 2.x and the Legacy template?

Yes, it is compatible with the 2.x, 3.x and 4.x series. The newer options, such as focus mode or alerts, belong to the 3.0 template.

Is there a free version?

There is a free version that improves the default design, but with no options in the Customizer.

Can I change the font size?

Not from the Customizer. If you need to adjust a specific element, you will have to do it with your own CSS.

A plugin for those who already know how their virtual classroom should look

If your problem is that LearnDash clashes with your brand, Design Upgrade Pro for LearnDash saves you custom CSS. If your site uses the Modern UI layouts or you need your own icons, look at another route first.