Live Filter was built to help your visitors to find what they want quickly and easily.

Click here to see the demo of Live Filter.

To show filters in sidebar, please check this document.

To show filters on the left/right side, please check this document.

With Live Filter, you can show filters as:

• Checkbox
• Dropdown
• Radio button
• Buttons group
• Range slider (*)
• Date range (*)
• Text search

(*): These options are only available when showing custom field as filter.

II. How to use?

1. Show taxonomy (category, tag…) as filters

In Filter Settings tab, in Advance group:
+ select Taxonomy (Categories, Tags...) ,
+ select the taxonomy you want to show,
+ select the Show as filters to visitors checkbox:

2. Show custom field values as filters

In Filter Settings tab, in Advance group:
+ select Custom Fields , then click Add New button.
+ select custom field in “Field Key”, select type in “Value Type”
+ select Show as filters to visitors:

There are extra settings depend on the Type option which help you to customize the filter output.

For example, these are settings to display price of WooCommerce products in a range slider:

3. Show text search field

In Filter Settings tab, in Advance group, select Keyword, then select Show search field to visitors:

4. Show custom field as sort options

In Filter Settings tab, in Advance group:
+ select Sort by
+ click Add New button in Custom Fields group. New field will be added.
+ select custom field in “Field Key”, select type in “Value Type”, select Ascending/Descending in “Order”
+ select Show as sort option to visitors:

To show both ascending and descending options of a same custom field, please configure as below:
(the only difference is the value of the Order option)

5. Show options to sort by Title, Date, Comment

In Filter Settings tab, in Advance group:
+ select Sort by
+ in Live Filter group, select options that you want to show
+ customize the texts if you want

Here is the list of available options:

• Date (Oldest)
• Date (Newest)
• Title (A – Z)
• Title (Z – A)
• Comments count (asc)
• Comments count (desc)

We love to hear your questions and feedbacks. Please contact us here.

Thank you,

Best regards,

A. With Content Views Pro since 5.8.4

In the “Style Settings” tab, please select the checkbox Wrap live filters to a div,
then enter value for 2 text fields as below:

• HTML Class For View: col-md-8 col-sm-6
  (To show it wider, please use col-md-9 col-sm-6)
• Text field below the Live Filters checkbox: col-md-4 col-sm-6
  (To show it narrower, please use col-md-3 col-sm-6)

  To show filters on the right side, please use: col-md-4 col-sm-6 pull-right

To change the width of each side, please change the value col-md-8 and col-md-4 (the sum of numbers must be 12).

The col-sm-6 value helps to show filters on the side of result on Tablet devices.
To show filters above result on Tablet devices, please remove this value.

To show filters on the side of results on Mobile devices, please add col-xs-6 to both elements.

B. With Content Views Pro before 5.8.4

For older Content Views Pro version, you can show filters on the left side and result on the right side with this code:

Notice: when using this solution, the page will be reloaded when selecting or changing the filter option.

<div class="pt-cv-wrapper">
	<div class="row">
		<div class="col-md-4 col-sm-6">
			[pt_view id="VIEW_ID" show="filter"]
		</div>
		<div class="col-md-8 col-sm-6">
			[pt_view id="VIEW_ID" show="result"]
		</div>
	</div>
</div>

You can switch positions of shortcodes to show filters on the right side, result on the left side.
To change the width of each side, please change the col-md-4 and col-md-8 (the sum of numbers must be 12).

Best regards,

1. Show filters in one page, show result in another page (or show filters in sidebar, show results in a page)

• to show the filters only, please add this shortcode to where you want to show:

  [pt_view id="VIEW_ID" show="filter" submit_to="URL_OF_RESULT_PAGE"]
  

• to show the results only, please add this shortcode to the result page’s content editor:

  [pt_view id="VIEW_ID" show="result" submit_to="URL_OF_RESULT_PAGE"]
  

Please replace VIEW_ID with ID of your View,
replace URL_OF_RESULT_PAGE with URL of the result page.

The VIEW_ID to show filter and result must be the same. It is NOT possible to use 2 different Views.

Please add shortcode to the “Text” tab to ensure that shortcode is not modified unexpectedly:

By using this solution, the page will be reloaded when selecting or changing the filter option.

2. Show filters on left side, show result on right side of a page

Please check this document.

Best regards,

1. Please add the view to the page where you want to show it.
Visit the page, select the option that you want to set as default.
Copy the URL in browser’s address bar and use it as the link to the page.

