Lesson Complete Button
Lesson Complete Button
Renders the LifterLMS mark-complete form for the current lesson as an Elementor button. The widget reads the lesson and the logged-in student and decides on its own whether to show Mark Complete, Mark Incomplete, Take Quiz, or Start Assignment.
Usage
Lesson template — Place it below the Lesson Content widget in a lesson template so every lesson gets a completion button without per-lesson setup; see How to Build a Lesson Template. Pair it with Lesson Navigation so students can move on after marking the lesson complete.
Quiz and assignment lessons — Nothing extra to configure: when a lesson has a quiz the same widget becomes the Take Quiz button, and when it has an assignment (LifterLMS Assignments add-on) it becomes Start Assignment. Set each label and colour on its own sub-tab.
Video-gated lessons — The button carries the CSS ID llms_mark_complete, so the LifterLMS Advanced Videos add-on's "require video to complete" option can disable it until the Lesson Video ends, exactly as it does with the stock LifterLMS button.
Post-completion content — To show something else (a message, a certificate link) once the lesson is done, wrap that content in a Completion Status condition rather than styling this widget.
How it works
The widget renders nothing for logged-out visitors, for students not enrolled in the lesson's course (editors of the lesson still see it), and while the lesson is drip-locked. Otherwise it picks one output:
| Situation | Behaviour |
|---|---|
| Lesson has a quiz the student can take | A Take Quiz link to the quiz (uses the Quiz sub-tab settings). |
| Lesson has an assignment | A Start Assignment link to the assignment (uses the Assignment sub-tab). If the lesson has both, the assignment button renders first, then the quiz button. |
| Lesson not yet completed | A Mark Complete submit button inside the LifterLMS mark-complete form (uses the Complete sub-tab). Clicking it completes the lesson and reloads the page. |
| Lesson already completed and Retake Lessons is enabled in LifterLMS (LifterLMS > Settings > Courses) | A Mark Incomplete submit button (uses the Incomplete sub-tab). Clicking it resets the lesson to incomplete. |
| Lesson already completed and Retake Lessons is disabled | Nothing is rendered. |
| Lesson completion is handled by a Gravity Form | Nothing is rendered; the form completes the lesson instead. |
With Render set to LifterLMS, the widget outputs the [lifterlms_lesson_mark_complete] shortcode as-is and LifterLMS applies its own state logic and styling; the sub-tabs, button section and Style tab are hidden.
Settings
Content
| Setting | Description |
|---|---|
| Render | Lifter Elements (default) renders an Elementor button you style here; every other control on the widget is shown only for this choice. LifterLMS outputs the stock LifterLMS button with the plugin's own styling. |
| Complete / Incomplete / Quiz / Assignment sub-tabs | One sub-tab per button the widget can show (see How it works). Each holds the Text control for that button; the per-button colour and typography sit in the Button States section of the Style tab. |
| Text | Label for that button. Defaults: Mark Complete, Mark Incomplete, Take Quiz, Start Assignment. |
The Incomplete sub-tab also shows a reminder that the Mark Incomplete button only works when Retake Lessons is enabled in LifterLMS.
Button (Elementor's own section, shown only for Lifter Elements)
| Setting | Description |
|---|---|
| Type | Elementor button preset: Default, Info, Success, Warning, Danger. |
| Icon / Icon Position / Icon Spacing | Optional icon before or after the label. |
The stock Text, Link and Button ID controls are hidden: the label comes from the sub-tabs, the link or form action is set from the lesson, and the ID is fixed to llms_mark_complete.
Style — Button (shown only for Lifter Elements)
| Setting | Description |
|---|---|
| Button | Elementor's standard button styling: alignment, typography, text shadow, text and background colours for Normal and Hover, border, border radius, box shadow and padding. See Elementor's Button widget documentation. |
Style — Button States (shown only for Lifter Elements) — a Complete / Incomplete / Quiz / Assignment sub-tab per button
| Setting | Description |
|---|---|
| Background Color | Background colour for that button, taking precedence over the background set in Button. |
| Typography | Font settings for that button's label. |
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
- Output depends on the logged-in student, so Elementor's element caching never serves a stale button state for this widget.
- The sub-tabs are named after the button they style, not the lesson state: the Complete sub-tab styles the Mark Complete button (shown while the lesson is incomplete) and the Incomplete sub-tab styles Mark Incomplete (shown once it is complete).
- The Start Assignment button only appears when the LifterLMS Assignments add-on is active.
- Related: Lesson Navigation, Course Continue Button, Completion Status condition.