Search Results for 'Sample Results Template'

[Trevor]

To modify the output of the results.php template file (I have done this for myself on projects, and even some using Avada), I have examined the output HTML on a sample page and reverse engineered that into a combination of HTML and PHP for a custom template. For Avada, it used to typically take 4-8 hours to do though.

An alternative solution (and what I now do if I am having to use Avada) is to use a plugin that works in a similar way to our shortcode method:

https://searchandfilter.com/documentation/3rd-party/post-grid/

In the Post Grid plugin, you determine the number of columns by using the post width setting.

[Anonymous]

Hey guys,

we have about 50 results in total and 20 per page. The results page shows that there are 3 pages (before applying any filters) which is correct. But you can’t click through them before applying a filter.

Here’s the link to the website:
https://hypnoschool.de/therapeutenliste/uebersicht

Heres ist the code fom my results.php

<?php
/**
 * Search & Filter Pro 
 *
 * Sample Results Template
 * 
 * @package   Search_Filter
 * @author    Ross Morsali
 * @link      https://searchandfilter.com
 * @copyright 2018 Search & Filter
 * 
 * Note: these templates are not full page templates, rather 
 * just an encaspulation of the your results loop which should
 * be inserted in to other pages by using a shortcode - think 
 * of it as a template part
 * 
 * This template is an absolute base example showing you what
 * you can do, for more customisation see the WordPress docs 
 * and using template tags - 
 * 
 * http://codex.wordpress.org/Template_Tags
 *
 */

// If this file is called directly, abort.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

if ( $query->have_posts() )
{
	?>
	
	<?php echo $query->found_posts; ?> Ergebnisse gefunden<br />
	Seite  <?php echo $query->query['paged']; ?> von <?php echo $query->max_num_pages; ?><br />
	
	<div class="pagination">
		
		<div class="nav-previous"><?php next_posts_link( 'Vorherige Ergebnisse', $query->max_num_pages ); ?></div>
		<div class="nav-next"><?php previous_posts_link( 'Weitere Ergebnisse' ); ?></div>
		<?php
			/* example code for using the wp_pagenavi plugin */
			if (function_exists('wp_pagenavi'))
			{
				echo "<br />";
				wp_pagenavi( array( 'query' => $query ) );
			}
		?>
	</div>
	
	<?php
	while ($query->have_posts())
	{
		$query->the_post();
		
		?>
		<div class="therapeut">
			<p><a href="<?php the_permalink(); ?>"><?php the_field("name"); ?></a></p>
			
			<?php 
				if ( has_post_thumbnail() ) {
					echo '<p>';
					the_post_thumbnail("thumbnail");
					echo '</p>';
				}
			?>
			<p><?php the_field("land"); ?></p>
			<p><?php the_field("plz_&_stadt"); ?></p>
			
		</div>
		
		<hr />
		<?php
	}
	?>
	Seite <?php echo $query->query['paged']; ?> von <?php echo $query->max_num_pages; ?><br />
	
	<div class="pagination">
		
		<div class="nav-previous"><?php next_posts_link( 'Vorherige Ergebnisse', $query->max_num_pages ); ?></div>
		<div class="nav-next"><?php previous_posts_link( 'Weitere Ergebnisse' ); ?></div>
		<?php
			/* example code for using the wp_pagenavi plugin */
			if (function_exists('wp_pagenavi'))
			{
				echo "<br />";
				wp_pagenavi( array( 'query' => $query ) );
			}
		?>
	</div>
	<?php
}
else
{
	echo "Keine Ergebnisse gefunden";
}
?>

[Anonymous]

