By default, the LearnDash progress bar only displays a colored bar to indicate a student’s progress in the course. There is no text-based example of what percentage they have completed.
Sweet lookin’ bar, man! How’d you do that? With this →
I’ve previously covered how to show “X out of Y steps completed” beneath the progress bar, but if you are trying to display a percentage instead, this article is for you.
The LearnDash progress bar does an OK job at visually representing a student’s progress, but there are ways to improve it. If you have 50 or more steps in your course, the progress bar itself might not be the best indicator.
Here’s how I did it.
" data-medium-file="https://ldx.design/wp-content/uploads/2019/01/learndash-show-steps-completed-progress-bar-300x67.png" data-large-file="https://ldx.design/wp-content/uploads/2019/01/learndash-show-steps-completed-progress-bar.png" decoding="async" loading="lazy" class="size-full wp-image-450 sp-no-webp" alt="LearnDash progress bar with steps shown" height="120" width="536" srcset="https://ldx.design/wp-content/uploads/2019/01/learndash-show-steps-completed-progress-bar.png 536w, https://ldx.design/wp-content/uploads/2019/01/learndash-show-steps-completed-progress-bar-300x67.png 300w" sizes="(max-width: 536px) 100vw, 536px">Like the stripes? 😍 Here’s how I did it.
In this tutorial, I’m going to show you how to use a little CSS to display “X out of Y steps completed” below (or above) your LearnDash progress bar.
Powered by WordPress & Theme by Anders Norén