The settings of the Listing Search element let you choose which criteria you want to enable for the listing search. You can choose whether you want to enable search by keyword, type, region and price:
There’s also another option available, and it’s the element skin, which enables you to choose between the light and dark appearance for the Listing Search element.
The last option is the search button text, which enables you to change the default Find Listings button label and put in something else.
Depending on the theme, these options may vary slightly, but they are generally very intuitive and it’s quite clear what each one does.
Any changes to the element that aren’t available through these options would have to be made through CSS, or in case of some more advanced changes, through editing theme files.
Some themes may not have as many options available, in which case most changes have to be made through CSS or edits of the template files.
Here are some of the most commonly requested changes:
- Removing Fields
If the element doesn’t have options to remove fields, this can be done through CSS. Here’s the code:
/*remove keyword field*/
.eltd-listing-search-holder .eltd-listing-search-field.keywords {
display: none !important;
}
/*remove location field*/
.eltd-listing-search-holder .eltd-listing-search-field.location {
display: none !important;
}
/*remove category field*/
.eltd-listing-search-holder .eltd-listing-search-field.category {
display: none !important;
}
The first code segment removes the keyword field, the second the location field, and the last one removes the category field.
Depending on how many fields you have after removing the unwanted fields, you will have to adjust the width of the remaining fields so they take up the available space. In case you have two fields left, you will need to add the following CSS:
/*two fields remaining*/
.eltd-listing-search-holder .eltd-listing-search-field {
width: 50% !important;
}
If you happen to have only one field, add the following CSS:
/*one field remaining*/
.eltd-listing-search-holder .eltd-listing-search-field {
width: 100% !important;
}
This code was made for our theme called Search & Go as an example, and is not universal. It might have to be adjusted for other themes. If the code doesn’t work for you and you can’t adjust it yourself, please contact the support center to help you out with this.
- Changing the icons – for more advanced users:
Icons can be changed either through CSS or by making the change directly in the theme files. In either case, you need to be comfortable with going through theme files in order to find the list of icons, as well as to have a certain understanding of HTML and CSS.
To find out which icon pack an element uses, navigate to one of these paths:
…/wp-content/plugins/theme-listing/post-types/listing/shortcodes/templates/listing-search-template.php
…/wp-content/plugins/theme-listing/modules/shortcodes/listing-search/templates/holder.php
Then locate one of the fields in the code, and find the segment which loads the icon. It should look like one of these two examples:
Or:
You’ll be able to see which icon pack is used for this element here. Now you can find the icon list in the following path:
…/wp-content/themes/theme-name/framework/lib/x.icons/
The ‘x’ in x.icons will vary for different themes, but this folder name ends with .icons. Then find the appropriate icon file, for example, if the icon pack is dripicons you need to open x.dripicons.php. Again, x will vary depending on the theme.
In this file you will find a list of icons with their codes:
Now that you have a list of icons, you can change them either through CSS or in the plugin files directly. To change them in the files directly, simply search the element files in the same paths as when you first searched for the icon pack:
…/wp-content/plugins/theme-listing/post-types/listing/shortcodes/templates/listing-search-template.php
…/wp-content/plugins/theme-listing/modules/shortcodes/listing-search/templates/holder.php
Then in the same segments as with the icon packs, you will find the specific icon which is used. Just change the icon to another icon from the list:
You can make these changes through CSS as well, by targeting the icons with CSS classes and changing their codes using the codes from the list of icons.
To find the class you need to target, you will need to inspect the icons in your front end using the developer tools, then add the :before tag on this class, and change the value of the content attribute by replacing it with one of the icon codes from the list of icons:
This class will be different from icon to icon and from theme to theme, so you will have to use this method to determine which class you need to target in order to make these changes.