Стандартный поиск WordPress ищет по всему сайту. Добавим в поисковую форму выбор категории сужающий сектор поиска.

Поиск по категориям WordPress

Для поиска по категория WP в строку запроса необходимо добавить параметр &cat=37 (37 — ID категории). Для этого нужно в форму поиска добавить select с выбором категории (вставлять лучше перед основным input).

<select name="cat" id="seacategory">
<option value="">все категории</option>

<?php $cats = get_categories('child_of=48','&hide_empty=1');
foreach ($cats as $cat) : ?>

<option value="<?php echo $cat->cat_ID; ?>"><?php echo $cat->cat_name; ?></option>

<?php endforeach; ?>
</select>

Если нужно выводить все категории убираем параметр — ‘child_of=48’,

Поиск по категориям товаров Woocommerce

Для реализации подобного функционала для поиска по категориям товаров woocommerce — используем такую форму:

<form method="get" id="searchform" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>" role="search">

	<?php if (class_exists('WooCommerce')) : ?>
	
		<?php
		if(isset($_REQUEST['product_cat']) && !empty($_REQUEST['product_cat']))	{
			$optsetlect=$_REQUEST['product_cat'];
		} else {
			$optsetlect=0;
		}
		
		$args = array(
			'show_option_all' => esc_html__( 'Все категории', 'woocommerce' ),
			'hierarchical' => 1,
			'depth' => 2,
			'class' => 'cat',
			'echo' => 1,
			'value_field' => 'slug',
			'selected' => $optsetlect
		);
		$args['taxonomy'] = 'product_cat';
		$args['name'] = 'product_cat';
		$args['class'] = 'cate-dropdown hidden-xs';
		
		wp_dropdown_categories($args);
		?>

		<input type="hidden" value="product" name="post_type">
	
	<?php endif; ?>

	<input type="text" name="s" class="" id="s2" value="<?php echo get_search_query(); ?>" placeholder="Поиск по товарам.." />

	<button type="submit" class="pic-sea" value=""><i class="fa fa-search"></i></button>

</form>

Стили формы

#searchform select {
    float: left;
    width: 30%;
    border: none;
    border-right: 1px solid #eee;
}

#searchform input {float: left; width: 60%;}

#searchform .pic-sea {
  padding: 8px 35px;
  border-radius: 0px 2px 2px 0px;
  border: none;
  float: left;
  width: 10%;
  background-color: #111;
  transition: background-color .3s ease;
  -webkit-transition: background-color 0.3s ease 0s;
  color: #fff;
  z-index: 76;
  cursor: pointer;
}

#searchform .pic-sea .fa {color: #fff !important; margin: 0 !important;}

#searchform .pic-sea:hover {background-color: #000;}

Поделиться в соц. сетях: