Customize Contact Details

The phone, fax and email in the search results and marker pop-ups are added as one block. This page shows the default block, and how to change the order, remove a line or add your own fields.

The easier way: if the change is the same on every page, use the Section Editor. Load the List or Info window section under Store Locator > Settings > Fields Manager > Section Editor. The contact details are written out there as HTML, so you can reorder, remove or add lines directly, without code. The saved section is a fixed copy, though: it doesn’t follow later changes to the icon setting. To only change the labels, edit them on the Labels tab of the settings page.

The default block

The template filters add the contact details with $sections->contact_details(). That returns the plugin’s default block: the phone, fax and email in a fixed order, with labels, or with icons when icons are enabled.

<!-- Icons off -->
<p class="wpsl-contact-details">
<% if ( typeof phone !== "undefined" && phone ) { %>
<span><strong>{{wpsl_label( 'phone_label' )}}</strong>: <%= formatPhoneNumber( phone ) %></span>
<% } %>
<% if ( typeof fax !== "undefined" && fax ) { %>
<span><strong>{{wpsl_label( 'fax_label' )}}</strong>: <%= formatPhoneNumber( fax ) %></span>
<% } %>
<% if ( typeof email !== "undefined" && email ) { %>
<span><strong>{{wpsl_label( 'email_label' )}}</strong>: <%= formatEmail( email ) %></span>
<% } %>
</p>
<!-- Icons on -->
<p class="wpsl-contact-details">
<% if ( typeof phone !== "undefined" && phone ) { %>
<span class="wpsl-icon-phone"><%= formatPhoneNumber( phone ) %></span>
<% } %>
<% if ( typeof fax !== "undefined" && fax ) { %>
<span class="wpsl-icon-fax"><%= formatPhoneNumber( fax ) %></span>
<% } %>
<% if ( typeof email !== "undefined" && email ) { %>
<span class="wpsl-icon-email"><%= formatEmail( email ) %></span>
<% } %>
</p>
view rawwpsl-contact-details-default.html hosted with ❤ by GitHub

There’s no separate filter for this block. To change it in code, build it yourself in your template callback.

Build your own block

Place the code below in your template callback, before the contact details are added. The example puts the email first and adds a custom mobile field.

// The icon names from the icon setting, or the plugin's defaults.
$phone_icon = isset( $icons['phone'] ) ? $icons['phone'] : 'phone';
$email_icon = isset( $icons['email'] ) ? $icons['email'] : 'email';
// The contact details, in the order they're shown.
// Change the order, remove a row, or add your own fields.
$rows = [
[
'field' => 'email',
'label' => "{{wpsl_label( 'email_label' )}}",
'icon' => 'wpsl-icon-' . $email_icon,
'format' => 'formatEmail',
],
[
'field' => 'phone',
'label' => "{{wpsl_label( 'phone_label' )}}",
'icon' => 'wpsl-icon-' . $phone_icon,
'format' => 'formatPhoneNumber',
],
[
// A custom field
'field' => 'mobile',
'label' => esc_html__( 'Mobile', 'your-textdomain' ),
'icon' => 'wpsl-icon-mobile-phone',
'format' => 'formatPhoneNumber',
],
[
'field' => 'fax',
'label' => "{{wpsl_label( 'fax_label' )}}",
'icon' => 'wpsl-icon-fax',
'format' => 'formatPhoneNumber',
],
];
// Not $contact_details: the v3 templates use
// that name for the contact details setting.
$contact_block = '<p class="wpsl-contact-details">' . "\r\n";
foreach ( $rows as $row ) {
$field = $row['field'];
$value = '<%= ' . $row['format'] . '( ' . $field . ' ) %>';
$contact_block .= '<% if ( typeof ' . $field . ' !== "undefined" && ' . $field . ' ) { %>' . "\r\n";
// With icons enabled the icon replaces the label, like the plugin's own block.
if ( $icons_enabled ) {
$contact_block .= '<span class="' . esc_attr( $row['icon'] ) . '">' . $value . '</span>' . "\r\n";
} else {
$contact_block .= '<span><strong>' . $row['label'] . '</strong>: ' . $value . '</span>' . "\r\n";
}
$contact_block .= '<% } %>' . "\r\n";
}
$contact_block .= '</p>' . "\r\n";
view rawwpsl-contact-details-custom.php hosted with ❤ by GitHub

Each row has four keys: field is the name of the field in the location data, label is shown before the value when icons are off, icon is the icon class used when icons are on, and format is the function that formats the value. Change the order of the rows, remove a row, or add your own.

The code uses the $icons and $icons_enabled variables that are set at the top of the v3 template examples. If you write your own callback, add these lines first:

$settings = wpsl_get_service( 'wpsl_settings' );
$icons = $settings->get( 'appearance', 'icons', [] );
$icons_enabled = ! empty( $icons['enabled'] );
view rawwpsl-custom-contact-icons.php hosted with ❤ by GitHub

Use it in a template

The block is stored in $contact_block. Don’t name it $contact_details: the v3 templates already use that name for the contact details setting, and overwriting it breaks the template.

Replace the $sections->contact_details() call with $contact_block. Which line that is depends on the template:

Filter Replace with Shown when this location is selected
wpsl_listing_template $listing_template .= $contact_block; Below the address in the search results
wpsl_more_info_template $more_info_template .= $contact_block; The “more info” section in the search results
wpsl_info_window_template $info_window_template .= $contact_block; The store locator marker pop-up
wpsl_cpt_info_window_template $cpt_info_window_template .= $contact_block; The store page marker pop-up

Keep the location check around it in the example, so the block still follows the contact details setting under Settings > User Experience.

Custom fields

  • Search results and the store locator pop-up: fields you create in the Fields Manager are included automatically, under their field name. Fields you register in code need the wpsl_frontend_meta_fields filter.
  • The pop-up on store pages: custom fields aren’t included automatically yet. Add them with the wpsl_cpt_info_window_meta_fields filter.
  • Clickable links: formatPhoneNumber() only adds a link when “Make the phone number clickable on mobile devices?” or “Make the contact details always clickable?” is enabled, and formatEmail() only with “Make the contact details always clickable?”. To always create a link, write it yourself, as in the Make Different Data Clickable examples.

The address block on store pages

Below the map on a store page, the contact details come from the [wpsl_address] shortcode, not from this block. To add a field there, see Custom Meta Data in Create a Custom Store Page Template.