Live Filter – show the filters and result in different places (for example: filters in sidebar, result in page)

Normally, Live filters will show above the result.
Since Content Views Pro 4.9.0 and Content Views 1.9.9.4, you can show the filters and the result in different places.

1. Show filters in Sidebar, show result in a page

  • to show the filters in Sidebar, please add this shortcode to a Text widget in Sidebar:

    [pt_view id="VIEW_ID" show="filter" submit_to="URL_OF_RESULT_PAGE"]
    
  • to show the result in a page, please add this shortcode to the 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 there.

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

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

There are 2 ways to do it:

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 fields as below:

To show the filters on the right side, please use this value for the text field below “Live Filter”: col-md-4 col-sm-6 pull-right

The col-sm-6 value helps to show filters and result on 2 sides on mobile devices. To show filters above result on mobile devices, please remove this value.

B. With Content Views Pro before 5.8.4

If your theme has no Sidebar for a page, you can show filters in the left side, show result in the right side of a page with this code:

<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 in the right side, show result in 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 equal to 12.

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

Best regards,