This will require the String Translation plugin from WPML, and if you do not see any strings showing up for translation, you will need to go into String Translation area in the admin area, and enable this setting, then load the page where it has the search and filtering sections you want to be able to translate

WPML String Translation Auto Register

One thing to note, you may want to click on Edit button and set it to only auto register strings for the Search and Filtering plugin:

WPML String Translation Auto Register Only S&F

After you enable the auto registration of strings, load the page where the Search and Filtering section is at that you want to translate.  After loading this page, go back to String Translation, and you should see all the new entries under wp-job-manager-search-filtering text domain.

This requires WP Job Manager Search and Filtering 1.5.0 or newer

HTML data for the card

The first thing to understand, is how the HTML is generated for the card popups.  This data comes directly from the listings list itself.  Each listing shown in the results, will have a <li> item wrapped around it.  When the plugin generates the HTML to use, it will pull it from the data inside this <li> tag.  More details are below with the full customization options.

New configuration options

When editing a map field type, if you click on the Type Config tab, you will now see these new options below for customizing the popup card:

WP Job Manager Search and Filtering Map Field Type Custom Popup Settings

By default, prior to version 1.4.7, only the title from the listing ouput (in the list) would be used.  Version 1.4.7+ will now show the title, and company name (if one exists).  If you want to customize this, click the checkbox to enable the popup card customization.

Use Full HTML

This setting will pull the entire content from the listings table, so what you see in the listings list, is exactly what will be used in the popup.  For example, here’s the output in the listings list table:

Listings List

When you enable the setting to use the full HTML, you will now see that exact HTML inserted into the popup:

Use Full HTML Enabled

As you can tell though, the format looks a little bit off.  The reason for this, is because the styles used for the display in the list table, are only applied when that HTML is inside a specific wrapper element (specifically a <li> inside of <ul>). Because of this, we can’t replicate these wrapper elements without issues, so if you plan to use this feature, you will need to use your own CSS to adjust the styles, and make this look the way you want.

Custom Selector

The other option, is to use a custom selector.  This will pull the HTML from any content inside that <li> item, and use that as the HTML for the popup.  This is what you will want to use if you want full customization ability.  This value should always be a class, and as such, should have a leading . (period).

For example, in the standard layout structure, if you wanted to use the content inside the position class element, you would use a value of .position in the custom selector field:

This is just basic ways of handling this, if you want to take this a step even further, that’s what this feature is really meant for.

Customization in Template

To have full customization functionality, you can edit the template file used to output the listing in the list table, adding your own HTML, and then using the custom selector feature above to select that element.  This will require familiarity with PHP.

First you need to understand how template overrides work:

https://wpjobmanager.com/document/developer-reference/themes/template-overrides/

For this example below, we will be using the Job Listings template override, you can find the default file located at wp-content/plugins/wp-job-manager/templates/content-job_listing.php

After you copy this file to your child theme’s directory (using instructions from link above), you can now start editing it and adding your own HTML to output.

Without a Link to Listing

In this example below, we will be creating HTML we do not want to show in the listings table (and only for the popup), without any kind of wrapping link (HTML a tag).  When you do not wrap the output in a link element, S&F plugin will automatically do this for you.

Custom Popup HTML in content-job_listing.php

<div class="test-custom-selector" style="display: none;">
    <h3 style="margin-top: 5px; margin-bottom: 5px;"><?php wpjm_the_job_title(); ?></h3>
    <div class="company">
       Company Name: <?php the_company_name( '<strong>', '</strong> ' ); ?>
    </div>
</div>

As you can see in the screenshot above, i’ve added the following HTML, but the biggest thing to note is the display: none; to prevent it from showing in the listings results table.  When the S&F plugin pulls the HTML to use, it will only use the HTML inside the element you define.  This allows you to build out a completely custom display for map cards, without it being shown in the results table.

The code above will result in a map popup similar to this:

Custom Map Popup Custom Template

With a Link to Listing

Alternatively, you can include a link anywhere inside the HTML to the listing, and the Search and Filtering plugin will not automatically wrap one around the listing.  Let’s use the same example as above, but this time let’s put the link around the Job Title only.

Custom Popup HTML in content-job_listing.php (with link)

<div class="test-custom-selector" style="display: none;">
    <a href="<?php the_job_permalink(); ?>">
       <h3 style="margin-top: 5px; margin-bottom: 5px;"><?php wpjm_the_job_title(); ?></h3>
    </a>
    <div class="company">
       Company Name: <?php the_company_name( '<strong>', '</strong> ' ); ?>
    </div>
</div>

The output would look similar to this, where as you can see, the link is only around the title now:

Custom Map Popup Custom Template with Link

These are all just very basic examples to get you started.  If you have an elite license and need help with this, feel free to open a support ticket and i’ll be happy to help you figure it out!

Don’t forget to check out the documentation on how to output custom fields using PHP:

Output custom field values using PHP

All you need to do is add some elements with these classes, and after results are returned, the Search and Filtering plugin will automatically insert the values.

Jobs Classes

Examples:
50 Jobs
1 Job

job_result_count – The count value (numeric) will be inserted into this element

job_result_count_test – The text for the type will be inserted into this element (Job or Jobs or whatever post type label you’re using, ie Listing/Listings, etc)

Full Example:
<div class="job_result_wrap"><span class="job_result_count"></span> <span class="job_result_count_text"></span></div>

Resumes Classes

Examples:
5 Resumes
1 Resume

resume_result_count – The count value (numeric) will be inserted into this element

resume_result_count_test – The text for the type will be inserted into this element (Resume or Resumes)

Full Example:
<div class="resume_result_wrap"><span class="resume_result_count"></span> <span class="resume_result_count_text"></span></div>

This is ONLY required if you’re using version 1.7.2 or older! Version 1.7.3+ of Capstone theme has been updated to change these already, so you don’t need to do anything if you’re using 1.7.3 or newer.

The first file you must edit is located at wp-content/themes/capstone/includes/sidebar-modules.inc.php on line #10-11 you should see this code:

<?php get_template_part( 'includes/job-search.inc' ); ?>
<?php get_template_part( 'includes/job-filters.inc' ); ?>

CHANGE the file to instead look like this:

<?php get_job_manager_template_part( 'includes/job-search.inc' ); ?>
<?php get_job_manager_template_part( 'includes/job-filters.inc' ); ?>

The second file you need to edit is located at wp-content/themes/capstone/includes/page-hero.inc.php on line #24 you should see this code:

<?php get_template_part( 'includes/'. $hero_search_module .'-search.inc' ); ?>

CHANGE the file to instead look like this:

<?php get_job_manager_template_part( 'includes/'. $hero_search_module .'-search.inc' ); ?>

That’s IT!  Hopefully the developer will update the theme to use this function instead so you don’t have to manually edit the files yourself.  Keep in mind IF YOU UPDATE THE THEME these changes WILL BE LOST and you MUST manually edit and update the files again!