Description on a card

Add the listing description to Listivo's ad cards with a small template override in your child theme, and clamp it to a few lines with CSS.

1 minute read

1. Copy the card template to your child theme

You need to copy this file to your child theme: wp-content/themes/listivo/templates/partials/card/listing_card.php

Keep the same folder structure

Remember to create the same path of folders in the child theme.

2. Print the description in the template

Find this PHP code:

wp-content/themes/listivo/templates/partials/card/listing_card.php

<!--?php if (!empty($lstLocation)) : ?-->

and before that paste this code:

wp-content/themes/listivo/templates/partials/card/listing_card.php

<p><?php echo wp_kses_post($lstCurrentListing->getDescription()); ?></p>

Save the file.

3. Add the custom CSS

We also need some custom CSS, which limits the description to seven lines:

css

.listivo-listing-card__main-head > p {
overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  margin-bottom: 15px
}

And here is the result:

Two ad cards side by side, "New Teddy Bear" ($15, Arlington, TX, USA) and "White Truck" ($50,000, Luanda, Angola), each showing a truncated description paragraph between the title and the location.

Keep reading

Utilizing a child theme: modifying PHP, CSS, JS files while maintaining future update compatibility Adding CSS code for future update compatibility

Ask the people who build Listivo

We answer by email from support@tangiblewp.com. With Premium Support, we also fix your site when something breaks.

Send us a message What Premium Support covers

We can also run your site for you, or build a new one.

Was this guide helpful?