Фильтрация по диапазону цены

Добавим в плагин Search and Filter фильтрацию по цене с настройками:

Подключим библиотеку touch-punch и отрисуем регулятор цены на фильтре.

В хеад разместим строку

<link rel="stylesheet" href="/wp-content/themes/zotstore/assets/css/jquery-ui.css">	

В фильтре разместим ползунок

<div class="container-cat-lp__filter">
	<p style="font-weight: 600">Цена: <span id="result-polzunok"></span></p>
	<div id="polzunok"></div>
	<? echo do_shortcode( '[searchandfilter id="40"]' ); ?>
</div>

В футер добавим скрипты

<!--СКРИПТ ПО ВЫЧЕСЛЕНИЮ МИНИМАЛЬНОЙ И МКСИМАЛЬНОЙ ЦЕНЫ НА СТРАНИЦЕ ПРИ ПЕРВОЙ ЗАГРУЗКЕ-->
<script src="/wp-content/themes/zotstore/assets/js/jquery-ui.min.js"></script>
<script src="/wp-content/themes/zotstore/assets/js/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript">
$(window).on("load", function() {
	console.log ('Скрипт после загрузки страницы по вычислению мин и макс цены на странице');
	var valueprice = [];
  	$('li.sf-field-post-meta-_price').find(':input').each(function(i, input) {
    valueprice.push($(input).val());
  	});
  	console.log(valueprice);
	var minvalueprice = Math.min.apply( null, valueprice );
	var maxvalueprice = Math.max.apply( null, valueprice );
	console.log(minvalueprice);
	console.log(maxvalueprice);
	$("#polzunok").slider({
        animate: "slow",
        range: true,
		min: minvalueprice,
		max: maxvalueprice,
		step: 10,
        values: [ minvalueprice, maxvalueprice ],
        slide : function(event, ui) {    
            $("#result-polzunok").text( "от " + ui.values[ 0 ] + " до " + ui.values[ 1 ] );        
        }
    });
	 $( "#result-polzunok" ).text("от " + $("#polzunok").slider("values", 0) + " до " + $("#polzunok").slider("values", 1));	
});
</script>

<!--СКРИПТ ВЫДАЕТ ПОДСКАЗКИ ПРИ ПЕРЕМЕЩЕНИИ ПОЛЗУНКОВ-->
<script>
$("#polzunok").slider({
    change: function( event, ui ) {
	var values = $("#polzunok").slider( "values" );
	var valuesmin = values[0];
	var valuesmax = values[1];
	console.log (valuesmin,valuesmax);	
	}
});
</script>

<!--СКРИПТ СРАБАТЫВАЕТ ПРИ ПРЕКРАЩЕНИИ ПЕРЕМЕЩЕНИЯ ПОЛЗУНКОВ-->
<script>
$("#polzunok").slider({
    stop: function( event, ui ) {
	var values = $("#polzunok").slider( "values" );
	var valuesmin = values[0];
	var valuesmax = values[1];
	console.log (valuesmin,valuesmax);	
		
	$('li.sf-field-post-meta-_price').find(':input').each(function(i, input) {
	if ($(this).val() >= valuesmin && $(this).val() <= valuesmax) {
    console.log ($(this).val());
	$(this).prop('checked', true);
	}
	else {
	$(this).prop('checked', false);	
	};
  	});	
	//$('input[type="submit"]').css("color","green");
	//$('input[type="submit"]').trigger( "click" );
	}
});
</script>

<!--СКРИПТ СРАБАТЫВАЕТ ПРИ НАВЕДЕНИИ НА КНОПКУ ФИЛЬТРА-->
<script>
$("li.sf-field-submit").hover(function() {
	console.log ('asd');
	var values = $("#polzunok").slider( "values" );
	var valuesmin = values[0];
	var valuesmax = values[1];
	console.log (valuesmin,valuesmax);	
		
	$('li.sf-field-post-meta-_price').find(':input').each(function(i, input) {
	if ($(this).val() >= valuesmin && $(this).val() <= valuesmax) {
    console.log ($(this).val());
	$(this).prop('checked', true);
	}
	else {
	$(this).prop('checked', false);	
	};
  	});	
});
</script>

