PHP Customization: Display All Price Fields on the ad cards

Show two or more price fields on a Listivo ad card - for example a sale price and a monthly rent - by overriding the card templates in your child theme.

1 minute read

This article provides an overview for developers who already have PHP experience. Its purpose is to illustrate how to display two or more prices on a card using PHP, enabling you to create your own customizations and style them accordingly.

Work in the child theme

Remember to keep all changes within the Child Theme, so your modifications remain compatible with future updates.

1 Create two price fields
2 Input the values
3 Modify the files responsible for displaying the price
The two examples below cover the standard card and the row card.

Card V4 (Standard)

In the file wp-content/themes/listivo/templates/partials/card/listing_card_v4.php, find the following code:

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

<div class="listivo-listing-card-v4__value listivo-listing-card-value-selector">
                            <?php echo wp_kses_post($lstMainValue); ?>
</div>

Replace it with:

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

<div class="listivo-listing-card-v4__value listivo-listing-card-value-selector">
                            <?php
                            foreach (tdf_app('card_main_value_fields') as $mainValueField) {
                                $value = $mainValueField->getValueByCurrency($lstCurrentListing);
                                if (!empty($value)) {
                                echo '<div style="margin-bottom:10px">';
                                echo wp_kses_post($value);
                                echo '</div>';
                                }
                            }
                            ?>
</div>

Result:

A listing card for "Modern apartment" in New York, NY, USA with two prices stacked under the title: $1,300,000 and $3,000/month, followed by the author Admin and 439 views.

Row card

In the file /wp-content/themes/listivo/templates/partials/card/listing_row_v2.php, find this section:

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

<div class="listivo-listing-card-row-v2__value listivo-listing-card-value-selector">
                        <?php if (!empty($lstMainValue)) : ?>
                            <?php echo wp_kses_post($lstMainValue); ?>
                        <?php endif; ?>
</div>

Replace it with:

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

<div class="listivo-listing-card-row-v2__value listivo-listing-card-value-selector">
                        <?php
                        foreach (tdf_app('card_main_value_fields') as $mainValueField) {
                            $value = $mainValueField->getValueByCurrency($lstCurrentListing);
                            if (!empty($value)) {
                                echo '<div style="margin-bottom:10px">';
                                echo wp_kses_post($value);
                                echo '</div>';
                            }
                        }
                        ?>
</div>

Below, you'll see the result that you can restyle to meet your needs. For instance, via Site Settings > Ad Cards, you can alter font sizes, card height, or remove elements like descriptions to make more room for the two prices.

The row card for the same "Modern apartment" listing: photo on the left, then the categories, title, location, a description excerpt and the two prices $1,300,000 and $3,000/month, with 440 views.

Keep reading

Utilizing a child theme: modifying PHP, CSS, JS files while maintaining future update compatibility How to customize Ad Card and Featured Ad Card

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?