Hi Trevor thank you for the help- I tried adding the code to the top and replacing and it did not sort the tags alpahbetically. Where I am trying to accomplish this is the left side “Tags” filter on the resources page (https://hceg.org/resources/) before and after filtering.

Here is the current code I updated on the search-filter/results.php file

<?php
/**
* Search & Filter Pro
*
* Sample Results Template
*
* @package Search_Filter
* @author Ross Morsali
* @link https://searchandfilter.com
* @copyright 2018 Search & Filter
*
* Note: these templates are not full page templates, rather
* just an encaspulation of the your results loop which should
* be inserted in to other pages by using a shortcode – think
* of it as a template part
*
* This template is an absolute base example showing you what
* you can do, for more customisation see the WordPress docs
* and using template tags –
*
* http://codex.wordpress.org/Template_Tags
*
*/

function compare_tags_naturally($a, $b) {
return strnatcmp($a->name, $b->name);
}
if ( $query->have_posts() )
{
?>

<div style=”text-align: right”>
<?php global $searchandfilter;
$sf_current_query = $searchandfilter->get(13622)->current_query();
if ((!$sf_current_query->is_filtered())&&($sf_current_query->get_search_term()==””)) { } else { ?>
Found <?php echo $query->found_posts; ?> Results,
<?php } ?>
Page <?php echo $query->query[‘paged’]; ?> of <?php echo $query->max_num_pages; ?></div>

<div class=”pagination”>

<div class=”nav-previous”><?php next_posts_link( ‘Previous’, $query->max_num_pages ); ?></div>
<div class=”nav-next”><?php previous_posts_link( ‘Next’ ); ?></div>
<?php
/* example code for using the wp_pagenavi plugin */
if (function_exists(‘wp_pagenavi’))
{
echo “<br />”;
wp_pagenavi( array( ‘query’ => $query ) );
}
?>
</div>

<?php
while ($query->have_posts())
{
$query->the_post();

?>
<div>
<h2>” target=”_blank” class=”read_more_link”><?php the_title(); ?></h2>

<?php the_excerpt(); ?>
<?php
if ( has_post_thumbnail() ) {
echo ‘<p>’;
the_post_thumbnail(“small”);
echo ‘</p>’;
}
?>
<p><?php the_category(); ?></p>
<?php
$unsorted_tags = get_the_tags();
$tags = usort($unsorted_tags, ‘compare_tags_naturally’);
?>
<p><?php echo implode(‘, ‘, $tags); ?></p>
<p><small><?php the_date(); ?></small></p>

</div>

<hr />
<?php
}
?>
Page <?php echo $query->query[‘paged’]; ?> of <?php echo $query->max_num_pages; ?><br />

<div class=”pagination”>

<div class=”nav-previous”><?php next_posts_link( ‘Previous’, $query->max_num_pages ); ?></div>
<div class=”nav-next”><?php previous_posts_link( ‘Next’ ); ?></div>
<?php
/* example code for using the wp_pagenavi plugin */
if (function_exists(‘wp_pagenavi’))
{
echo “<br />”;
wp_pagenavi( array( ‘query’ => $query ) );
}
?>
</div>
<?php
}
else
{
echo “No Results Found”;
}
?>

[Anonymous]

I did it inside scripts tag and inside file.js (add script src to this file like normal), nothing happened, the console is empty.

I use this on woocommerce shop page, but every js working there – I’d checked hierarchy scripts but nothing change.

this is my script for the show and hide filters – maybe there is a problem but I can’t find it.

$(document).ready(function () {
    // show/hide filters in specify buttons
    $("form#search-filter-form-120 ul").first().addClass("all-filters");
    $('p.button-filter').each(function () {
        $(this).on('click', function () {
            $(this).addClass('active').siblings().removeClass(
                'active');
            if ($(this).hasClass('active') && $(this).hasClass('button-filter-1')) {
                // if (window.location.href.indexOf('?sort_order=') > 0) {
                $("form#search-filter-form-120 ul.all-filters .sf-field-sort_order")
                    .toggleClass(
                        'show-filter')
                    .siblings('.show-filter').removeClass(
                        'show-filter');
                // }
            } else if ($(this).hasClass('active') && $(this).hasClass(
                'button-filter-2')) {
                $("form#search-filter-form-120 ul.all-filters .sf-field-taxonomy-product_cat")
                    .toggleClass(
                        'show-filter')
                    .siblings('.show-filter').removeClass(
                        'show-filter');
            } else if ($(this).hasClass('active') && $(this).hasClass(
                'button-filter-3')) {
                $("form#search-filter-form-120 ul.all-filters .sf-field-taxonomy-pa_family")
                    .toggleClass(
                        'show-filter')
                    .siblings('.show-filter').removeClass(
                        'show-filter');
            } else if ($(this).hasClass('active') && $(this).hasClass(
                'button-filter-4')) {
                $("form#search-filter-form-120 ul.all-filters .sf-field-taxonomy-pa_finish")
                    .toggleClass(
                        'show-filter')
                    .siblings('.show-filter').removeClass(
                        'show-filter');
            } else if ($(this).hasClass('active') && $(this).hasClass(
                'button-filter-5')) {
                $("form#search-filter-form-120 ul.all-filters .sf-field-taxonomy-pa_colour")
                    .toggleClass(
                        'show-filter')
                    .siblings('.show-filter').removeClass(
                        'show-filter');
            } else if ($(this).hasClass('active') && $(this).hasClass(
                'button-filter-6')) {
                $("form#search-filter-form-120 ul.all-filters .sf-field-taxonomy-pa_material")
                    .toggleClass(
                        'show-filter')
                    .siblings('.show-filter').removeClass(
                        'show-filter');
            } else if ($(this).hasClass('active') && $(this).hasClass(
                'button-filter-7')) {
                $("form#search-filter-form-120 ul.all-filters .sf-field-taxonomy-pa_size")
                    .toggleClass(
                        'show-filter')
                    .siblings('.show-filter').removeClass(
                        'show-filter');
            } else if ($(this).hasClass('active') && $(this).hasClass(
                'button-filter-8')) {
                $("form#search-filter-form-120 ul.all-filters .sf-field-post-meta-_price")
                    .toggleClass(
                        'show-filter')
                    .siblings('.show-filter').removeClass(
                        'show-filter');
            } else if ($(this).hasClass('active') && $(this).hasClass(
                'button-filter-9')) {
                $("form#search-filter-form-120 ul.all-filters .sf-field-taxonomy-pa_availibility")
                    .toggleClass(
                        'show-filter')
                    .siblings('.show-filter').removeClass(
                        'show-filter');
            }
        })

    });
});

here is my results.php page

<?php
/**
 * Search & Filter Pro 
 *
 * Sample Results Template
 * 
 * @package   Search_Filter
 * @author    Ross Morsali
 * @link      https://searchandfilter.com
 * @copyright 2018 Search & Filter
 * 
 * Note: these templates are not full page templates, rather 
 * just an encaspulation of the your results loop which should
 * be inserted in to other pages by using a shortcode - think 
 * of it as a template part
 * 
 * This template is an absolute base example showing you what
 * you can do, for more customisation see the WordPress docs 
 * and using template tags - 
 * 
 * http://codex.wordpress.org/Template_Tags
 *
 */

// If this file is called directly, abort.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

if ( $query->have_posts() )
{
	?>

<div id="ajax-reload" class="row">

    <?php
	while ($query->have_posts())
	{
		$query->the_post();
		
		?>
    <?php
                global $product;
	$pid = $product->get_id();
	// Get wishlist for current user. ?>
    <div class="col-md-6 col-xl-4 product-block">

        <div class="container-img">
            <a href="<?php the_permalink(); ?>">
                <?php 
				if ( has_post_thumbnail() ) {

					//the_post_thumbnail("small");

					 $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
                            echo '<div style="background: url('. $url.');" class="img-product-item">'; ?>

                <a
                    id="wish-list-icon"><?php echo do_shortcode('[yith_wcwl_add_to_wishlist product_id=' . $pid . ']' )?></a>

        </div>

        <div class="overlay">
            <img src="<?php the_field('pictogram_products') ?>" alt="" class="pictogram-img">
            <div class="text">
                <h2 class="name-product-overlay"><a href="<?php the_permalink()  ?>"><?php the_title(); ?></a></h2>

                <?php $price = get_post_meta( get_the_ID(), '_regular_price', true); 
                

                $price_sale = get_post_meta( get_the_ID(), '_sale_price', true); // Retrive products sale price
  // Formatted price by adding decimal
  $formatted_price_sale = wc_price( $price_sale );
  $formatted_price = wc_price( $price ); // Formatted price by adding decimal ?>

            </div>
            <div class="cart-area-product">
                <?php echo '<a class="disabled-link">
	
	<div class="like-price-buy">
		<a href="'. do_shortcode('[add_to_cart_url id=' . $pid . ']' ) .'" data-product_id="'. $pid .'" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart">
        <svg xmlns="http://www.w3.org/2000/svg" width="18.417" height="22.521" viewBox="0 0 18.417 22.521">
        <g id="Group_22" data-name="Group 22" transform="translate(1 1)">
          <path id="Path_104" data-name="Path 104" d="M663.582,1530.458v-4.788a3.42,3.42,0,0,1,3.42-3.42h0a3.42,3.42,0,0,1,3.42,3.42v4.788" transform="translate(-658.794 -1522.25)" fill="none" stroke="#636363" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
          <path id="Path_105" data-name="Path 105" d="M666,1542.25v13.681H649.582V1542.25h17.095" transform="translate(-649.582 -1535.41)" fill="none" stroke="#636363" stroke-miterlimit="10" stroke-width="2"/>
          <line id="Line_4" data-name="Line 4" x2="8.795" transform="translate(3.664 12.459)" fill="none" stroke="#636363" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
          <line id="Line_5" data-name="Line 5" x2="8.795" transform="translate(3.664 15.391)" fill="none" stroke="#636363" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
        </g>
      </svg>
      <span class="order-now-products">Order now</span>
        </a>
        <span class="price">'. do_shortcode('[product_price id='. $pid. ']' ).'</span>

	</div>
	</a>'; // Print new html with title and price ?>
            </div>
        </div>
        </a>
    </div>

    <div class="product-info-small">
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    </div>

    <?php }	?>
    <p><?php the_category(); ?></p>
</div>

<?php
	}
	?>
</div>

<div class="pagination">

    <div class="nav-previous"><?php next_posts_link( 'Load more', $query->max_num_pages ); ?>
    </div>

    <div class="nav-next"><?php previous_posts_link( 'Load previous' ); ?></div>
    <?php
			/* example code for using the wp_pagenavi plugin */
			if (function_exists('wp_pagenavi'))
			{
				echo "<br />";
				wp_pagenavi( array( 'query' => $query ) );
			}
		?>
</div>
<?php
}
else
{
	echo "No Results Found";
}
?>

if it helps will great.

[Trevor]

That suggest that this line is not being called again (at least it isn’t working):

<?php echo TOROFLIX_Add_Theme_Support::toroflix_pagination(); ?>

I can see that it is inside a div that suggests, to me, that WP-PageNavi is being used. Is that installed as a plugin in your site?

If you look in our plugin folder, you will find a sub folder named ‘templates’. Inside that is a file named results.php, and that too has sample code on how to call WP-PageNavi:

	<div class="pagination">
		
		<div class="nav-previous"><?php next_posts_link( 'Older posts', $query->max_num_pages ); ?></div>
		<div class="nav-next"><?php previous_posts_link( 'Newer posts' ); ?></div>
		<?php
			/* example code for using the wp_pagenavi plugin */
			if (function_exists('wp_pagenavi'))
			{
				echo "<br />";
				wp_pagenavi( array( 'query' => $query ) );
			}
		?>
	</div>

It may be that you have to bring whatever function is actually being called by your code to actually site inside the template, rather than calling it in.

[Anonymous]

I do, thanks. However, it’s now outputting the text ‘ArrayAntigonish’ (or ‘Array’ + whatever county is selected) and it’s not outputting category name. I have tried to puzzle through this to see if I can work out how to fix it myself but my PHP just isn’t good enough.

Here’s a link to a sample results page.

What I’d like it to say is something like “You searched for Breweries, Distilleries, and Vineyards in Antigonish County” and then the results.

Below is the full code of results.php. If you can offer any more insight I’d be grateful.

<?php
/**
 * Search & Filter Pro 
 *
 * Sample Results Template
 * 
 * @package   Search_Filter
 * @author    Ross Morsali
 * @link      https://searchandfilter.com
 * @copyright 2018 Search & Filter
 * 
 * Note: these templates are not full page templates, rather 
 * just an encaspulation of the your results loop which should
 * be inserted in to other pages by using a shortcode - think 
 * of it as a template part
 * 
 * This template is an absolute base example showing you what
 * you can do, for more customisation see the WordPress docs 
 * and using template tags - 
 * 
 * http://codex.wordpress.org/Template_Tags
 *
 */

// If this file is called directly, abort.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

if ( $query->have_posts() )
{
	?>
	
	There are <?php echo $query->found_posts; ?> posts that match your search! <br />

	<?php
	
	 global $searchandfilter;
	 
$sf_current_query = $searchandfilter->get(1949)->current_query()->get_array();

echo implode(", ",$sf_current_query['_sft_category']['active_terms']);
$county = $sf_current_query["_sfm_county"]["active_terms"][0]["value"];
if ($county) {
echo $county;
} else {
echo "All Counties";
}
	

	while ($query->have_posts())
	{
		$query->the_post();
		
		?>
		<div>
			<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
			
			<p><?php the_excerpt(); ?></p>
			
			
		</div>
		
		<hr />
		<?php
	}
	?>
	Page <?php echo $query->query['paged']; ?> of <?php echo $query->max_num_pages; ?><br />
	
	<div class="pagination">
		
		<div class="nav-previous"><?php next_posts_link( 'Next page', $query->max_num_pages ); ?></div>
		<div class="nav-next"><?php previous_posts_link( 'Previous page' ); ?></div>
		<?php
			/* example code for using the wp_pagenavi plugin */
			if (function_exists('wp_pagenavi'))
			{
				echo "<br />";
				wp_pagenavi( array( 'query' => $query ) );
			}
		?>
	</div>
	<?php
}
else
{
	echo "No Results Found";
}
?>

[Trevor]

That issue is simply the way that whatever code outputs the posts handles a ‘No Results Found’ scenario. As you are using our Shortcode method, and thus the infinite scroll version of results.php, this customized version handles ‘No Results’ better I think:

<?php
/**
 * Search & Filter Pro 
 *
 * Sample Results Template
 * 
 * @package   Search_Filter
 * @author    Ross Morsali
 * @link      http://www.designsandcode.com/
 * @copyright 2015 Designs & Code
 * 
 * Note: these templates are not full page templates, rather 
 * just an encaspulation of the your results loop which should
 * be inserted in to other pages by using a shortcode - think 
 * of it as a template part
 * 
 * This template is an absolute base example showing you what
 * you can do, for more customisation see the WordPress docs 
 * and using template tags - 
 * 
 * http://codex.wordpress.org/Template_Tags
 *
 */

if ( $query->have_posts() ) {
 ?>
 
 Found <?php echo $query->found_posts; ?> Results<br />
 <div class='search-filter-results-list'>
 <?php
  while ($query->have_posts())
  {
   $query->the_post();
   
   ?>
   <div class='search-filter-result-item'>
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    
    <p><br /><?php the_excerpt(); ?></p>
    <?php 
     if ( has_post_thumbnail() ) {
      echo '<p>';
      the_post_thumbnail("small");
      echo '</p>';
     }
    ?>
    <p><?php the_category(); ?></p>
    <p><?php the_tags(); ?></p>
    <p><small><?php the_date(); ?></small></p>
    
    <hr />
   </div>
   
   <?php
  }
 ?>
 </div>
<?php
} else {
 
 //figure out which type of "no results" message to show
 $message = "noresults"; 
 if(isset($query->query['paged'])) {  
  if($query->query['paged']>1){
   $message = "endofresults";
  }
 }
 
    if($message=="noresults") {
    ?>
 <div class='search-filter-results-list' data-search-filter-action='infinite-scroll-end'>
  <span>No Results Found</span>
 </div>
 <?php
    } else {
 ?>
 <div class='search-filter-results-list' data-search-filter-action='infinite-scroll-end'>
  <span>End of Results</span>
 </div>
 <?php
 }
}
?>

Try using that instead?

[Trevor]

I checked back on my notes and before, with Thrive, I ‘cheated’ by creating a custom results.php template that mimicked the Thrive page. So, make the page and content as you like ignoring our plugin entirely, then inspect the HTML of the content area and edit the results.php we provide as an exemplar following this guide, so that it matches the structure and classes etc.):

