Course Purchase Box Element Documentation
Overview
The Course Purchase Box element for LearnDash in Elementor provides a structured and interactive way for users to purchase, track, and continue their learning journey. This element dynamically adjusts its content based on the user’s progress in a course, displaying relevant buttons and progress indicators.
Features
- Label Options: Customizable text labels for different states.
- Progress Bar with Percentage: Displays the user’s completion percentage.
- Dynamic Buttons:
- Start Learning: Shown if the user is enrolled but hasn’t started the course.
- Continue Learning: Shown if the user has started but not completed the course.
- Add to Cart: Shown if the course is purchasable but not yet enrolled.
- Complete Course: Shown when the user has completed all lessons and topics.
Element Structure
- Title: Displays the course title.
- Labels: Customizable labels to highlight the course state.
- Progress Bar: Visually represents the user’s completion percentage.
- Buttons: Render dynamically based on the user’s enrollment and progress.
Button Display Logic
| Course State | Button Displayed |
|---|---|
| Not Purchased | Add to Cart |
| Enrolled but Not Started | Start Learning |
| In Progress | Continue Learning |
| Completed | Complete Course |
Customization Options
General Settings
- Enable/Disable Labels
- Custom Text for Labels
- Show/Hide Progress Bar
Style Settings
- Button Colors & Typography
- Progress Bar Colors & Styles
- Spacing & Alignment
Usage Instructions
- Drag and drop the Course Purchase Box element into your Elementor section.
- Configure labels and enable/disable progress bar as needed.
- Style buttons and progress bar for a personalized look.
- Save and publish the changes.
Conclusion
This element enhances the user experience by providing clear course progression details and intuitive call-to-action buttons based on the user’s enrollment and completion status.