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

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

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

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

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

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

</p>
<p><form method=”get” id=”searchform” class=”searchform” action=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” role=”search”></p>
<p>	<?php if (class_exists(‘WooCommerce’)) : ?></p>
<p>		<?php<br />
		if(isset($_REQUEST[‘product_cat’]) && !empty($_REQUEST[‘product_cat’]))	{<br />
			$optsetlect=$_REQUEST[‘product_cat’];<br />
		} else {<br />
			$optsetlect=0;<br />
		}</p>
<p>		$args = array(<br />
			‘show_option_all’ => esc_html__( ‘Все категории’, ‘woocommerce’ ),<br />
			‘hierarchical’ => 1,<br />
			‘depth’ => 2,<br />
			‘class’ => ‘cat’,<br />
			‘echo’ => 1,<br />
			‘value_field’ => ‘slug’,<br />
			‘selected’ => $optsetlect<br />
		);<br />
		$args[‘taxonomy’] = ‘product_cat’;<br />
		$args[‘name’] = ‘product_cat’;<br />
		$args[‘class’] = ‘cate-dropdown hidden-xs’;</p>
<p>		wp_dropdown_categories($args);<br />
		?></p>
<p>		<input type=”hidden” value=”product” name=”post_type”></p>
<p>	<?php endif; ?></p>
<p>	<input type=”text” name=”s” class=”” id=”s2″ value=”<?php echo get_search_query(); ?>” placeholder=”Поиск по товарам..” /></p>
<p>	<button type=”submit” class=”pic-sea” value=””><i class=”fa fa-search”></i></button></p>
<p></form></p>
<p>

<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: Форма поиска по категориям

</p>
<p>#searchform select {<br />
    border: none;<br />
    border-right: 1px solid #eee;<br />
    background: none;<br />
    position: absolute;<br />
    right: 0;<br />
    top: 12px;<br />
    border-left: 1px solid #787878;<br />
}</p>
<p>#searchform input {float: left; width: 100%;}</p>
<p>#searchform .pic-sea {<br />
  padding: 8px 35px;<br />
  border-radius: 0px 2px 2px 0px;<br />
  border: none;<br />
  float: left;<br />
  width: 10%;<br />
  background-color: #111;<br />
  transition: background-color .3s ease;<br />
  -webkit-transition: background-color 0.3s ease 0s;<br />
  color: #fff;<br />
  z-index: 76;<br />
  cursor: pointer;<br />
}</p>
<p>#searchform .pic-sea .fa {color: #fff !important; margin: 0 !important;}</p>
<p>#searchform .pic-sea:hover {background-color: #000;}</p>
<p>

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

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

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

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

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

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

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

<?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: Форма поиска по категориям

</p>
<p>// Изменяем вывод товаров в зависимости от выбранной категории<br />
add_action(‘pre_get_posts’, ‘search_by_cat’);<br />
function  search_by_cat() {<br />
    global $wp_query;</p>
<p>    if (is_search()) {<br />
        $cat =  intval($_GET[‘cat’]);</p>
<p>        if($cat<0){<br />
            $wp_query->query_vars[‘product_cat’] =  ”;<br />
        }else{<br />
            $term = get_term_by(‘id’,$cat,’product_cat’);<br />
            $wp_query->query_vars[‘cat’] = ”;<br />
            $wp_query->query_vars[‘product_cat’] =  $term->slug;<br />
        }</p>
<p>    }<br />
}</p>
<p>

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

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;

}

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

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

В строке Кода №4 '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«, параметры остаются пустыми.

Понравилась статья?

Похожие публикации