LearnDash Design & Tutorials

LearnDash Design & Tutorials

How to Hide the Default LearnDash Lesson List on Course Pages

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

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!

5 out of 5 stars

Proven and tested by over 1,000 LearnDash customers.

Learn More →

Previous

How to Make the Entire Course Grid Element Clickable in LearnDash

Next

How to Enable Comments for LearnDash

65 Comments

  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?

    • 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?

    • 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. Hallo Dave,

    Heb jij CSS om de course info row in learnpress te verbergen?
    Je zou me er heel erg mee helpen!

    • 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!

    • 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

    • 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

    • 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

    • 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

    • 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!

    • 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?

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

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

    • 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]

  18. 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=”?”]

    • 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?

    • 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…

    • 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

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

    • 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. 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 ?

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

    • It not perfect but i can live with the work around – thanks for your time an help !

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

    • 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?

    • 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;
    }

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

  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?

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

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

Leave a Reply

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

Powered by WordPress & Theme by Anders Norén