2. Or there is another way.
Please add this code to Custom JS field in Content Views >> Settings page:

/* Live Filter - set default filter */
function cvp_lf_default_option(term_slug, view_id){
    if (!window.location.search) {
        var $el = $('[value="' + term_slug + '"]', '[data-sid="' + view_id + '"]');
        if ($el.length) {
        $el.attr("checked", true);
        $el.attr("selected", true);
        $el.trigger('change'); 
        // let event = new Event('change'); $el[0].dispatchEvent(event);
        }
    }
};
// duplicate the below line for another view, and change values respectively
cvp_lf_default_option('DEFAULT_VALUE', 'VIEW_ID');

then:

• replace DEFAULT_VALUE with the value you want to select by default.
  To find the right value, please follow these steps:
  + open the page with Live Filter
  + select the option that you want to select by default
  + the URL in browser’s address bar will be changed accordingly and end with:

  /?NAME=VALUE
  

  + copy the VALUE to replace the DEFAULT_VALUE in the code.

  For example, you show categories as filters and want to select the “Business” option by default.
  When you select that option, the URL ends with: /?tx_category=business
  Then you should use cvp_lf_default_option('business', 'VIEW_ID');

• replace VIEW_ID with ID of your View.

Best regards,

/*Live Filter – set default sort option*/
if (!window.location.search) {
    var viewid = 'VIEW_ID', default_sort = 'SORT_VALUE';
    if ($('[data-sid="' + viewid + '"] [name="_orderby"]').val() == '') {
        $('[data-sid="' + viewid + '"] [name="_orderby"]').val(default_sort).trigger('change');
    }
}

then:

• replace VIEW_ID with ID of your View
• replace SORT_VALUE with the sort option you want to set as default, it can be title, date, or custom field key (to get correct custom field key, select that field from the live filter, the URL will change to ?_orderby=FIELD_KEY, then copy the FIELD_KEY in URL).

Best regards,

window.cvp_lf_reload_url = false;

Best regards,

To resolve this issue, please add this code to Custom JS field in Content Views >> Settings page:

/* Live Filter force to reload page */
window.cvp_lf_reload_url = true;

The page will reload, and shortcodes will be available and executable in the results.

Extra:

If you want to scroll back to the same position after reload, please add this code to Custom JS field in Content Views >> Settings page:

/* Live Filter - scroll back to the same section after reload */
$("input, select",".cvp-live-filter").on("change",function(){setTimeout(function(t){(window.cvp_lf_reload_url||0===t.closest(".pt-cv-wrapper").find(".pt-cv-view").length)&&sessionStorage.setItem("cvp_offsettop_"+t.closest(".cvp-live-filter").data("sid"),$(this).scrollTop())},100,$(this))}),$(function(){if($("input, select",".cvp-live-filter").length>0){var t=$("input, select",".cvp-live-filter").first().closest(".cvp-live-filter").data("sid"),e=sessionStorage.getItem("cvp_offsettop_"+t);e&&$("html, body").animate({scrollTop:e},500),e&&sessionStorage.removeItem("cvp_offsettop_"+t)}});

Best regards,

To show filter vertically, please add this code to Custom CSS field (the left textarea) in Content Views >> Settings page:

/* Live Filter - show filters vertically */
.cvp-live-filter {display: block!important;}

Horizontally (next to each other)

To show filter horizontally, please add this code to Custom CSS field (the left textarea) in Content Views >> Settings page:

/* Live Filter - show filters horizontally */
.cvp-live-filter,.cvp-live-button{display:inline-block!important;vertical-align:bottom!important}

Best regards,

/* Live Filter - show checkboxes & radio buttons horizontally in rows, columns */
.cvp-live-filter, .cvp-live-filter label {
    display: block !important;
}

.cvp-live-filter .checkbox, .cvp-live-filter .radio {
    display: inline-block;
    width: 33%;
}

/* on mobile */
@media (max-width: 768px) {
    .cvp-live-filter .checkbox, .cvp-live-filter .radio {
        width: 50% !important;
    }
}

Please replace 33% by another value (for example: 25%) to change the number of columns.

Notice:

To use above styles for specific View only, please replace

.cvp-live-filter

with

.cvp-live-filter[data-sid="VIEW_ID"]

(replace VIEW_ID with ID of your View)

Best regards,