Impreza theme

This article explains how to replace the native search bar in the Impreza theme by UpSolution.

Replacing is based on editing the Impreza child theme. If you don’t have a child theme installed, install it now. If you’re not sure how to do it, contact Impreza theme authors – https://help.us-themes.com/ or read this article.

  • In the child theme, create the following file: templates/elements/search.php
  • Add there the following code:
<?php defined( 'ABSPATH' ) OR die( 'This script cannot be accessed directly.' );

/**
 * Output search element
 *
 * @var $text           string Placeholder Text
 * @var $layout         string Layout: 'simple' / 'modern' / 'fulwidth' / 'fullscreen'
 * @var $width          int Field width
 * @var $design_options array
 * @var $product_search bool Whether to search for WooCommerce products only
 * @var $classes        string
 * @var $id             string
 */

$classes = isset( $classes ) ? $classes : '';
$classes .= ( ! empty( $el_class ) ) ? ( ' ' . $el_class ) : '';
$classes .= ' layout_' . $layout;
$classes .= ( us_get_option( 'ripple_effect', FALSE ) ) ? ' with_ripple' : '';

$output = '<div class="w-search' . $classes . '">';
if ( $layout == 'fullscreen' ) {
	$output .= '<div class="w-search-background"></div>';
}
$output .= '<a class="w-search-open" href="javascript:void(0);" aria-label="' . us_translate( 'Search' ) . '">';
if ( ! empty( $icon ) ) {
	$output .= us_prepare_icon_tag( $icon );
}
$output .= '</a>';
$output .= '<div class="w-search-form">';
$output .= '<div class="w-form-row for_text">';
$output .= '<div class="w-form-row-field">';

$output .= do_shortcode('[wcas-search-form]');

$output .= '</div>';


$output .= '<a class="w-search-close" href="javascript:void(0);" aria-label="' . us_translate( 'Close' ) . '"></a>';
$output .= '</div></div></div>';

echo $output;

This integration supports every Impreza search layouts, including:

  • Simple
  • Modern
  • Full width
  • Full Screen