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

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

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

```
```
 
```
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. Many course creators also use upwork.com or fiverr.com for hiring developers.

In This Article