Your course page looks like a plain list.
Every course looks the same. Students can’t tell what they own, what’s locked or where they left off.
Danica LouweUpdated 5 min readA default LearnDash grid lists your courses but doesn’t guide anyone. Design a card for each kind of student. Someone not enrolled sees a locked course with its price, main benefits and one button. Someone enrolled sees their progress, next lesson and a button to continue. Group courses into phases so the order is clear, and test each view with a real account.
The grid shows your courses, but not what to do next.
A default grid has an image, a title and a price or button. That’s okay, but it leaves the student to work out what they own and where to go. People who have to work that out tend to hesitate.
Every card looks the same
A course they own and a course they don’t can look almost identical, so students click around to find out.
No clear next step
A returning student has to remember where they stopped, then open courses until they find it.
The reasons to enrol are missing
A title and a price don’t say what’s inside. How many lessons, which worksheets, whether it includes community access: that’s what they’re deciding on.
No sense of order
Six courses in a row doesn’t tell anyone which comes first or how they fit together.
Look at the page as four different people.
Most owners only ever see their course page as an admin. Open it as each of these, on your phone too.
- A logged-out visitor: can they tell what each course gives them and what it costs?
- A member who hasn’t bought this course: is it obvious it’s locked, and how to get it?
- A student part-way through: can they find where they left off in a few seconds?
- A student who has finished: does the page say so, and suggest what’s next?
- Is the order of the courses clear without any explanation?
- Do long titles break the row, and do the cards still read well in one column?
Design a different card for each student.
The same course should look different depending on who’s looking at it. Plan it on paper first, even in Canva or a simple document, then build it.
- 1
Map the path
Group courses into phases, such as Foundation, Monetization and Scale. Set each phase up as a LearnDash category, so it’s easy to organise and to show in the grid.
- 2
Not enrolled: sell it
Greyed-out image, a lock icon with a short message, the price and payment type, a short description, the main benefits, and one button to enrol or preview. Use a word as well as the icon, so it’s clear to everyone.
- 3
Enrolled: guide them
Full-colour image, no lock, and an “enrolled” label. Replace the benefits, since they’ve already bought it, with the phase, their next lesson, a progress bar and a button to continue.
- 4
Finished: move them on
Mark it as complete and point to the next course or phase, so a finished course doesn’t become a dead end.
- 5
Test all four views
Check it with real test accounts on desktop and phone. Make sure one student’s card never appears for another, which is what a badly set page cache can do.
The technical version, for your developer
This is the build from our videos, using Elementor and JetEngine. We recorded the steps in 2022 and the redesign in 2025, so confirm field names on your LearnDash version.
- Listing. Create a JetEngine listing on the courses post type, and display it with a listing grid. Use 3 columns on desktop, 2 on tablet and 1 on mobile, with equal column height on.
- Fields. Read them with dynamic fields. Our build used the meta key _ld_price_type, plus custom fields for the short description and button text, with fallback text for empty values. Look up the keys in your own database, since they can change between versions.
- Progress. Output the post ID in a dynamic field and customise its format to [learndash_course_progress course_id="%s"], so each card shows that course’s bar.
- Status. Wrap saved templates in [course_notstarted], [course_inprogress] and [course_complete], each with its closing tag and course ID. Use [visitor] and [student] to split enrolled from not enrolled.
- Caching. These cards are personal, so don’t serve them to logged-in users from a page cache. Test with two accounts at once.
- Styling only. If the content is fine and it just looks plain, target LearnDash’s own grid with CSS and skip the listing.
Watch it done
A before and after of a real grid design, with one card for students who haven’t enrolled and another for those who have. The build itself is sped up, so use the two videos below for the steps.
Questions owners ask
Do I need Elementor and JetEngine?
Only if the cards need to change depending on the student. For colours, spacing and fonts, CSS is enough. Our build uses them because a custom listing can show different content for each state without custom code.
Will this increase enrolments?
We can’t promise that, and it depends on your audience and your course. It does make the next step clear, which is what the default grid leaves out. Watch what students do after the change.
Should I show locked courses at all?
If you want students to know there’s more to buy, yes. Show them clearly as locked, with the price and the reason it’s worth having. If a course is for a different audience, hide it for those students.
How much should go on a card?
Less than you think. Before enrolling, that’s the title, a short description, the main things included, the price and one button. After enrolling, that’s the title, their progress and what’s next.
Do phases mean I have to drip content?
No. Phases only group courses so students can see the order. Drip and prerequisites are separate settings, and you can add them if you also need to control when a course opens.
