Electro theme

This article explains how to replace the native search bar in the Electro theme by MadrasThemes.

Replacing is based on editing the Electro child theme. Make sure you have installed the Electro child theme. If not, install it.

1. Replacing desktop search bar

#1 In the child theme create the following file:

templates/sections/navbar-search.php

#2 Add there the following code:

<?php
/**
 * Search Bar
 *
 * @author  Transvelo
 * @package Electro/Templates
 *
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

if( is_rtl() ) {
    $dir_value = 'rtl';
} else {
    $dir_value = 'ltr';
}

$navbar_search_text 		 = apply_filters( 'electro_navbar_search_placeholder', esc_html__( 'Search for products', 'electro' ) );
$navbar_search_dropdown_text = apply_filters( 'electro_navbar_search_dropdown_text', esc_html__( 'All Categories', 'electro' ) );
?>

<?php if( is_woocommerce_activated() ) : ?>
    <div class="navbar-search">
        <div class="input-group">
            <?php echo do_shortcode('[wcas-search-form]'); ?>
        </div>
    </div>
<?php else : ?>
    <form class="navbar-search" method="get" action="<?php echo esc_url( home_url( '/'  ) ); ?>" autocomplete="off">
        <div class="input-group">
            <label class="sr-only screen-reader-text" for="search"><?php echo esc_html__( 'Search for:', 'electro' );?></label>
            <input type="text" id="search" class="search-field form-control" dir="<?php echo esc_attr( $dir_value ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" name="s" placeholder="<?php echo esc_attr( esc_html__( 'Search', 'electro' ) ); ?>" autocomplete="off" />
            <div class="input-group-btn">
                <button type="submit" class="btn btn-secondary"><i class="ec ec-search"></i></button>
            </div>
        </div>
        <?php do_action( 'wpml_add_language_form_field' ); ?>
    </form>
<?php endif; ?>

2. Replacing mobile search bar

#1 Open functions.php file in the child theme and add there following code:

if ( ! function_exists( 'electro_product_search' ) ) {
    /**
     * Ovverride Display Product Search
     *
     * @uses  is_woocommerce_activated() check if WooCommerce is activated
     * @return void
     */
    function electro_product_search() {
        if ( function_exists( 'is_woocommerce_activated' ) && is_woocommerce_activated() ) { ?>
            <div class="site-search">
                <?php echo do_shortcode('[wcas-search-form]'); ?>
            </div>
            <?php
        }
    }
}