WooCommerce: Поиск по категориям на сайте ❎ WpCraft

Содержание

Задача. Сделать поиск товаров в WooCommerce по категориям. В поле поиска должен присутствовать выпадающий список из которого можно выбрать категорию в которой необходимо произвести поиск товара или выбрать поиск по всем категориям, как на Изображении №1.

Поиск по категориям на сайте с WooCommerce — Изображение №1. Поиск по категориям в Woocommerce

Решение 1

Решение 1. В файле product-searchform.php нужно заменить форму поиска формой из кода №1.1 и добавить стилистическое оформление для поля поиска в файл стилей из кода №1.2 или свой.

Алгоритм добавления поиска по категориям:

Если еще не скопирован, копируем файл формы поиска из папки плагина /site.ru/wp-content/plugins/woocommerce/templates/product-searchform.php в папку с темой /ваша_тема/woocommerce/product-searchform.php (для сохранения настроек при обновлении плагина).
Заменить форму поиска формой из кода №1.1.
Добавить стили из кода №1.2 (или свои) в файл стилей style.css.


<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>

<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);

<?php endif; ?>

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

</form>

Код №1.1: Форма поиска по категориям


#searchform select {
    border: none;
    border-right: 1px solid #eee;
    background: none;
    position: absolute;
    right: 0;
    top: 12px;
    border-left: 1px solid #787878;
}

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

#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;}

#searchform select {

border: none;

border-right: 1px solid #eee;

background: none;

position: absolute;

right: 0;

top: 12px;

border-left: 1px solid #787878;

}

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

#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;}

Код №1.2: Стили для формы

Поиск по категориям на тестовом сайте — Результат формы поиска по категориям на тестовом сайте

Решение 2

Решение 2. Аналогичное решение первому. Изменяем файл формы поиска и через хук в functions.php изменяем вывод товаров в зависимости от категории. Можно и не через файл формы поиска, а, например, вывести отдельным файлом, добавив на сайт через шорткод.

Как сделать свой шорткод в WordPress.

Алгоритм второго варианта добавления поиска по категориям:

Заменить форму поиска формой из кода №2.1 в /ваша_тема/woocommerce/product-searchform.php.
Изменить вывод товаров в зависимости от выбранной категории через хук pre_get_posts. Вставляем код №3 в файл functions.php.


<?php $dropdowncats = wp_dropdown_categories(
        'hide_empty=0&depth=1&selected='.$_GET['cat'].'&hierarchical=1&echo=0&taxonomy=product_cat&show_option_none=Все категории'
); ?>
<form id="searchform" role="search" class="search" method="get" action="<?php echo home_url( '/' ); ?>" >
    <input name="s" id="s" type="text" value="<?php echo get_search_query(); ?>" placeholder="введите запрос..."/>
    <input type="hidden" name="post_type" value="product" />
    <?php echo $dropdowncats; ?>
    <input type="submit" class="submit" name="submit" id="searchsubmit" value="Найти" />
</form>

<?php $dropdowncats = wp_dropdown_categories(

'hide_empty=0&depth=1&selected='.$_GET['cat'].'&hierarchical=1&echo=0&taxonomy=product_cat&show_option_none=Все категории'

); ?>

<input name="s" id="s" type="text" value="<?php echo get_search_query(); ?>" placeholder="введите запрос..."/>

<?php echo $dropdowncats; ?>

</form>

Код №3: Форма поиска по категориям


// Изменяем вывод товаров в зависимости от выбранной категории
add_action('pre_get_posts', 'search_by_cat');
function  search_by_cat() {
    global $wp_query;

    if (is_search()) {
        $cat =  intval($_GET['cat']);

        if($cat<0){
            $wp_query->query_vars['product_cat'] =  '';
        }else{
            $term = get_term_by('id',$cat,'product_cat');
            $wp_query->query_vars['cat'] = '';
            $wp_query->query_vars['product_cat'] =  $term->slug;
        }

    }
}

// Изменяем вывод товаров в зависимости от выбранной категории

add_action('pre_get_posts', 'search_by_cat');

function search_by_cat() {

global $wp_query;

if (is_search()) {

$cat = intval($_GET['cat']);

if($cat<0){

$wp_query->query_vars['product_cat'] = '';

}else{

$term = get_term_by('id',$cat,'product_cat');

$wp_query->query_vars['cat'] = '';

$wp_query->query_vars['product_cat'] = $term->slug;

}

Код №2.2: Вывод товаров в зависимости от выбранной категории в functions.php

Если изменить в строке taxonomy=product_cat& кода №2.1 product_cat на category, то вместо категорий товаров будут рубрики постов.

В строке Кода №2.2 'hide_empty=0&depth=1&selected=' depth=1 — это параметр вложенности категорий, т.е. при 1 в выпадающий список не попадают подкатегории. Если нужны и подкатегории нужно указать depth=2.

Важно! На большом проекте (более 30 тыс товаров), используя решения 1 и 2, очень долго обрабатывались запросы по поиску [на небольших сайтах было все нормально]. Решение нашлось для случая Решения №2, путем исключения из запроса типа поста post_type=product. Т.е. при использовании обоих кодов url после поиска будет примерно такой site.ru/?s=word_request&post_type=product&cat=63&submit=search. Исключаем post_type=product — в инпуте Кода №3 input type="hidden" name="post_type" value="product" убираем значения «product» и «post_type«, параметры остаются пустыми.

Решение 3: С указанием текущей категории по умолчанию

Решение 3. В примере Кода №3 на страницах категорий вформе будет по умолчанию установлена текущая страница категории. Делаем свой файл поиска и вставляем где нужно.


<?php
if ( ! defined( 'ABSPATH' ) ) {
  exit;
}

$current_cat = '';
if (is_tax('product_cat')) {	// Для страниц категорий
    $current_cat = get_queried_object()->term_id;
 
	$dropdowncats = wp_dropdown_categories(
			'hide_empty=0&depth=2&selected='.$current_cat.'&hierarchical=1&echo=0&taxonomy=product_cat&show_option_none=Все категории'
	); 
?>
	<div class="search-product-cat">
	<form id="searchform" role="search" class="search" method="get" action="<?php echo home_url( '/' ); ?>" >
		<input name="s" id="s" type="text" value="<?php echo get_search_query(); ?>" placeholder="введите запрос..."/>
		<input type="hidden" name="cat" value="<?php echo $current_cat; ?>" />
		<?php echo $dropdowncats; ?>
		<input type="submit" class="submit" name="submit" id="searchsubmit" value="Найти" />
	</form></div> 
<?php 
} else {
	$dropdowncats = wp_dropdown_categories(
			'hide_empty=0&depth=2&selected='.$_GET['cat'].'&hierarchical=1&echo=0&taxonomy=product_cat&show_option_none=Все категории'
	);
	?>
	<div class="search-product-cat">
	<form id="searchform" role="search" class="search" method="get" action="<?php echo home_url( '/' ); ?>" >
		<input name="s" id="s" type="text" value="<?php echo get_search_query(); ?>" placeholder="введите запрос..."/>
		<input type="hidden" name="" value="" />
		<?php echo $dropdowncats; ?>
		<input type="submit" class="submit" name="submit" id="searchsubmit" value="Найти" />
	</form></div>
<?php 
}

<?php

if ( ! defined( 'ABSPATH' ) ) {

exit;

}

$current_cat = '';

if (is_tax('product_cat')) { // Для страниц категорий

$current_cat = get_queried_object()->term_id;

$dropdowncats = wp_dropdown_categories(

'hide_empty=0&depth=2&selected='.$current_cat.'&hierarchical=1&echo=0&taxonomy=product_cat&show_option_none=Все категории'

);

<input name="s" id="s" type="text" value="<?php echo get_search_query(); ?>" placeholder="введите запрос..."/>

<?php echo $dropdowncats; ?>

</form></div>

<?php

} else {

$dropdowncats = wp_dropdown_categories(

'hide_empty=0&depth=2&selected='.$_GET['cat'].'&hierarchical=1&echo=0&taxonomy=product_cat&show_option_none=Все категории'

);

<input name="s" id="s" type="text" value="<?php echo get_search_query(); ?>" placeholder="введите запрос..."/>

<?php echo $dropdowncats; ?>

</form></div>

<?php

}

Код №3: Форма поиска товаров по текущей категории