You can remove different elements from your landing page course cards with a simple customization of your theme code.
In This Article
How to Find and Edit Course Cards in Your Theme File
How to Hide the Number of Lessons on the Course Card
How to Hide the Price from the Course Card
How to Hide the Category Name from the Course Card
How It Works
Currently, the number of lessons and the price for each course is automatically displayed on its course card on your landing pages and the All Courses page. If you prefer your course cards not to include one or more of these elements, you can hide them by customizing your site's theme code.
How to Find and Edit Course Cards in Your Theme File
- Open Design your Site and click on Theme Library
- Click on the Ellipses (...) menu and select Edit code
- In the theme editor, go to Snippets, and select course_card
- Follow the instructions below to hide specific elements
How to Hide the Number of Lessons on the Course Card
- Look for this snippet of code:
{% if course.chapters.size != blank %}<span class="course-card__lesson-count"><strong>{{ course.lesson_count }} {{ 'liquid.partials.course_card.details_lessons' | translate }}</strong></span>{% endif %}
- Then, insert <! - - and - -> tags around this line of code to prevent this from displaying on your site. You can also highlight the text and use the shortcut Command + / on a Mac, or Control + / on a PC. The final code should look like this:
<!--{% if course.chapters.size != blank %}<span class="course-card__lesson-count"><strong>{{ course.lesson_count }} {{ 'liquid.partials.course_card.details_lessons' | translate }}</strong></span>{% endif %}-->
Important note: Both the <!- - and - -> tags should contain two "-" hyphens without spaces in between. You can directly copy and paste the above code snippet into your theme code console. - Click Save to apply your changes.
How to Hide the Price from the Course Card
- Look for this snippet of code:
{% if course.is_public %}<span class="course-card__price"><strong>{{ course.display_price }}</strong></span>{% endif %}
- Then, insert <! -- and --> tags around this line of code to prevent this from displaying on your site. You can also highlight the text and use the shortcut Command + / on a Mac, or Control + / on a PC. The final code should look like this:
<!--{% if course.is_public %}<span class="course-card__price"><strong>{{ course.display_price }}</strong></span>{% endif %}-->
- Click Save to apply your changes.
Important note: Both the <!-- and --> tags contain two "-" hyphens. You can directly copy and paste the above code into your theme code console.
How to Hide the Category Name from the Course Card
- Look for these snippets of code:
{{ collection.name | append: ", " }}
{{ collection.name }}
- Then, insert <! -- and --> tags around this line of code to prevent this from displaying on your site. You can also highlight the text and use the shortcut Command + / on a Mac, or Control + / on a PC. The final code should look like this:
<!--{{ collection.name | append: ", " }}-->
<!--{{ collection.name }}-->
- Click Save to apply your changes.
More on Code Customizations
We do not generally provide support for code customizations, however we have created these resources to help with migrating from a Legacy theme to Site Builder.
If you are looking for any further assistance with custom code, we have some other common code customization instructions here. We also have some wonderful freelance web developers on our Thinkific Experts page who you can reach out to if you need! There's also the Thinkific Store on Fiverr, for smaller, quicker jobs.