Replace Default Search with Advanced Woo Search in Salient Theme

Problem solved. I missed the “Seamless integration”option which works perfectly fine. Thank you!

After activating the Placeholder “Seamless integration”, the search works great. However, only in the theme search, the placeholder does not disappear when input field in focus. Is it possible to fix it? Thank you.

Please try to use following custom css:

#search-box input:focus::placeholder {
  color: transparent !important;
}

Thank you ILLID for the replay. However, it doesn’t do any change. Cheers!

So you need this for header search form. Correct?

Please tell me – how do you add this custom css on your page? For now I don’t see it there. Perhaps you have some caching/assets optimization plugins and you need to rebuild them.

Yes, I need this for header search form only.

I’ve added the code through the WP > Appearance > Customise > Additional CSS. Also through the theme custom CSS. Thanks

I just checked it on my local site and for me that custom css worked as expected. Strange that these styles are not working for you.

Anyway you can use this code instead:

add_action( 'wp_enqueue_scripts', 'aws_wp_enqueue_scripts', 999 );
function aws_wp_enqueue_scripts() {
    $script = "
        jQuery(document).on( 'focus', '#search-box input', function() {
            jQuery('#search-box input').data('holder', jQuery('#search-box input').attr('placeholder'));
            jQuery(this).attr('placeholder', '');
        } );
        jQuery(document).on( 'focusout', '#search-box input', function() {
            jQuery(this).attr('placeholder', jQuery(this).data('holder'));
        } );
    ";
    wp_add_inline_script( 'aws-script', $script);
    wp_add_inline_script( 'aws-pro-script', $script);
}

Please place it inside your theme functions.php file.

Regards

Yes indeed, it’s strange. I just added the code and it works great Thank you for the fix and your time!