Submit a ticket My Tickets
Login  Sign up
Open navigation

How to Customize the Course Cards of your Courses

In LearnWorlds, all your courses can be viewed and purchased via compact and easy-to-understand Course Cards, which appear in the Course Catalogue section.

Course Catalogue (Course Cards) section

The Course Cards appear in the Course Catalogue section, and they are an eye-catching point of attraction since they offer a brief sum-up (title, image, description, author, etc.) of what your courses have to offer.

Once you have added (e.g., to your Home page) the Course Catalogue section, then when a potential user visits your school's Home page, they can click on a course card to get directed to the course's layout page or purchase the course. 

Course Cards Settings

Before adding the Course Catalogue section (Course Cards) to your school pages, it is recommended to set up the Image, Title, and Description for all the courses in your school. 

Here is how you can set up your Course Cards:

1. Go to Courses and choose the course.

2. Navigate to the Settings course tab.

3. To add or change the course card image, click on Upload and choose your desired image. For best results, upload a 640 X 360 image file.

4. Add/change the Title of your course and the Description.

5. Add a Label, the Author’s Nameand the Author’s Avatar.

6. Don't forget to click on Save.

Everything you set up (course title, description, label, author name & picture) will be reflected on the Course Catalogue page section and its Course Cards.


  • The Title & Course Card image can also be added while initially creating your course.
  • The Author's name field will appear in your Courses section by the Author filter.
  • The Add a label field can be used in your custom Certificate template, as the Credits custom field.
  • The label field will also be displayed on the Course card as shown below:
  • If you would like to add space between the description lines, you can add <br> under each description sentence, and the space will be displayed in the Course Cards section.

So this will be the result:

Hide the progress bar

The Course Cards demonstrate the progress of a course for enrolled users.

By using the following CSS snippet you can hide the progress bar of the course cards. 

To hide the progress bar (for enrolled users) on the course card, the below CSS snippet should be added in the Custom code editor of your school, in the <style> Dynamic (CSS) field, and then click on Update.

/*hide progress bar from course cards*/
.lw-course-card .lw-interior-mt .learnworlds-overline-text {
display: none;

.lw-course-card-progress {
display: none;

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.