Hello, i want to search box instead of search icon

[banarasikart]

Hello, How i can replace search icon to search box. i am using header 3 style.

My website is https://www.banarasikart.com

[Harry]

Hi,

Thank you for choose our theme.

Please follow this topic http://support.janstudio.net/forums/topic/ajax-search-plugins/

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[banarasikart]

Hi, i installed but in mobile view search box cover logo ?

see in pic

[Harry]

Hi,

Don’t replace code on line 118 – 120, i recommend on mobile still keep icon. when user click it open a popup.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[banarasikart]

i didn’t replace 118-120 line code. only i change 61 line & 100 line code.

can you send full edited code for me ?

[Harry]

Can you send me your site login credentials? I need to check and help you solve.

Thanks

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[banarasikart]

This reply has been marked as private.

[Harry]

Hi,

I see you implement on header layout 4.

I recommend use child theme to override parent.

I help you did code on header layout 3, if you want implement for header layout 4. please copy layout-4.php in claue > views > header to claue-child > views > header

and change

1. code on line 61-63 from

<?php if ( cs_get_option( 'header-search-icon' ) ) : ?>
	<a class="sf-open cb chp hidden-xs" href="javascript:void(0);"  title="<?php echo esc_html__( 'Search', 'claue' ); ?>"><i class="pe-7s-search"></i></a>
<?php endif; ?>

to

<div class="hidden-xs">
	<?php echo do_shortcode ('[wcas-search-form]') ?>
</div>
<?php if ( cs_get_option( 'header-search-icon' ) ) : ?>
	<a class="sf-open cb chp hide-md" href="javascript:void(0);"  title="<?php echo esc_html__( 'Search', 'claue' ); ?>"><i class="pe-7s-search"></i></a>
<?php endif; ?>

2. Code from line 101-107 from

<form class="header__search w__100 dn pf" role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>" <?php jas_claue_schema_metadata( array( 'context' => 'search_form' ) ); ?>>
	<div class="pa">
		<input class="w__100 jas-ajax-search" type="text" name="s" placeholder="<?php echo esc_html__( 'Search for...', 'claue' ); ?>" />
		<input type="hidden" name="post_type" value="product">
	</div>
	<a id="sf-close" class="pa" href="#"><i class="pe-7s-close"></i></a>
</form><!-- #header__search -->

to

<div class="header__search w__100 dn pf">
	<div class="pa">
		<?php echo do_shortcode ('[wcas-search-form]') ?>
	</div>
	<a id="sf-close" class="pa" href="#"><i class="pe-7s-close"></i></a>
</div><!-- #header__search -->

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[banarasikart]

This reply has been marked as private.

[banarasikart]

also one query about page speed very down. in GT Metrix its score is 0 out of 100

see in pic

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

1. Please add below code to Claue > theme option > general layout > custom CSS

@media screen and (max-width: 1024px) and (min-width: 737px)
.dgwt-wcas-search-wrapp {
	max-width: 240px !important;
	min-width: 150px !important;
}
.jas-action .sf-open {
display: none;
}}

2. The search result page not pound because it conflict with plugin Woo Search Box, i deactivate this plugin it now ok.

3. Please go to Appearance > Customize > WooCommerce > Product Images > Thumbnail Width and change 570 to 270

and using this plugin https://wordpress.org/plugins/wp-smushit/ to optimize image

It now your images very big, please crop to correct dimension http://prntscr.com/o9a985 and optimize at https://tinypng.com/ before upload to your site

And please use plugin Autoptimize to minify JS and minify CSS https://wordpress.org/plugins/autoptimize/

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[banarasikart]

hello sir,

1. This code not working for tablet view –  @media screen and (max-width: 1024px) and (min-width: 737px) .dgwt-wcas-search-wrapp { max-width: 240px !important; min-width: 150px !important; } .jas-action .sf-open { display: none; }}
2.  Now Search icon and search box both removed in mobile view, atleast one present in mobile view.

[Harry]

Sorry, please change code to

@media screen and (max-width: 1024px) and (min-width: 737px){
.dgwt-wcas-search-wrapp {
	max-width: 240px !important;
	min-width: 150px !important;
}
.jas-action .sf-open {
display: none;
}}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts