Skip to main content

Mark Complete Lesson

Mark Complete Lesson

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.

Mark Complete Lesson widget rendered as a button on a lesson page

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:

SituationBehaviour
Lesson has a quiz the student can takeA Take Quiz link to the quiz (uses the Quiz sub-tab settings).
Lesson has an assignmentA 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 completedA 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 disabledNothing is rendered.
Lesson completion is handled by a Gravity FormNothing is rendered; the form completes the lesson instead.

With Render set to LifterLMS render, 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

SettingDescription
RenderLifterLMS render outputs the stock LifterLMS button with the plugin's own styling. Custom button (default) renders an Elementor button you style here; every other control on the widget is shown only when this is Custom button.
Complete / Incomplete / Quiz / Assignment sub-tabsOne sub-tab per button the widget can show (see How it works). Each holds the three controls below for that button.
TextLabel for that button. Defaults: Mark Complete, Mark Incomplete, Take Quiz, Start Assignment.
ColorBackground colour for that button, overriding the shared button background from the Style tab.
TypographyFont settings for that button's label.

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 Custom button)

SettingDescription
TypeElementor button preset: Default, Info, Success, Warning, Danger.
Icon / Icon Position / Icon SpacingOptional 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 (shown only for Custom button)

SettingDescription
ButtonElementor'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. The per-button Color on the Content tab takes precedence over the background set here.

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.