{"id":1730,"date":"2017-06-28T11:17:57","date_gmt":"2017-06-28T11:17:57","guid":{"rendered":"http:\/\/docs.contentviewspro.com\/?p=1730"},"modified":"2024-02-29T09:17:00","modified_gmt":"2024-02-29T09:17:00","password":"","slug":"live-filter-introduction","status":"publish","type":"docs","link":"https:\/\/contentviewspro.com\/documentation\/article\/live-filter-introduction\/","title":{"rendered":"Live Filter Introduction"},"content":{"rendered":"<h2>I. Introduction<\/h2>\n<p>Live Filter was built to help your visitors to find what they want quickly and easily.<\/p>\n<blockquote><p><a href=\"https:\/\/contentviewspro.com\/demo\/faceted-search-live-filter\/\" target=\"_blank\" rel=\"noopener noreferrer\">Click here to see the demo of Live Filter<\/a>.<\/p><\/blockquote>\n<blockquote><p>To show filters in sidebar, <a href=\"https:\/\/contentviewspro.com\/documentation\/article\/live-filter-on-sidebar-or-on-side-of-posts\/\">please check this document<\/a>.<\/p><\/blockquote>\n<blockquote><p>To show filters on the left\/right side, <a href=\"https:\/\/contentviewspro.com\/documentation\/article\/live-filter-show-filters-on-the-left-side-of-result\/\">please check this document<\/a>.<\/p><\/blockquote>\n<p>With Live Filter, you can show filters as:<\/p>\n<ul>\n<li>Checkbox<\/li>\n<li>Dropdown<\/li>\n<li>Radio button<\/li>\n<li>Buttons group<\/li>\n<li>Range slider (*)<\/li>\n<li>Date range (*)<\/li>\n<li>Text search<\/li>\n<\/ul>\n<p>(*): These options are only available when showing custom field as filter.<\/p>\n<h2 id=\"howto\">II. How to use?<\/h2>\n<h3 id=\"taxonomy\">1. Show taxonomy (category, tag&#8230;) as filters<\/h3>\n<p>In <strong>Filter Settings<\/strong> tab, in <strong>Advance<\/strong> group:<br \/>\n+ select <code>Taxonomy (Categories, Tags...)<\/code> ,<br \/>\n+ select the taxonomy you want to show,<br \/>\n+ select the <code>Show as filters to visitors<\/code> checkbox:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-5807 size-full\" src=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2017\/06\/live-filter-taxonomy-new.png\" alt=\"\" width=\"990\" height=\"531\" srcset=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2017\/06\/live-filter-taxonomy-new.png 990w, https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2017\/06\/live-filter-taxonomy-new-300x161.png 300w, https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2017\/06\/live-filter-taxonomy-new-768x412.png 768w\" sizes=\"auto, (max-width: 990px) 100vw, 990px\" \/><\/p>\n<h3 id=\"customfield\">2. Show custom field values as filters<\/h3>\n<p>In <strong>Filter Settings<\/strong> tab, in <strong>Advance<\/strong> group:<br \/>\n+ select <code>Custom Fields<\/code> , then click <code>Add New<\/code> button.<br \/>\n+ select custom field in &#8220;Field Key&#8221;, select type in &#8220;Value Type&#8221;<br \/>\n+ select <code>Show as filters to visitors<\/code>:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-5808 size-full\" src=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2017\/06\/live-filter-custom-field.png\" alt=\"\" width=\"887\" height=\"510\" srcset=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2017\/06\/live-filter-custom-field.png 887w, https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2017\/06\/live-filter-custom-field-300x172.png 300w, https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2017\/06\/live-filter-custom-field-768x442.png 768w\" sizes=\"auto, (max-width: 887px) 100vw, 887px\" \/><\/p>\n<p>There are extra settings depend on the Type option which help you to customize the filter output.<\/p>\n<p>For example, these are settings to display price of WooCommerce products in a range slider:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3507\" src=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2017\/06\/Content-Views-Pro-live-filter-for-WooCommerce-price.png\" alt=\"Content Views Pro - live filter for WooCommerce price\" width=\"601\" height=\"381\" srcset=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2017\/06\/Content-Views-Pro-live-filter-for-WooCommerce-price.png 601w, https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2017\/06\/Content-Views-Pro-live-filter-for-WooCommerce-price-300x190.png 300w\" sizes=\"auto, (max-width: 601px) 100vw, 601px\" \/><\/p>\n<h3 id=\"textsearch\">3. Show text search field<\/h3>\n<p>In <strong>Filter Settings<\/strong> tab, in <strong>Advance<\/strong> group, select <code>Keyword<\/code>, then select <code>Show search field to visitors<\/code>:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12354\" src=\"https:\/\/www.contentviewspro.com\/wp-content\/uploads\/2017\/06\/Faceted-search-search-box.png\" alt=\"Faceted search - search box\" width=\"659\" height=\"327\" \/><\/p>\n<h3 id=\"sortby\">4. Show custom field as sort options<\/h3>\n<p>In <strong>Filter Settings<\/strong> tab, in <strong>Advance<\/strong> group:<br \/>\n+ select <code>Sort by<\/code><br \/>\n+ click <code>Add New<\/code> button in <code>Custom Fields<\/code> group. New field will be added.<br \/>\n+ select custom field in &#8220;Field Key&#8221;, select type in &#8220;Value Type&#8221;, select Ascending\/Descending in &#8220;Order&#8221;<br \/>\n+ select <code>Show as sort option to visitors<\/code>:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5814\" src=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2017\/06\/live-filter-sort-new.png\" alt=\"\" width=\"905\" height=\"441\" srcset=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2017\/06\/live-filter-sort-new.png 905w, https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2017\/06\/live-filter-sort-new-300x146.png 300w, https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2017\/06\/live-filter-sort-new-768x374.png 768w\" sizes=\"auto, (max-width: 905px) 100vw, 905px\" \/><\/p>\n<p>To show both ascending and descending options of a same custom field, please configure as below:<br \/>\n(the only difference is the value of the <strong>Order<\/strong> option)<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3065\" src=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2017\/06\/Live-Filter-sort.png\" alt=\"Live Filter - sort custom field\" width=\"579\" height=\"591\" srcset=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2017\/06\/Live-Filter-sort.png 579w, https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2017\/06\/Live-Filter-sort-294x300.png 294w\" sizes=\"auto, (max-width: 579px) 100vw, 579px\" \/><\/p>\n<h3 id=\"sortbytitle\">5. Show options to sort by Title, Date, Comment<\/h3>\n<p>In <strong>Filter Settings<\/strong> tab, in <strong>Advance<\/strong> group:<br \/>\n+ select <code>Sort by<\/code><br \/>\n+ in <code>Live Filter<\/code> group, select options that you want to show<br \/>\n+ customize the texts if you want<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5816\" src=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2017\/06\/live-filter-sort-common.png\" alt=\"\" width=\"1042\" height=\"559\" srcset=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2017\/06\/live-filter-sort-common.png 1042w, https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2017\/06\/live-filter-sort-common-300x161.png 300w, https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2017\/06\/live-filter-sort-common-1024x549.png 1024w, https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2017\/06\/live-filter-sort-common-768x412.png 768w\" sizes=\"auto, (max-width: 1042px) 100vw, 1042px\" \/><\/p>\n<p>Here is the list of available options:<\/p>\n<ul>\n<li>Date (Oldest)<\/li>\n<li>Date (Newest)<\/li>\n<li>Title (A &#8211; Z)<\/li>\n<li>Title (Z &#8211; A)<\/li>\n<li>Comments count (asc)<\/li>\n<li>Comments count (desc)<\/li>\n<\/ul>\n<hr \/>\n<p>We love to hear your questions and feedbacks. Please <a href=\"https:\/\/www.contentviewspro.com\/contact\/\">contact us here<\/a>.<\/p>\n<p>Thank you,<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I. Introduction 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: &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/contentviewspro.com\/documentation\/article\/live-filter-introduction\/\"> <span class=\"screen-reader-text\">Live Filter Introduction<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"doc_category":[46],"doc_tag":[35],"class_list":["post-1730","docs","type-docs","status-publish","hentry","doc_category-live-filter","doc_tag-live-filter"],"year_month":"2026-09","word_count":357,"total_views":"8","reactions":{"happy":"0","normal":"1","sad":"0"},"author_info":{"name":"admin1","author_nicename":"admin1","author_url":"https:\/\/contentviewspro.com\/documentation\/author\/admin1\/"},"doc_category_info":[{"term_name":"Live Filter (Frontend Search &amp; Filter)","term_url":"https:\/\/contentviewspro.com\/documentation\/cats\/live-filter\/"}],"doc_tag_info":[{"term_name":"live filter","term_url":"https:\/\/contentviewspro.com\/documentation\/tags\/live-filter\/"}],"_links":{"self":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs\/1730","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/comments?post=1730"}],"version-history":[{"count":15,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs\/1730\/revisions"}],"predecessor-version":[{"id":5821,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs\/1730\/revisions\/5821"}],"wp:attachment":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/media?parent=1730"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/doc_category?post=1730"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/doc_tag?post=1730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}