https://searchandfilter.com/documentation/search-results/using-a-shortcode/#customising-the-results

So, here is one I made before:

<?php
/**
 * Search & Filter Pro 
 *
 * Sample Thrive Results Template
 * 
 */

if ( $query->have_posts() )
{
	?>
	
	Found <?php echo $query->found_posts; ?> Cars<br />
	Page <?php echo $query->query['paged']; ?> of <?php echo $query->max_num_pages; ?><br />
	
	<div class="pagination">
		
		<div class="nav-previous"><?php next_posts_link( 'Older posts', $query->max_num_pages ); ?></div>
		<div class="nav-next"><?php previous_posts_link( 'Newer posts' ); ?></div>
		<?php
			/* example code for using the wp_pagenavi plugin */
			if (function_exists('wp_pagenavi'))
			{
				echo "<br />";
				wp_pagenavi( array( 'query' => $query ) );
			}
		?>
	</div>
	<div class="thrv_wrapper thrv_post_grid" data-unit="px">
	  <div class="tve_post_grid_wrapper tve_clearfix tve_post_grid_grid">

        <div style="display: flex;" class="tve_pg_row tve_clearfix">

	<?php
    $thrive_counter = 0;
    $thrive_row_counter = 0;
	while ($query->have_posts())
	{
      if ( $thrive_counter == 0 ) && ( $thrive_row_counter > 0 ) {
      ?>
	    </div>
        <div style="display: flex;" class="tve_pg_row tve_clearfix">
      <?php
      }
      $query->the_post();
		
      ?>
			<div class="tve_post tve_post_width_5 " style="align-items: stretch;">
              <div class="tve_pg_container">
			
			
			<?php 
              if ( has_post_thumbnail() ) {
                $thrive_image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'single-post-thumbnail' );
			?>
                  <a href="<?php the_permalink(); ?>">
                    <div class="tve_post_grid_image_wrapper" style="background-image: url('<?php echo $thrive_image[0]; ?>')">
                      <div class="tve_pg_img_overlay">
                        <span class="thrv-icon thrv-icon-forward"></span>
                      </div>
                    </div>
                  </a>
			<?php
              }
			?>

		        <span class="tve-post-grid-title " style="font-size: 18px;line-height: 20px;font-family:'Arial', 'Helvetica', 'sans-serif';">
                  <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </span>

                <div class="tve_pg_more" data-tve-custom-colour="62938813">
                  <a href="<?php the_permalink(); ?>">View Now</a>
                  <span class="thrv-icon thrv-icon-uniE602"></span>
                </div>
			
              </div>
            </div>
		
		<?php
      $thrive_counter++;
      if ( $thrive_counter > 4 ) {
        $thrive_counter = 0;
        $thrive_row_counter++;
      }
	}
	?>
	    </div>
      </div>
    </div>
	Page <?php echo $query->query['paged']; ?> of <?php echo $query->max_num_pages; ?><br />
	
	<div class="pagination">
		
		<div class="nav-previous"><?php next_posts_link( 'Older posts', $query->max_num_pages ); ?></div>
		<div class="nav-next"><?php previous_posts_link( 'Newer posts' ); ?></div>
		<?php
			/* example code for using the wp_pagenavi plugin */
			if (function_exists('wp_pagenavi'))
			{
				echo "<br />";
				wp_pagenavi( array( 'query' => $query ) );
			}
		?>
	</div>
	<?php
}
else
{
	echo "No Results Found";
}
?>

