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. Make sure you have installed the Impreza child theme. If not, install it.

Replacing is based on editing the the Impreza child theme theme. Make sure you have installed the Impreza child theme. If not, install it now. If you’re not sure how to install or activate the Impreza child theme, 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