Affiliate Disclosure: We may be compensated if you use our links to make a purchase. We are extremely selective in who we partner with & only recommend products we believe in. Our affiliate relationships do not influence our recommendations.
I’ve seen this question come up many times now, so I figured I’d post the solution online for all to see.
Are you using the LearnDash course grid to display your lessons in grid format? If you’re using the [ld_lesson_list] shortcode (or block) on your course page, and want to hide the default lesson list, here’s the solution.
Add this CSS code to the “Additional CSS” area in the WordPress Customizer.
.single-sfwd-courses .ld-lesson-list {
display: none;
}This will specifically target the LearnDash lesson list only on course pages.
Sponsor
Finally Revealed...
NEW breakthrough solution allows you to IMMEDIATELY GROW student engagement and SELL more courses by creating a state of the art mobile application in 60 MINUTES OR LESS without ANY coding knowledge!
Proven and tested by over 1,000 LearnDash customers.
Learn More →
Dana
Thank you , thank you , thank you . I’ve been trying to figure this out for days
Dave Warfel
You. Are. Welcome. 🙌 Glad you found it.
SP
Thanks, I was looking for this. However, I wonder how my customers can start the course when they cannot acces it via the Course content. Can I add a “start course” button on the course page?
Dave Warfel
Sure. You can use the
[student]and[/student]shortcodes to show content only to enrolled users, then add a button with whatever version of the WordPress editor you’re using, and link it to the first lesson in the course.Alternatively, you could use the Uncanny Toolkit’s Resume Button.
SP
It worked, thanks! Is there also a way to hide the progress bar and the course title on the course page?
Dave Warfel
Sure. You can hide the progress bar with this CSS:
As for the title on the course page, that depends on your theme. If you can provide a link to a course page, I can provide you with the CSS.
SP
Thanks! I haven’t put the course online yet. I’m using the theme Astra. Does this help?
Dave Warfel
Yep. Here you go.
JesseColbers
Hallo Dave,
Heb jij CSS om de course info row in learnpress te verbergen?
Je zou me er heel erg mee helpen!
Dave Warfel
LearnPress or LearnDash? They are two completely separate plugins.
If you mean LearnDash…
This will hide it for enrolled users:
This will hide it for non-enrolled students:
Rod
I am trying to hide the status area at the top of the course that is shown when a user is not enrolled. (Current Status | Price | Get Started)
I have tried the following custom css but it doesn’t work. Advice?
.learndash-wrapper .ld-course-status.ld-course-status-not-enrolled {
display: none!important;
}
I have also tried:
.ld-course-status.ld-course-status-not-enrolled {
display: none!important;
}
.ld-course-status-not-enrolled {
display: none!important;
}
Thanks!
Dave Warfel
Hi Rod,
You’re so close. I would use your first piece of code. You just don’t need the
!importantpiece. If you did want to add it, you just need a space betweennone&!important. It’s not working because there is currently no space.This should work:
If for some reason it doesn’t, do this:
aidan
Hi Dave,
Is there any way of skipping the lesson content page and going straight into the first topic of the lesson? Thanks
Also is there any way to redirect the last “next topic” button in a lesson to specific url?
Thanks
Dave Warfel
Hi aidan —
“Is there any way of skipping the lesson content page and going straight into the first topic of the lesson?”
— Not that I’m aware of, no.
“Also is there any way to redirect the last ‘next topic’ button in a lesson to specific url?”
— Not specifically (that I know of), but the Uncanny Toolkit has a module that auto-completes a lesson once all topics have been completed. You might find that useful. Learn more here.
chase wells
I was hoping there would be the that same option. I really wish it would just jump you to the first topic from the course grid selection. 🙁
Leandro Vernocchi
Hello Dave!, i was looking for this thank you so much!, i was wondering what code should i use to hide the progress bar aswell.
Dave Warfel
I responded to this same comment over on the other post about a course page template with Elementor. This appears to be a duplicate comment.
Ken
Is there a way to just show the Lessons and hide the course content? I would also like to hide the “Expand/Collapse” button.
Example: https://www.screencast.com/t/NxIcNWgZS
Dave Warfel
Hi Ken,
So our Design Upgrade Pro plugin has an option that will hide the “expand all” button and all the individual expand arrows, but it will also automatically show all the topics beneath each lesson. See docs here. If you hide those expand buttons, there would be no way of accessing the topics from the course page. If you purchased our pro plugin, I could help you write the CSS to hide the expand buttons and still keep the topics hidden, but I wouldn’t advise it. It would force the user to go to a lesson first, and then access the topics after they were already on the lesson page.
If you end up buying it, just reply to our existing email thread asking me for the CSS code and I can send it over.
Nia gg
Hi
I am using css to hide course content on course page of Learndash, but it is not hiding
//Hide the Default LearnDash Lesson List
.single-sfwd-courses .learndash-course-quiz-list {
display: none;
}
Please help
Dave Warfel
Your code is incorrect. The correct code is in the main article above.
Peter
Hi,
How can I remove the default progress bar so that the Elementor progress bar element (course infobar) remains?
Thanks!
Peter
Dave Warfel
If you’re using an Elementor Theme Builder template to build the page, the default progress bar should not be there. If it is, it might be a bug with the LearnDash-Elementor integration. If you’re not using the integration, you probably should. I think it’ll fix your issue.
Otherwise, it is possible with CSS. I don’t have time to write the code but you can get a sense of how to do it from this article. You can use
display:none;to hide all progress bars, and then add another declaration with.elementor-shortcodein there to only target the Elementor version anddisplay:block;.Cami
Hey Peter, I’d like to do the same on my course page, did you manage to write a code that works? Thanks
Hannah
Hi, Is there a way to hide the other courses we offer from students unless they are enrolled? We thought by putting the course as closed they wouldn’t be able to see it but we’ve just found out they can!
Dave Warfel
Hi Hannah – Yes, there are two ways to go about this.
1. Depending on how you’re displaying your list of courses, you could potentially exclude unenrolled courses from view. You can do this if you’re using the Course Grid add-on, using the
mycoursesparameter. More info here.2. The free Uncanny Toolkit has a module called Not Enrolled Redirect. That will redirect users who are not enrolled in the course to another page of your choosing.
chase wells
You are a legend!
chase wells
Is there a way to remove the bottom lesson list? I would like just the sidebar and the video, similar to pluralsight, if possible.
https://drive.google.com/file/d/1G_Bn9_1bKnYsb9IhnPRpuF5tGi0qI9yr/view?usp=sharing
Dave Warfel
Sure. Use this custom CSS:
Claire
Is it possible to hide just one lesson and not the whole list? Suppose if a lesson is tagged can I hide all lessons from the list with that tag using CSS?
Dave Warfel
Hi Claire – Maybe. I’m not sure if LearnDash adds class names that we can target when using tags. But if you post a link to your course page, and tell me which lesson you want to hide, I can probably help.
I believe LearnDash adds a unique ID to each lesson in the lesson list, so this should be doable.
Carlos
Hi!
How can I hide the course list lesson only in the materials list? Not in all places.
Dave Warfel
Hi Carlos – I’m not sure what you mean. The “course content” — which is also known as the list of lessons — is not within any tab. It’s ALWAYS on the course page.
When you click on “Materials,” that just shows the materials content you have added, but nothing changes about the list of lessons. You either remove it or you don’t. You can’t just remove it when “Materials” is clicked.
Xao
You are awesome! Also, i am trying to add some feature like strikeout answer choices on exams, highlighting on reading exams, and mark question for review later. If you know all or some please please let me know how.
Dave Warfel
Hi Xao,
You can already mark things for review. You need to enable the review box in the quiz settings, and then there’s a “mark for review” button you can click that changes the color of the number, reminding you to come back to it.
As for strikeouts and highlighting, I’d need to know exactly what question types and which parts of them you want striked out/highlighted, and at what time (before the question is answered, after, etc.). There would be a small fee for me to write this CSS for you. If that’s something you’d like to pursue, please email me: [email protected]
Mohammad Mosharaf Ali
Hi Dave, I want to hide the lesson list on the lesson page. Please help me if it is possible.
Thank you for your support. Please check the website link.
Best regards,
Mosharaf
Dave Warfel
David Read
hi there, I used the code to hide the lesson list on the course page and wanted to replace it with the [course_content] shortcode, so I had more flexibility over page placement. However, when I add the custom code to hide the lesson list, the course content list disappears as well. Is there any way to stop that? I tried to with both the basic [course_content] shortcode and with the course id included [course_content course_id=”?”]
Dave Warfel
Hi David – My best recommendation for achieving this is as follows:
1. Add a Group block
2. Go to Advanced and add a class name
3. Add a Shortcode block within the Group block and add the
[course_content]shortcode4. Then you would hide the default lesson list with
.ld-item-list.ld-lesson-list { display: none; }5. Then add CSS to display the one you added
.custom-class .ld-item-list.ld-lesson-list { display: block; }David Read
Thanks Dave for the help. I’m not sure how to do that though as I’m using Elementor rather than Gutenberg and I think the blocks you are referring to are Gutenberg ones. Is there a similar process for doing it with Elementor?
Dave Warfel
Yes, I was referring to blocks in the block editor (aka: Gutenberg).
For Elementor, just use
.elementor-shortcodein place of.custom-classfrom my previous comment. That should work.Femke
Hi there,
I used the code to hide the progress bar wrapper.
I also want to do this to hide the wrapper of the course content, since i built this with the Elementor shortcode block.
I can’t seem to write the correct code for this…
Dave Warfel
Hi Femke –
I don’t have time to find the code for you, but here’s a video that will help you find the CSS you need to use for that.
Amr fouad
Hello Dave ,
thank you for helpful info, I have something tricky as after hiding the lesson list I need to give the learner a course navigation tool like interactive image where he can select where he want to go in the course
our course is big so we have 3 levels ,in every level learner is free to pick where he wants to go , it is easier done with articulate story-line but wordpress and learndash is another thing
Dave Warfel
You could try using the
[ld_lesson_list]shortcode with category and/or tag parameters, as well as acourse_idparameter, to output only specific lessons. Make sure you have the course grid add-on activated, and featured images added to your lessons, if you want images to show up.Alrien
Hi David – we are new to Learndash and your guides have been very helpful. Is it possible to hide the quizzes from the Lesson list? We are using elementor and we have build our quiz into the lesson page with hyperlinks (using it like self-assessment within the lesson content instead of add the end).
* Is it possible to hide the quiz in the lesson list (because we build the quiz into the lesson)
* To get people back to the lessons page – can we link the Finish quiz button to take them back to the lesson page from where they will continue to next lesson.
Dave Warfel
Hi Alrien – I’m glad you’ve found them helpful 🙂.
“Is it possible to hide the quiz in the lesson list (because we build the quiz into the lesson)?”
– Yes, but have you thought about just simply not adding the quiz to the course builder in the first place? Just simply remove it from your course builder and it will disappear. Then you can just use a hyperlink to the quiz, or a quiz shortcode on the lesson page, to administer the quiz.
– If you didn’t want to do this, it should be possible to hide the quiz using custom CSS. I could do that for you for a small fee if you’d like.
“Can we link the Finish quiz button to take them back to the lesson page from where they will continue to next lesson.”
– Maybe. I don’t know exactly how to do this but the LearnDash developer documentation has some hooks & functions you might be able to use. Here’s one that might work.
Antonie
hi Dave –
is displaying a single question via shortcode, anywhere other than the default quiz page possible – Can you generate a shortcode for a question and then embed it in the course section …so you can see only a single question on the page ?
Dave Warfel
Hi Antonie – This is not possible with LearnDash. There is no shortcode to display only a question. You could, however, create a quiz with only one question in it, and then display that via the quiz shortcode.
Antonie
It not perfect but i can live with the work around – thanks for your time an help !
Kris
Almost two years after your post exactly this just saved me a ton of trouble. Thanks so much Dave! Definitely bookmarking this site as a go to for future reference!
Dave Warfel
🙌🏼 Awesome! So glad it helped.
Michael
Hi Dave,
These are super helpful clips of additional code to improve the learning experience. We’re looking to hide the ld_navigation bar that contains the large Previous and Next buttons, the Mark complete and Back to Course link. We are essentially trying to hide this class:
We have tried to reverse engineer the code in some of your above posts but it is not yielding any results.
Any thoughts come time mind? Thanks in advance.
Michael
Hi again Dave,
We ket reviewing your samples and this worked to hide all of the buttons at the bottom of a lesson page. Sharing here for you and others that may want to do the same!
.learndash-wrapper .ld-content-actions {
display: none;
}
Thanks for your excellent tips and posts.
Dave Warfel
Glad you figured it out, Michael 🙌. If you have any further questions, please let us know.
Stewart
Hi Dave
Coming across your site and this post is a godsend. I’ve a client who wants to sell courses online BUT they are classroom courses, but want the functionality of an LMS in the backend. They will sell online courses eventually, and seeing this post regards hiding lessons has me thinking that LearnDash as a solution is viable. Do you think that is the case?
Dave Warfel
I would say yes, LearnDash is a viable solution for this. But any LMS would probably be a viable solution. There isn’t much that makes LearnDash special in this regard. You should be able to hide lessons with CSS on all other LMS platforms.
You will likely have to employ some workarounds like this no matter which platform you use, if you are not immediately ready to sell online.
Maya
Hi there,
My code isn’t working, I got it from one of your comments above, is there a reason for this?
.learndash-wrapper .ld-course-status.ld-course-status-not-enrolled {
display: none !important;
}
Dave Warfel
Hi Maya – There’s always a reason, but it’s impossible to say without looking at the specific page where it isn’t working. There are millions of theme & plugin combinations that could be conflicting. If you’d like me to take a look for you, please email [email protected] and provide access to the page in question.
Also, the code you listed above will only work for users that are not enrolled in the course. If you are viewing the page as someone who is enrolled in the course, that CSS won’t work.
Eirik Sandal
Hi! Thanks for the great code 🙂 It removes the lesson lists of all my courses, but how can I make the lesson list disappear only on ONE course? I tried to use the page-id (and post-id), but maybe I do this wrong?
I tried this (but the lesson list is still visible):
.page-id-2211 .single-sfwd-courses .ld-lesson-list {
display: none;
}
Can you please guide me?
Dave Warfel
It should be:
That assumes that your site is using
page-id-2211as a class on the<body>tag. This is dependent on the theme you’re using. Some themes use this instead:postid-2211Look at your source code, specifically on the
<body>tag, and figure out what the unique class name is.Abdul Ahad
Thanks! You saved me!
Eirik Sandal
Thanks, Dave! .postid-2211 did the trick 🙂
Kelly
Hi Dave,
I am using groups to collate certain courses for certain users. I’ve created a header and footer using elementor and treated the header as the ‘page’ content so that i can completely customise what appears on the page. The intent here was to override the default courses list that appears for the group.
Now for som reason, this course list is now appearing after my ‘header’ and i had previously managed to hide this behind the ‘header’ – i thought i was quite clever.
I haven’t changed anything, but it is now doing as ive shown above. Im wondering if i can insert CSS on the group page that will hide that pesky lesson list? Since i cant remember how i managed to hide it behind my header in the first place.
Thankyou
Kelly
Dave Warfel
Hi Kelly – You most likely can hide it with CSS, but since you’ve customized the page quite a bit and are using Elementor, I’d like to see the page before I offer up any CSS. Can you email me a link please? [email protected] – And provide login access, if needed.
Renee
Hi Dave! I hope you can point me in the right direction with this one. I modified the css on my lesson pages to hide the default content list at the bottom, but now my standard nav button at the bottom will only move forward to the next lesson, and not the first topic in that lesson. I’ve got Focus mode turned on, and the topics link won’t expand either. I used this code, and its apparently turned off all topics access. Is there anything I can do to keep the content at the bottom off, but still navigate to the topics?
.single-sfwd-lessons .ld-topic-list {
display: none;
}
Dave Warfel
Renee – Unfortunately, I don’t think so. At least, nothing automated.
By default, those buttons at the bottom for Next/Prev… if you’re on a LearnDash lesson, they take you to the next lesson (skipping over the topics). It’s frustrating and doesn’t make a lot of sense, and you’re not the only one that feels this way. But this is how LearnDash is currently designed.
One alternative would be to use custom code, and code in a dynamic link to find the first topic within that lesson, and output a link to it at the bottom of Focus Mode.
Another alternative, albeit quite manual, is to manually add a button/link to the bottom of your lesson page, that contains a link to the first topic inside that lesson.
Lk
Hi Dave!,
I have a question, isn’t possible to edit the output designed for “course access”?
for mobile version, because its too much spacing between the “Current Status,
Price, Get Started etc.
is there any solution
Dave Warfel
Hi LK — Yes, you can change the spacing for the course access area. It will require a little bit of custom CSS to do so.
In my opinion, they don’t look too spread out on mobile, so to be able to provide any CSS, I’d need to know more specifically what you want to change. Feel free to email me a screenshot with further info and I might be able to help.
[email protected]
Shubh
Hi Dave Warfel
I have changed learndash “Course” Label to “Subject” Now I want to edit the Title of the dropdown “Subject Categories” to something else. I want to change the default Categories filter label.
Thanks
Dave Warfel
To change any default LearnDash text, you can use a WordPress translation plugin. Loco Translate or Say What? are two good options.
Gabriel
Hi, thanks for your post. Can you help me? I’ve searched for a solution to this but can’t find it. I want the list of learndash lessons to be always expanded, always displayed. Like in this image. https://i.imgur.com/3mO3fkx.png
No need to click the “expand all” button. But always be visible.
Thanks 🙂
Dave Warfel
Hi Gabriel — You could do this with custom CSS, or we actually make a plugin that has this feature, along with 100+ other design features for LearnDash. It’s called Design Upgrade Pro for LearnDash.