[Trevor]

Comparing the two forms is not easy, as you have dropdown selects in one and checkboxes in the other?

I DO see an issue with the infinite scroll that needs fixing, where it shows No Results at the bottom. This is a modified version of the standard infinite scroll results.php file to stop it from happening:

<?php
/**
 * Search & Filter Pro 
 *
 * Sample Results Template
 * 
 * @package   Search_Filter
 * @author    Ross Morsali
 * @link      http://www.designsandcode.com/
 * @copyright 2015 Designs & Code
 * 
 * Note: these templates are not full page templates, rather 
 * just an encaspulation of the your results loop which should
 * be inserted in to other pages by using a shortcode - think 
 * of it as a template part
 * 
 * This template is an absolute base example showing you what
 * you can do, for more customisation see the WordPress docs 
 * and using template tags - 
 * 
 * http://codex.wordpress.org/Template_Tags
 *
 */

if ( $query->have_posts() ) {
 ?>
 
 Found <?php echo $query->found_posts; ?> Results<br />
 <div class='search-filter-results-list'>
 <?php
  while ($query->have_posts())
  {
   $query->the_post();
   
   ?>
   <div class='search-filter-result-item'>
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    
    <p><br /><?php the_excerpt(); ?></p>
    <?php 
     if ( has_post_thumbnail() ) {
      echo '<p>';
      the_post_thumbnail("small");
      echo '</p>';
     }
    ?>
    <p><?php the_category(); ?></p>
    <p><?php the_tags(); ?></p>
    <p><small><?php the_date(); ?></small></p>
    
    <hr />
   </div>
   
   <?php
  }
 ?>
 </div>
<?php
} else {
 
 //figure out which type of "no results" message to show
 $message = "noresults"; 
 if(isset($query->query['paged'])) {  
  if($query->query['paged']>1){
   $message = "endofresults";
  }
 }
 
    if($message=="noresults") {
    ?>
 <div class='search-filter-results-list' data-search-filter-action='infinite-scroll-end'>
  <span>No Results Found</span>
 </div>
 <?php
    } else {
 ?>
 <div class='search-filter-results-list' data-search-filter-action='infinite-scroll-end'>
  <span>End of Results</span>
 </div>
 <?php
 }
}
?>

As for the styling, might you be able to show me an annotated (naming colors, font family, weight, size) screenshot of the frontend form and what needs changing? You would need to upload the screenshot image to a file sharing site (like the WordPress Cloudup site) and share the link for it with me?

[Trevor]

To modify the output of the results.php template file (I have done this for myself on projects, and even some using Avada), I have examined the output HTML on a sample page and reverse engineered that into a combination of HTML and PHP for a custom template. For Avada, it used to typically take 4-8 hours to do though.

An alternative solution (and what I now do if I am having to use Avada) is to use a plugin that works in a similar way to our shortcode method:

https://searchandfilter.com/documentation/3rd-party/post-grid/

In the Post Grid plugin, you determine the number of columns by using the post width setting.