How to Hide Text on Landing Page Course Cards

You can remove different elements from your landing page course cards with a simple customization of your theme code.

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

How_to_Hide_Text_on_Landing_Page_Course_Cards_-_Google_Chrome_2022-04-29_at_10.25.46_AM.jpeg

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:
```

```
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

How_to_Hide_Text_on_Landing_Page_Course_Cards_-_Google_Chrome_2022-04-29_at_10.27.21_AM.jpeg

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:
```
 
```
Click Save to apply your changes.
Important note: Both the  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

How_to_Hide_Text_on_Landing_Page_Course_Cards_-_Google_Chrome_2022-04-29_at_10.28.12_AM.jpeg

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:
```

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

In This Article