{"id":29952,"date":"2022-09-22T16:45:15","date_gmt":"2022-09-22T16:45:15","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=tips-and-tricks&p=29952"},"modified":"2024-03-12T08:33:08","modified_gmt":"2024-03-12T08:33:08","slug":"jetsmartfilters-hiding-listing-grid-before-filtering","status":"publish","type":"tips-and-tricks","link":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/jetsmartfilters-hiding-listing-grid-before-filtering\/","title":{"rendered":"Hiding Listing Before Filtering"},"content":{"rendered":"\n

Create a Search Filter<\/h2>\n\n\n\n
\n
\n

In the described case, you can use any filter type available with the JetSmartFilters <\/em>plugin. In this tutorial, we create the Search Filter<\/strong><\/a>.<\/p>\n\n\n\n

Proceed to WordPress Dashboard ><\/em><\/strong> Smart Filters > Add New<\/em><\/strong>. <\/p>\n\n\n\n

Complete the Filter Name<\/strong>, <\/strong>select the \u201cSearch\u201d Filter Type<\/strong>, and define the Search by <\/strong>option. Here, we select the \u201cDefault WordPress search\u201d option.<\/p>\n\n\n\n

Optionally, you can change the Placeholder <\/strong>(in our case, it\u2019s \u201cSearch Ads\u2026\u201d) and complete the Filter Label <\/strong>and Active Filter Label<\/strong>.<\/p>\n\n\n\n

Once done, hit the \u201cUpdate\u201d <\/strong>button.<\/p>\n\n\n\n

\"search<\/a><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n

Add the Listing Grid and Filter to the Page<\/strong><\/h2>\n\n\n\n
\n
\n

Proceed to the page editor where you want to place the Listing Grid<\/strong><\/a>. You can edit it in the WordPress block editor (Gutenberg), Elementor, or Bricks.<\/p>\n\n\n\n

Drag and drop the filter block\/widget\/element (Search\/Search Filter <\/strong>in the given case) and complete its settings.<\/p>\n\n\n\n

Choose the just-built filter in the SELECT FILTER <\/strong>field, set the \u201cListing Grid\u201d option in This filter for <\/strong>field, and choose the desired APPLY TYPE <\/strong>(the\u00a0 \u201cAJAX on typing\u201d in our tutorial).<\/p>\n\n\n\n

\"search<\/a><\/div>\n\n\n\n

Place the Listing Grid <\/strong>widget\/block\/element and pick the needed LISTING <\/strong>in the General<\/strong> settings tab.<\/p>\n\n\n\n

\"listing<\/a><\/div>\n\n\n\n

Move to the Advanced <\/strong>tab and enter \u201chide-before-filter\u201d into the ADDITIONAL CSS CLASS(ES)<\/strong> field.<\/p>\n\n\n

<\/svg><\/div>
Things to know<\/div>

If you work with Elementor, paste the \u201chide-before-filter\u201d class in the CSS Classes<\/strong> field in the Advanced<\/strong> settings tab. For Bricks, the Custom CSS<\/strong> field can be found in the CSS<\/strong> section of the Style<\/strong> tab.<\/p><\/div><\/div>\n\n\n\n

With this class, the content will be hidden, but not right away, so to make the filtered widget hidden immediately after the page is loaded, you can add the \u201chide-listing\u201d class to the field. Separate two classes with a space.<\/p>\n\n\n\n

\"listing<\/a><\/div>\n\n\n
<\/svg><\/div>
Things to know<\/div>

If you want the block\/widget\/element to hide again after resetting the filters, add the \u201chide-on-reset\u201d class, separating it by space from the added classes.<\/p><\/div><\/div>\n\n\n\n

\"hide<\/a><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n

Add CSS and JavaScript Code<\/h2>\n\n\n\n
<\/svg><\/div>
Warning<\/div>

Before proceeding with the tutorial\u2032s steps, create a backup or replicate the actions on the staging site. The backup ensures the website restoration if an error occurs. To learn more, proceed to the How to Backup and Restore a WordPress Website with a Plugin<\/a> article.<\/p><\/div><\/div>\n\n\n\n

The easiest way is to add the Custom HTML <\/strong>block (HTML <\/strong>widget in Elementor or Code <\/strong>element in Bricks) to the page and enter such a code:<\/p>\n\n\n\n