Course List
Course List
Lists LifterLMS courses in a grid of one to six columns. You can filter the list by category, tag, track, difficulty and the visitor's enrollment status, and either keep LifterLMS's own course card or build your own card from a drag-and-drop list of elements (image or video, title, excerpt, price, progress bar, link, taxonomy, custom text). The widget runs the [lifterlms_courses] shortcode under the hood, so it works on any page or template and needs only Elementor Core.
Usage
Public course catalog — Drop the widget on a page or in a course archive template (see Build a Course Archive Template) and set Filters: to None (show all courses) so logged-out visitors see every course. Build the card with Video or featured image, Course title, Course excerpt, Course price and a Course link button.
"My courses" block on a dashboard — Keep the default Filters: value (enrolled courses) and add a Course progress element with Show progress number? on Percentage, plus a Course link whose Target is Continue course, so each card takes the student straight to the next lesson. Sort with Order by set to Course completion to surface courses in progress.
Catalog per category or track — Set Course Category or Course Track to list one part of your catalog, for example a "Beginner" track on the front page. Filters combine, so a category plus a difficulty lists only courses that match both.
Memberships — For the same treatment of memberships use the Memberships List widget.
How it works
The widget passes its Content settings to LifterLMS's [lifterlms_courses] shortcode. Course Category goes straight to the shortcode; the tag, track and difficulty filters are added as extra taxonomy conditions on the same query, combined with AND. When Render is LifterElements' render, the widget swaps LifterLMS's loop template for its own course card built from Template items.
| Situation | Behaviour |
|---|---|
| Filters: left on its default (Show all enrolled courses) for a logged-out visitor or a user with no enrollments | LifterLMS has no courses to list, so the widget renders nothing. Set Filters: to None (show all courses) for a public catalog. |
| Filters: set to Show only available unenrolled courses | Not a native LifterLMS filter. The widget fetches the student's enrolled courses and excludes them from the query. A logged-out visitor sees nothing; a logged-in user with no enrollments sees every course. |
| Order by set to Course completion | Not a native LifterLMS ordering. Courses are sorted by the current user's completion percentage after the query runs, in the direction set by Order. |
| Course has no featured image or video | An Image, Video or Video or featured image element prints LifterLMS's placeholder image when Fallback image if no content? is Show; otherwise it prints nothing. |
| Course has no terms in the chosen taxonomy | A Taxonomy element prints nothing for that card. |
| Several Course List widgets on one page | Each instance registers and removes its own query hooks around its shortcode call, so their filters do not leak into one another. |
Settings
Content — Render
| Setting | Description |
|---|---|
| Render | LifterLMS render uses LifterLMS's own course card and stylesheet; only the Items style section applies. LifterElements' render (default) uses the card you build under Custom template and unlocks the Typography, Progress Bar and Button style sections. |
| Columns | Number of cards per row, 1 to 6, per device. Default 3. Column widths are calculated by the widget from Elementor's tablet and mobile breakpoints. |
| Equal Heights? | On forces every card to the same fixed Height; Off (default) lets cards grow with their content above a Min Height. |
| Min Height | Minimum card height, per device, in px, vh or em. Default 200px. Shown only when Equal Heights? is Off. |
| Height | Fixed card height, per device, in px, vh or em. Default 400px. Shown only when Equal Heights? is On. |
Content — Content
| Setting | Description |
|---|---|
| Course Category / Course Tag / Course Track / Course Difficulty | One term from each course taxonomy (Courses > Categories / Tags / Tracks / Difficulties), or None (default). Every filter you set narrows the list further. Developers can add taxonomies to this group with the le-elementor-courses-widget-filter-taxonomies filter. |
| Show hidden courses | Show (default) includes courses whose LifterLMS catalog visibility is hidden; Hide leaves them out. |
| Filters: | Enrollment filter for the current user. None (show all courses) lists the whole catalog. Show all enrolled courses (including expired & cancelled) (default) lists every course the user has ever enrolled in. Show only available enrolled courses lists active enrollments only. Show only available unenrolled courses lists courses the user is not enrolled in. Show expired enrolled courses and Show cancelled enrolled courses list those enrollment statuses only. See How it works. |
| Order | Ascending order (default) or Descending order. |
| Order by | Sort key: Author, Course completion (the current user's progress), Date, ID, Last modification, Menu order, Name (slug), Random or Title (default). |
| Posts per page | Number of courses to list. Default -1 lists all of them. |
Content — Custom template (shown only when Render is LifterElements' render)
The Template items repeater holds the elements of one course card, printed top to bottom in the order you drag them. The default card is Video or featured image, Course title, Course progress, Course price. Every item has an Element type and a CSS classes field (extra classes added to that element's wrapper); the remaining controls depend on the type.
| Element type | Controls |
|---|---|
| Course title | Title link to the course — Enable (default) wraps the title in a link to the course page. HTML Tag — H1 to H6, div, span or p; default H4. |
| Course excerpt | Max. characters number — length of the trimmed course description, default 100 (trimmed with WordPress's word trimming, so the number counts words). Content when text is trimmed — text appended when the excerpt is cut, default .... |
| Course link | Target — Course page (default) links to the course; Continue course links to the student's next lesson. Use custom text — No (default) prints the course title as the link text; Yes reveals Custom text (default "Link to the course"). Alignment — Left, Center or Right, per device. HTML Tag — Text (default) prints a plain link; Button prints a button and reveals Button type: LifterLMS Button (default, LifterLMS's primary button style) or Elementor Button, which adds Type (Default, Info, Success, Warning, Danger) and Size (Extra Small to Extra Large, default Small). Icon, Icon Position (Before default, After) and Icon Spacing add an icon to the link; Icon Color is set separately for the normal and hover states. |
| Course price | Plan — First featured plan (default) or First plan (first in the course's access-plan order). Output style — Price and frequency (default), Price or Frequency. Show old price? — Show prints the original price struck through when the plan is on sale; default Hide. Not printed when Output style is Frequency. |
| Course progress | Height — bar thickness, per device, default 0.4em. Show progress number? — No (default), Percentage (for example 45%) or Steps (completed / total lessons, for example 3 / 12). Show progress for non enrolled user — Show (default) prints an empty 0% bar for visitors who are not enrolled in the course; Hide leaves the bar out of their cards. |
| Custom text | Custom text — free text printed in the card; accepts Elementor dynamic tags, so you can print any Course dynamic tag for each course. |
| Image | Image type — Course featured image (default) or Custom image, which reveals Add Image for one image used on every card. Add link? — Yes wraps the image in a link and reveals Target (Course page or Continue course); default No. Fallback image if no content? — Show (default) prints LifterLMS's placeholder when the course has no featured image; shown only for Course featured image. |
| Taxonomy | Taxonomy — any taxonomy registered for courses (Course Categories, Course Tags, Course Tracks, Course Difficulties, plus any custom ones). Prints the taxonomy label followed by the course's terms, comma-separated. |
| Video | Prints the course's featured video when the course has a video embed and its Tile featured video option is on in LifterLMS. Fallback image if no content? — Show (default) prints the placeholder image when there is no video. |
| Video or featured image | Prints the featured video when available (same rule as Video), otherwise the featured image, otherwise the placeholder if Fallback image if no content? is Show (default). Add link? — Yes wraps the image (not the video) in a link and reveals Target; default No. |
Style — Items (both renders)
| Setting | Description |
|---|---|
| Background Color | Background of each course card. |
| Border / Border Radius / Box Shadow | Elementor's border, corner-rounding and shadow controls for the card. |
| Padding | Inner spacing of the card, per device. |
Style — Typography (shown only for LifterElements' render)
| Setting | Description |
|---|---|
| Title Color / Title Typography / Title Text Shadow / Text Alignment / Title Padding | Text styling, alignment (Left, Center, Right) and padding of the Course title element. |
| Price … / Link … / Custom … | The same five controls repeated for the Course price, Course link and Custom text elements. |
Style — Progress Bar (shown only for LifterElements' render)
| Setting | Description |
|---|---|
| Bar Color | Colour of the filled part of the bar. |
| Bar Background Color | Colour of the bar track (the unfilled part). |
| Border / Border Radius | Elementor's border group for the track, and corner rounding for track and fill (default 30px all round). |
| Padding | Space around the bar inside the card, per device. Default 20px all round. |
Style — Button (shown only for LifterElements' render)
| Setting | Description |
|---|---|
| Normal / Hover | Text Color, Background Color and Border Color for each state of a Course link element set to Button (both LifterLMS Button and Elementor Button). |
| Border Style / Border Radius / Box Shadow / Padding | Border type and width, corner rounding, shadow and inner spacing of the button. |
Advanced
The Advanced tab holds Elementor's own layout, motion, responsive and custom-CSS controls — see Elementor's documentation. Lifter Elements adds one section, Conditional Logic, which shows or hides this widget by the visitor's LifterLMS status — see the Conditional Logic reference.
Notes
- The default Filters: value lists the current user's enrolled courses, not the whole catalog. For a public catalog switch it to None (show all courses).
- Continue course targets resolve through LifterLMS's continue button. For a visitor who is not enrolled there is no next lesson, so the link has no destination; use Course page for catalogs shown to prospects.
- Card markup carries
le-course-<type>-loopclasses (for examplele-course-title-loop,le-course-price-loop) plus LifterLMS'sllms-loop-itemclasses, so theme styles written for LifterLMS catalogs still apply. - Related: Memberships List, Course Progress, Course Continue Button, Course Access Plans, Build a Course Archive Template.