Добавляем сортировку по цене и выносим ее за пределы фильтра

Добавляем в наш фильтр сортировку по цене.

Добавим код сортировки в нашу разметку.

HTML

<div class="container-cat-rc-002">
	<div class="container-cat-rc-002-content">
		<div class="container-cat-rc-002__filter">
			<p class="container-cat-rc-002__filter-text">Сортировать по: </p>
			<div class="container-cat-rc-002__filter-radio">
				<div class="container-cat-rc-002__filter-radio-itm">
				<input class="sf-input-radio" id="priceup" type="radio" name="radio" value="1" checked="checked">
				<label class="sf-label-radio" for="priceup">по возрастанию цены</label>
				</div>
				<div class="container-cat-rc-002__filter-radio-itm">
				<input class="sf-input-radio" id="pricedown" type="radio" name="radio" value="2">
				<label class="sf-label-radio" for="pricedown">по убыванию цены</label>
				</div>
			</div>
		</div>
	</div>
</div>

Напишем для него скрипт.

JQuery

<script>
$('#priceup').click(function(){
	//$('input[name="_sf_sort_order[]"][value="_sfm__price+asc+num"]').prop('checked', true);
	$('input[name="_sf_sort_order[]"][value="_sfm__price+asc+num"]').trigger('click');
	$('li.sf-field-submit input').trigger('click');
});
	
$('#pricedown').click(function(){
	//$('input[name="_sf_sort_order[]"][value="_sfm__price+asc+num"]').prop('checked', true);
	$('input[name="_sf_sort_order[]"][value="_sfm__price+desc+num"]').trigger('click');
	$('li.sf-field-submit input').trigger('click');
});
</script>

Стили для фильтра общего.

CSS

/*СТИЛИ ДЛЯ ФИЛЬТРА*/
.container-cat-lp__filter ul {
	padding: 0;}
.container-cat-lp__filter li.sf-field-taxonomy-product_cat {
	display: none;}
.container-cat-lp__filter li.sf-field-post-meta-_price {
	display: none;}
.container-cat-lp__filter li.sf-field-sort_order {
	display: none;}
.container-cat-lp__filter li.sf-field-submit {
	padding: 10px 0 0 0;
    display: flex;
    justify-content: center;}
.container-cat-lp__filter li.sf-field-submit input {
	border: none;
    text-decoration: none;
    margin: 0;
    width: 210px;
    height: 40px;
    border-radius: 10px;
    background-color: #ffd33f;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Alaskan;
    font-size: 18px;
    line-height: 1;
    color: #000000;
    transition: 0.5s;}
.container-cat-lp__filter li.sf-field-submit input:hover {
    background-color: #000000;
    color: #ffd33f;
    transition: 0.5s;}

Стили для отдельной сортировки.

CSS

.container-cat-rc-002 {}
.container-cat-rc-002-content {
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 0px 20px 0px;}
.container-cat-rc-002__filter {
    width: 100%;
    border: 1px solid #d1d1d1;
    padding: 13px;
    border-radius: 10px;
    display: flex;
    align-items: center;}
.container-cat-rc-002__filter p.container-cat-rc-002__filter-text {
    margin: 0;
    font-family: Verdana;
    font-size: 17px;
    line-height: 1.3;
    color: #000000;}
.container-cat-rc-002__filter-radio {
	margin: 0 0 0 10px;}
.container-cat-rc-002__filter-radio-itm {
	position: relative;}
.container-cat-rc-002__filter-radio-itm label.sf-label-radio {
	margin: 0 0 0 7px;}
.container-cat-rc-002__filter-radio-itm input.sf-input-radio ~ label::before {
    position: absolute;
    left: -4px;
    top: 0;
    content: '';
    text-align: center;
    color: #ffffff;
    line-height: 1em;
    width: 17px;
    height: 17px;
    background-color: #ffffff;
    border: 2px solid #000000;
    border-radius: 50%;
    margin: 0.25em;
    display: inline-block;}
.container-cat-rc-002__filter-radio-itm input.sf-input-radio:checked ~ label::before {
    border: 2px solid #000000;
    background-color: #ffd33f;}