{"id":13188,"date":"2022-04-21T15:32:34","date_gmt":"2022-04-21T15:32:34","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=13188"},"modified":"2023-07-19T00:41:11","modified_gmt":"2023-07-19T00:41:11","slug":"jetsmartfilters-how-to-create-visual-filter-with-manual-input-data-source","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-create-visual-filter-with-manual-input-data-source\/","title":{"rendered":"How to Set Manual Input Data Source for Visual Filter"},"content":{"rendered":"\n

Add New Filter<\/strong><\/h2>\n\n\n\n
\n

Open the WordPress Dashboard. Navigate to Smart Filters<\/em> <\/em><\/strong>and click on “Add New<\/strong>“. <\/p>\n\n\n\n

Fill in the title, Filter Label<\/strong>, <\/strong>and Active Filter Label<\/strong>. Choose the Visual Filter<\/strong> as a Filter Type<\/strong>.<\/p>\n\n\n\n\"filter\n<\/div><\/div>\n\n\n\n

Select Manual Input Data Source<\/strong><\/h2>\n\n\n\n
\n

Select the Manual Input<\/strong> data source to set the very options you need manually.<\/p>\n\n\n\n\"data\n<\/div><\/div>\n\n\n\n

Choose Visual Filter Type<\/strong><\/h2>\n\n\n\n
\n

Choose a Color <\/strong>as the Type <\/strong>to set the options using a color picker or code. Or, if you want to upload images as the filter sources, choose Image <\/strong>type.<\/p>\n\n\n\n\"type\n<\/div><\/div>\n\n\n\n

Select Behaviour<\/strong><\/h2>\n\n\n\n
\n

Select Checkbox <\/strong>as the Behavior <\/strong>to allow users to choose several options in one place.<\/p>\n\n\n\n

Or, if you want to let the users choose only one option from the all represented, pick the Radio <\/strong>option.<\/p>\n\n\n\n\"behavior\n<\/div><\/div>\n\n\n\n

Complete Options List<\/strong><\/h2>\n\n\n\n
\n

Since the source requires manual input, set all the needed fields by typing in the Label<\/strong>, its Value<\/strong>, <\/strong>and choosing the Color<\/strong> corresponding to the option created. Add as many options as you need. <\/p>\n\n\n\n

Drag options to change their order and get the desirable result on the front end. Copy or delete options by clicking the corresponding icons.<\/p>\n\n\n

<\/svg><\/div>
Warning<\/div>

Mind that options Value<\/strong> should match Meta Field Key<\/strong> value, filled in the filtered items (posts, products, etc.).
\nPay attention to the second requirement on our list. The values you need to put are kept in CPT meta fields that were filled in while editing the custom post.<\/p><\/div><\/div>\n\n\n\n

When adding an Image type, the Image <\/strong>field will be suggested instead of the Color<\/strong> one. Upload the image option in the WordPress Media Library or select the one that is already uploaded.<\/p>\n\n\n\n\"visual\n\n\n\n

Enable the following Is Checkbox Meta Field (JetEngine) <\/strong>switcher to filter data from the Checkbox meta fields type. Or leave it unactivated if you deal with Radio<\/strong>.<\/p>\n\n\n

<\/svg><\/div>
Warning<\/div>

This toggle is available only if JetEngine<\/em><\/strong> is installed and activated.<\/p><\/div><\/div>\n\n\n\n\"is\n<\/div><\/div>\n\n\n\n

Fill in Query Variable<\/strong><\/h2>\n\n\n\n
\n

Paste the meta field name to query it in the Query Variable <\/strong>field.<\/p>\n\n\n

<\/svg><\/div>
Warning<\/div>

This option represents the meta field name added in the CPT meta field.<\/p><\/div><\/div>\n\n\n\n

Click on the “Publish” <\/strong>button whenever all the fields have been set up.<\/p>\n\n\n\n\"query\n<\/div><\/div>\n\n\n\n

Place Filter on the Page<\/strong><\/h2>\n\n\n\n
\n

To apply the newly created filter, head to the Elementor and Gutenberg page builders. Search for the Visual Filter <\/strong>widget\/block and go through the customization settings.<\/p>\n\n\n\n

That’s what the settings look like in the Elementor Page Builder.<\/p>\n\n\n\n\"visual\n\n\n\n

And once you select Gutenberg for editing, the settings will be pretty similar.<\/p>\n\n\n\n\"gutenberg\n\n\n\n

Content\/General tab<\/strong><\/p>\n\n\n\n