Property Filter

In the Zozonest plugin, the Property Filter widget is the “Search Engine” of your website. It is a highly customizable search bar that allows users to filter listings by specific criteria. This widget is usually placed on the homepage (as a hero search) or at the top of the search results page.

1. Field Selection & Search Type

This is where you decide which “filters” your users can use to find properties:

• Select Fields: You can toggle on or off various search parameters, such as:

  • Keyword: A text box for searching titles or descriptions.

  • Property Type: A dropdown for categories (Villa, Apartment).

  • Property Status: A dropdown for “Action” (For Sale, For Rent).

  • Location: Dropdowns for Country, State, or City.

  • Price Range: A slider or two input boxes (Min and Max price).

  • Bedrooms/Bathrooms: Numerical selectors or dropdowns.

• Advanced Search Toggle: Allows you to hide complex filters (like “Amenities”) under a “More Filters” button to keep the interface clean.

2. Layout & Display Options

• Orientation: Choose between a Horizontal layout (best for wide Hero sections) or a Vertical layout (best for sidebars).

• Columns: Define how many fields appear per row (e.g., a 4-column search bar).

• Field Placeholders: Customize the “ghost text” inside the boxes (e.g., change “Type” to “What are you looking for?”).

• Search Button: Customize the text (e.g., “Search,” “Find Home,” or “Let’s Go”) and the icon (usually a magnifying glass).

3. Ajax & Dynamic Behavior

• Ajax Search: If enabled, the results on the page will update instantly as the user changes a filter, without the page needing to refresh.

• Dependency/Cascading Filters: If a user selects “USA” in the Country field, the State field will automatically update to show only US states.

• Result Page Redirect: Choose whether the search results should open on a new page or refresh the current one.

4. Style & Typography (Elementor)

• Input Styling: Customize the background color, border color, and rounded corners of the search boxes.

• Typography: Set the font family and size for both the labels (e.g., “Price”) and the text typed by the user.

• Button Design: Fully style the search button with gradients, hover effects, and custom padding.

• Range Slider Color: If using a price slider, you can change the color of the “track” and the “handle” to match your brand.