How to change the magnifier icon?

The search icon may appear in 3 different places depending on the plugin settings:

– inside the input before the cursor

– inside the submit button

– just the icon as the search bar trigger

You can replace all these icons with Font Awesome search icon, for example, by using the following code:

add_filter( 'dgwt/wcas/form/magnifier_ico', function ( $html, $class ) {
  $html = '<i class="fa fa-search ' . $class . '"></i>';
  return $html;
}, 10, 2 );

You have two ways to add this code to your theme:

1. Open the functions.php file in your child theme and add the code at the end
2. Or install the Code Snippets plugin and apply this code as a snippet.

A new icon always requires custom CSS code to fix the size and position. There is no copy/paste solution because the final appearance depends on the theme and the new icon shape. For our example with Font Awesome, the following CSS should fix it:

.dgwt-wcas-ico-magnifier, .dgwt-wcas-ico-magnifier-handler {
    font-size: 18px;
    line-height: 18px;
    height: 18px;
}

Final effect

– inside the input before the cursor

– inside the submit button

– just the icon as the search bar trigger

Alternative ways

It’s possible to add <img> or <svg> images using the dgwt/wcas/form/magnifier_ico filter. Here are some more samples:

Your image

add_filter( 'dgwt/wcas/form/magnifier_ico', function ( $html, $class ) {
	$html = '<img class="' . $class . '" src="https://your-domain.com/wp-content/uploads/2021/04/icon.png" alt="Search icon" width="20" height="20" />';
	return $html;
}, 10, 2 );

Your SVG

add_filter( 'dgwt/wcas/form/magnifier_ico', function ( $html, $class ) {
  $svg = '';
  ob_start();
  ?>
    <svg class="<?php echo $class; ?>" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
      <path d="M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
    </svg>
  <?php
  $svg .= ob_get_clean();

  return $svg;
}, 10, 2 );