In this article, we will guide you through the process of creating an "Old Price" field, which will be displayed on the listing page. This will help users easily compare prices and identify discounts or offers. Additionally, in the second part of the article, we will show how to add this Price field to the listing card using PHP customization.

Creating the Old Price Field and Adding it to a Sample Listing

1. Create a New "Old Price" Field

2. Position the "Old Price" Field Next to the Current Price

3. Update a Sample Listing with Both Prices: Edit the Listing

4. Add Prices

5. Save the listing

2. Displaying the "Old Price" field on the Single Listing Template

To display the "Old Price" field, edit the single listing template that is used for displaying individual listings.

Select a preview listing with the "Old Price" field filled

Duplicate the Price Field for Desktop Design: Right-click on the price field and select the option to duplicate it. This will create a copy of the field for the "Old Price"

Select Field: "Old Price" and style it.

Apply the same changes for Tablet and Mobile Devices

Save your changes

3. Adding the "Old Price" to the card

It is not possible to add the old price on the card without modifying the PHP file. Doing so will require basic knowledge related to HTML, CSS, and PHP. If you have this knowledge, follow the steps below.

Please remebmer if you customize php files, to keep them in the Child Theme. We recommend to check this article before moving forward: How to use Child Theme? How to change files (php / css / js) and keep theme future update compatibility?

A. Check your Price Field ID in the URL structure when you edit it

In our example, it is 22742. Write it down, as you will need it later. 

Write it down, you will need it later.

Find all listing cards in the /wp-content/themes/vehica/templates/card/car/ folder, as shown below.

C. Open the card you wish to modify (e.g., card with a white background - card_v2.php) and add the following code:

            <?php
            $priceField = vehicaApp('price_fields')->find(static function ($priceField) {
                return $priceField->getId() === 22742; // 22742 is the ID of the price field
            });
            if ($priceField instanceof \Vehica\Model\Post\Field\Price\PriceField) :
                $price = $priceField->getFormattedValueByCurrency($vehicaCurrentCar);
                if (!empty($price)) : ?>
                    <span style="
                        font-size: 16px;
                        text-decoration: line-through;
                        color: purple;
                        font-weight: 700;
                        position: relative;
                        top: -6px;
                    ">
                    <?php echo esc_html($price); ?>
                    </span>
                <?php endif;
            endif;
            ?>

Please make sure you change 22742 to your Price Field ID and adjust the CSS styling to your needs. In our example, it is displayed as follows: