Back to contents

JetSmartFilters: How to Set Manual Input Data Source for Visual Filter

Find out about the Manual Input Data Source for the Visual Filter to set all the desired filter options yourself.

Tutorial requirements:

  • JetSmartFilters installed and activated;
  • Meta field values’ options to be used as options for filtering; 
  • Queried field key for the Query Variable field. Read how to get it with JetEngine or another Custom Post Type builder;
  • The enabled provider in the JetSmartFilters settings displays it as an option in the page builder.

Steps:

Add New Filter

Open the WordPress Dashboard. Navigate to Smart Filters and click on “Add New“. 

Fill in the title, Filter Label, and Active Filter Label. Choose the Visual Filter as a Filter Type.

filter type dropdown menu

Select Manual Input Data Source

Select the Manual Input data source to set the very options you need manually.

data source dropdown menu

Choose Visual Filter Type

Choose a Color as the Type to set the options using a color picker or code. Or, if you want to upload images as the filter sources, choose Image type.

type dropdown menu

Select Behaviour

Select Checkbox as the Behavior to allow users to choose several options in one place.

Or, if you want to let the users choose only one option from the all represented, pick the Radio option.

behavior dropdown menu

Complete Options List

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

Drag options to change their order and get the desirable result on the front end. Copy or delete options by clicking the corresponding icons.

NOTE
Mind that options Value should match Meta Field Key value, filled in the filtered items (posts, products, etc.). Pay 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.

When adding an Image type, the Image field will be suggested instead of the Color one. Upload the image option in the WordPress Media Library or select the one that is already uploaded.

visual filter options list color example

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

NOTE
This toggle is available only if JetEngine is installed and activated.
is checkbox meta field toggle

Fill in Query Variable

Paste the meta field name to query it in the Query Variable field.

NOTE
This option relates to the third requirement in our list and represents the meta field name added in the CPT meta field.

Click on the “Publish” button whenever all the fields have been set up.

query settings

Place Filter on the Page

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

That’s what the settings look like in the Elementor Page Builder.

visual filter settings in elementor

And once you select Gutenberg for editing, the settings will be pretty similar.

gutenberg visual filter settings

Content/General tab

  • Select Filter — choose the filter to be displayed;
  • This filter for — set the filter provider;
  • Apply type — select Page Reload or AJAX if you want the page not to be reloaded;
  • Apply on — define the applying trigger;
  • Show apply button — toggle to display the apply button if the corresponding trigger is chosen;
  • Show filter label — switch on depicting the filter label above the options;
  • Query ID (Elementor only) — use this field to place an ID if you have several widgets of the same provider on the page;
NOTE
If you have multiple providers on the page and you want to filter the specific one, read about how to do it in Applying Filter to the Specific Widget tutorial.
  • Additional Providers Enabled (Elementor only) — activate to set more than one provider.

For more detailed information read Applying Filters to Several Widgets tutorial.

Look at the Filter Options settings, available in Elementor.

elementor filter options

In Gutenberg the same settings are depicted, adjust them if needed.

gutenberg filter options

Filter Options tab

  • Show items label — toggle to display the color labels;
  • Image Size — define the quality of a displayed image if you create an Image Filter.

Except for these tabs Additional Settings and Indexer Options tabs are represented. Find out about this tab in the Visual Filter Widget overview.

Another customization to work on in Gutenberg is the Additional CSS class(es). Paste the CSS classes to style the filter. Or, install and activate JetStyleManager to style the filter directly in the block editor.

gutenberg visual filter advanced tab

Once further editing is done, update or publish the page by clicking on the same-named button.

Check Results

filter result

Now, you know how to build a visual filter based on the Manual Input Data Source with the help of the JetSmartFilters plugin.