LDX Design
Free SVG Patterns by SVGBackgrounds.com

How to Hide the Default LearnDash Lesson List on Course Pages

By

On April 3, 2020

In Tutorials

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.

LearnDash course content lesson list, crossed out

Previous

How to Make the Entire Course Grid Element Clickable in LearnDash

Next

How to Enable Comments for LearnDash

86 Comments

Add Comment →

  1. Dana

    Thank you , thank you , thank you . I’ve been trying to figure this out for days

  2. 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.

  3. 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:

      .learndash-wrapper .ld-course-status.ld-course-status-enrolled {
    display: none;
}

      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.

  4. SP

    Thanks! I haven’t put the course online yet. I’m using the theme Astra. Does this help?

  5. 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:

      .learndash-wrapper .ld-course-status.ld-course-status-enrolled {
    display: none;
}

      This will hide it for non-enrolled students:

      .learndash-wrapper .ld-course-status.ld-course-status-not-enrolled {
    display: none;
}

  6. 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 !important piece. If you did want to add it, you just need a space between none & !important. It’s not working because there is currently no space.

      This should work:

      .learndash-wrapper .ld-course-status.ld-course-status-not-enrolled {
display: none;
}

      If for some reason it doesn’t, do this:

      .learndash-wrapper .ld-course-status.ld-course-status-not-enrolled {
display: none !important;
}

  7. 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. 🙁

  8. 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.

  9. 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.

  10. 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.

      .single-sfwd-courses .ld-lesson-list {
	display: none;
}

  11. 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-shortcode in there to only target the Elementor version and display: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

  12. 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 mycourses parameter. 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.

  13. chase wells

    You are a legend!

  14. 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

  15. 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.

  16. 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.

  17. 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: dave@escapecreative.com

  18. 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

  19. 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] shortcode
      4. 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; }

  20. 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-shortcode in place of .custom-class from my previous comment. That should work.

  21. Femke

    Hi there,

    I used the code to hide the progress bar wrapper. 

    .learndash-wrapper .ld-course-status.ld-course-status-enrolled {
    display: none;
}

    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.



  22. 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 a course_id parameter, 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.

  23. 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.

  24. 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 !

  25. 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!

  26. 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.

  27. 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.

  28. 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.

  29. 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 dave@escapecreative.com 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.

  30. 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:

      .page-id-2211.single-sfwd-courses .ld-lesson-list {
	display: none;
}

      That assumes that your site is using page-id-2211 as a class on the <body> tag. This is dependent on the theme you’re using. Some themes use this instead: postid-2211

      Look at your source code, specifically on the <body> tag, and figure out what the unique class name is.

  31. Abdul Ahad

    Thanks! You saved me!

  32. Eirik Sandal

    Thanks, Dave! .postid-2211 did the trick 🙂

  33. 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? dave@escapecreative.com – And provide login access, if needed.

  34. 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.

  35. 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.

      dave@escapecreative.com

  36. 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

  37. 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 🙂

  38. Kresimir

    Hi!

    I am using Learndash with Buddyboss, and I would like the /courses URL to only show courses the user is enrolled into, not all available courses. Is there an easy way to do this? Thanks all for any help you can provide! 🙂

    •

      Dave Warfel

      Hi Kresimir. BuddyBoss takes complete control over the /courses/ page when you use their theme/platform. One thing I can think of that you could try:

      1a. Disable the /courses/ archive page in the LearnDash settings. Go to LearnDash LMS > Courses > Settings, and scroll down to Archive Page. Disable that option.
      1b. Create a page of your own. You can try to give it a permalink of /courses/. That may or may not work. But this will become your new courses page.
      1c. Add the course grid block/shortcode onto that page, and use the parameters to limit the courses shown to only enrolled courses.

    • Kresimir

      Thank you so much! That’s actually a great idea, I’ll try that as well. I’ve found a workaround today:

      1. Added custom CSS to Buddyboss theme:
      #courses-all {
      display: none
      }

      2. redirected “/courses” and “/courses/” to “/courses/?type=my-courses” at a haproxy level (doing it at a .htaccess level was not working for “/courses/”).

      Not great, but it works (as far as I can see now).

  39. Iana Galai

    Hello, I have been using this code to hide the default content, but after the learndash update, this code doesn’t seem to work anymore…

    .single-sfwd-courses .ld-lesson-list {
    display: none;
    }

    Could you please help?.. Here is the page: https://lxlabs.org/courses/leadership-english/

    Thank you so much in advance!

    •

      Dave Warfel

      I just tried that exact CSS on the URL that you provided and it worked. I don’t see anything in the source code that would prevent it from working.

      Where are you adding the CSS?

  40. Iana

    Ok, I think I have formulated this in a very confusing way, sorry. If I add this code now, it also hides the elementor’s list. My goal is to keep the default one gone but the elementor one still visible. Is there any way to do it? Thank you very much for your help!

    •

      Dave Warfel

      I understand.

      Use this CSS instead. The first part hides both. The second part shows just the Elementor one.

      .single-sfwd-courses .ld-lesson-list {
	display: none;
}
.single-sfwd-courses .elementor-widget .ld-lesson-list {
	display: block;
}

  41. Iana Galai

    That’s exactly what I needed! Thank you so much!!

  42. DAVID

    Hi Dave, Thanks so much for all the help!
    Question, is there a way to hide courses from users who are registered to the same course in the dashboard?
    I mean, hide the course only from the dashboard, but still make it possible to register for it
    Thank you

    •

      Dave Warfel

      Hmm, I’m not sure exactly what you’re asking. Let’s start with this… what are you using for your “dashboard?” LearnDash doesn’t really use that terminology natively. Are you using the “LearnDash Profile” block? Some of third-party dashboard?

  43. DAVID

    To be honest, I don’t know what makes the dashboard for me, because someone else built the site for me, but I was able to come up with a solution using CSS with ‘has’
    It looks like this:
    }

    div.col-md-4:has(article#post-number) {
    visibility: hidden;
    }
    Thank you anyway

  44. Andrea

    Hi
    I have been trying to hide the lesson list from a lesson post without hiding the lesson list being used in another block on the same page (using WordPress/Divi templates). I have no CSS experience at all. Can you help?! Thank you

    •

      Dave Warfel

      Hi Andrea — Yes, I can help, but I’ll need access to your site so I can see the code on the page. This is most likely possible.

      If you email me with access to the page in question, I can help. I just emailed you and you can reply there 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *