Home / / How to manage the Property Card Units in lists

How to manage the Property Card Units in lists

8111 views
This video explains how to manage the Property Card options in WPResidence with the Card Composer options Watch Video on Youtube

This article explains the property card settings in WPResidence.

The property card is the box that shows each property in lists, search results and taxonomy pages. You set the card type, images, rows, agent details and contact buttons from Theme Options > Property Card Design (used in lists).

Property Card General Settings

Go to Theme Options > Property Card Design (used in lists) > Property Card General Settings.

Property Card General Settings in WPResidence Theme Options

Unit Card Type

Choose the card design used on your website.

Property List display (*global option)

  • grid shows properties in columns.
  • list shows properties one under another.

No of chars to show in Property Title

Limits how many characters of the title show on the card. Leave it blank or set 0 to show the full title.

No of chars to show in Property card excerpt – grid style / list style

Limits the excerpt length for grid cards and for list cards.

Click and open Property Modal Window – Zillow style

Opens the property in a modal window instead of going to the property page.

Open title link to property page in new window

Opens the property page in a new browser tab.

No of property listings per row when the page is without sidebar

Sets how many cards show on each row on pages without a sidebar.

Property Unit/Card min height

Sets a minimum card height, so cards with short and long titles line up.

Show modal for the “Call” action in card type 7

When set to yes, the Call button opens a modal with the text below. When set to no, the button calls the agent phone number directly.

Text for the “Call” modal in card type 7

The text shown inside the Call modal. You can use these placeholders:

  • %property_id – property ID
  • %title – property title
  • %realtor_name – agent name
  • %realtor_phone – agent phone
  • %realtor_mobile – agent mobile

Use <br class=””> for a new line and <p class=””> for a new paragraph. Example:

<p class="modal-title">%title</p>
<p>Contact: %realtor_name</p>
<p>Phone: %realtor_phone<br>Mobile: %realtor_mobile</p>

Property Card Image Settings

Go to Theme Options > Property Card Design (used in lists) > Property Card Image Settings.

The card image is the property featured image. A property with no featured image shows the placeholder image.

Property Card Image Settings in WPResidence Theme Options

Use Slider in Property Unit

Shows the property gallery images as a slider on the card.

No of images in slider in property card

How many gallery images the slider shows. The default is 3. This option shows after you set the slider to yes.

Add placeholder image

Replaces the theme’s default placeholder image with your own.

Important: The small round image some card types show is the agent image, not a property image. The Agent Section settings below control it.

Property Card Content Composer

The composer sets which rows show on the card and in what order. Go to Theme Options > Property Card Design (used in lists) > Property Card Content Composer.

  1. Set Use Composer Settings to yes. When it is set to no, the cards use the layout of the selected card type. The composer does not apply to card type 5.
  2. In Property Card – rows order, drag the rows you want to the enabled column and order them. The rows are Title, Price, Additional Price, Excerpt, Details, Address, Categories, Contact and MLS Info.
  3. Pick what the Details, Address and Categories rows show in Property Card Details Row, Property Card Adress Row and Property Card Categories Row.
  4. Click Save Changes.

Use Composer Settings and Property Card rows order in the Content Composer

MLS Info row: “Listed by” with the listing office

The MLS Info row can print the listing office of each property, for example Listed by Axen Realty LLC, with the MLS logo next to the text. The office name comes from a property custom field, so it changes from listing to listing.

  1. In Property Card – rows order, drag MLS Info to the enabled column.
  2. Upload the MLS or Broker Logo.
  3. In MLS Info – Listing Field, pick the custom field that holds the listing office, for example ListOfficeName. The dropdown lists your property custom fields. If you import listings with MLSImport, the MLS fields saved as custom fields show here.
  4. In MLS Info – Label, type the text shown before the office name. The default is Listed by.
  5. Click Save Changes.

MLS Info options: logo, broker name, listing field and label

Listing What the card shows
Has a value in the selected field The label and the value, then the MLS logo
Has no value, or no field is selected The MLS logo and the MLS or Broker Name
No logo uploaded The text only

Property cards showing Listed by and the listing office with the MLS logo

Property Card Agent Section Settings

Go to Theme Options > Property Card Design (used in lists) > Property Card Agent Section Settings.

Property Card Agent Section Settings in WPResidence Theme Options

Display the agent row?

Shows or hides the whole agent row on the card.

Show Agent Image

Shows or hides the agent image.

Show agent name

Shows or hides the agent name.

Why the same agent image shows on many cards

The agent image on the card comes from the agent set as Main Agent on the property. When that agent has no image, the card shows the profile picture of the user who added the property, or a default user icon. That is why many cards can show the same image:

  • the same agent is assigned to all the properties;
  • the assigned agents have no image;
  • the properties have no agent assigned (card types 3, 4 and 8 then show the property author’s picture or the default icon; the other card types hide the agent part).

How to Assign an Agent so the Correct Agent Image Shows

  1. Go to Agents in wp-admin and edit the agent.
  2. Set the agent featured image and click Update.
  3. Go to Properties > All Properties and edit the property.
  4. In the Agent tab, select the agent as Main Agent and click Update.
  5. Clear the cache and check the card again.

To hide the agent image, set Show Agent Image to no. To hide the whole agent row, set Display the agent row? to no. Sites that do not use agents can hide the row this way.

Phone and WhatsApp Buttons

Card type 7 shows Call, Email and WhatsApp buttons. On the other card types you get the same buttons when you enable the Contact row in the composer. The buttons use the details of the property’s Main Agent: Call uses the agent phone, WhatsApp uses the agent mobile.

  1. Go to Agents and edit the agent.
  2. Add the phone and the mobile number, with the country code, for example +9715xxxxxxx. The theme removes spaces and other characters from the WhatsApp number.
  3. Edit the property and, in the Agent tab, select that agent as Main Agent.

Property Card Composer – Extra Settings

Go to Theme Options > Property Card Design (used in lists) > Property Card Composer – Extra Settings. These options set the text alignment and the look of the Details row: icon size, font, alignment, icon position and colour, gap, separator and label position.

Property Card Composer Extra Settings in WPResidence Theme Options

Show/Hide Details

Go to Theme Options > Property Card Design (used in lists) > Show/Hide Details. Set each item to yes or no:

  • compare button
  • share button
  • favorite button
  • property status labels
  • property featured labels

Show/Hide Details for the property card in WPResidence Theme Options

These settings apply to all property cards. An Elementor widget or shortcode can use its own card type.