Docs

[tahaabbasi]

Hi,

I am using ICON stack on https://www.outfit.cafe/

I wanted to limit searches on the website to only WooCommerce product search. If you click on the search icon on the top right of the website and search for lets say “Shirt”. It brings up this page:

https://www.outfit.cafe/?s=shirt

This is of course not the woocommerce search results archive page. However, if you search in the sidebar for shirts. It brings up a different URL where it adds the post_type=product argument to the URL.

https://www.outfit.cafe/?s=shirt&post_type=product

Now I can try to use only the sidebar search, but I really like the design of the icon modal search that comes up when you click the icon.

Can you help me with the following:

1. How can I add post_type=product to the search url when searching from the nav bar icon
2. How can I add the modal search functionality to search in other areas of the website.

I am familiar with PHP and child themes, and so far I have attempted to do this with pre_get_posts and query->set. As well as with add_query_arg(), but it has not worked.

I’ve tried the following code in my child themes function.php

add_action( 'pre_get_posts', 'foo_modify_query_exclude_category' );
function foo_modify_query_exclude_category( $query ) {
    if ( ! is_admin() && $query->is_main_query() && $query->get( 's' ) )
        $query->set( 'post_type', 'product' );
}

add_action( 'pre_get_posts', 'foo_modify_query_exclude_category' );
function foo_modify_query_exclude_category( $query ) {
    if ( ! is_admin() && $query->is_main_query() )
    	// 's' is neccessary for a search query, so only continue if it's available
		if(isset($args['s']))
		{
		    add_query_arg( 'post_type', 'product' );
		}

}

[Rahul]

Hi,

Thanks for writing in!

Can you try adding the code below in your child theme’s functions.php

add_filter( ‘pre_get_posts’, ‘custom_search’ );
function custom_search( $query ) {
if ( $query->is_search ) {
$query->set( ‘post_type’, array( ‘post’,’page’,’x-portfolio’,’product’ ) );
}
return $query;
}
In case you have not set-up a child theme yet, youcan follow this guide.

How to Setup Child Themes

Hope that helps. 🙂

[Rahul]

Hi There,

Please follow the link to trigger modal search
https://community.theme.co/forums/topic/code-to-trigger-the-search-modal/

Thanks

[tahaabbasi]

Hi Rahul,

I tried the code for custom_search. I did not get the result I’m looking for. You see if I search for art, I see this url:

https://www.outfit.cafe/?s=art

Try going to that link and see what the page looks like.

Instead I want to see this url

https://www.outfit.cafe/?s=art&post_type=product

This page looks much better. And notice that if you search for art in the sidebar, it adds the &post_type=product to the url bar, but the navbar search does not.

I’ve tried the following as well, but it’s not working:

// Testing Query Modification
add_filter( ‘pre_get_posts’, ‘custom_search’ );
function custom_search( $query ) {
	if ( $query->is_search ) {
		$query->set( ‘post_type’, array( ‘post’,’page’,’x-portfolio’,’product’ ) );
		add_query_arg( 'post_type', 'product' );
	}
	return $query;
}

Any suggestions?

[tahaabbasi]

Ok I believe I’ve figured it out.

I was reviewing the woocommer search and it turns out they simply added a hidden input field with a name=”post_type” and value=”product” See here (line 28): https://github.com/woothemes/woocommerce/blob/master/templates/product-searchform.php

So now I am trying to find the where the code for the search icon is generated in the php files. I thought it would be in _nav_primary.php located here:
themes/x/framework/views/global

but it’s not, because the function: x_output_primary_navigation(); is being called. Any clue where I can find the details for this function?

[tahaabbasi]

Ok solved in case this helps anyone else. Also Themco team please review the below and let me know if I there is a more effective way of doing this, like a specific hook or something.

So I found the code for the search icon in the nave bar located in the navbar.php file located here:
x/framework/functions/global

I took that code and added it to my child themes function.php file and added the following line to it:
<input type=”hidden” name=”post_type” value=”product” />

So now my code in my child themes function.php looks like this:

// Navbar Custom Searchform Popup
// =============================================================================

if ( ! function_exists( 'x_navbar_searchform_overlay' ) ) :
  function x_navbar_searchform_overlay() {

    if ( x_get_option( 'x_header_search_enable' ) == '1' ) :

      ?>

      <div class="x-searchform-overlay">
        <div class="x-searchform-overlay-inner">
          <div class="x-container max width">
            <form method="get" id="searchform" class="form-search center-text" action="<?php echo esc_url( home_url( '/' ) ); ?>">
              <label for="s" class="cfc-h-tx tt-upper"><?php _e( 'Type and Press &ldquo;enter&rdquo; to Search', '__x__' ); ?></label>
              <input type="text" id="s" class="search-query cfc-h-tx center-text tt-upper" name="s">
              <input type="hidden" name="post_type" value="product" />
            </form>
          </div>
        </div>
      </div>

      <?php

    endif;

  }
  add_action( 'x_before_site_end', 'x_navbar_searchform_overlay' );
endif;

and that does the trick. 🙂

[Rue Nel]

Hello There,

Just for future topics, self responding or bumping your post pushes it back in our Queue system so it takes longer to respond to.

We are just glad that you have figured it out a way to correct the said issue. Thanks for letting us know!

Best Regards.

[Author]

Posts