Stand with Ukraine. Fight for freedom and democracy

Back to contents

JetSmartFilters: How to Use Filters in Gutenberg

This tutorial reveals how to apply JetSmartFilters plugin widgets to a Listing Grid created with JetEngine or WooCommerce shortcodes without going to Elementor page builder. You will learn to use filters in Gutenberg on the example of Checkboxes filter.

The elements created and added in Gutenberg editor are much “lighter” than those built with Elementor. They look simpler and can’t be uniquely styled but also don’t reduce the page loading speed. If you wish to sacrifice stunning designs to loading speed, the JetEngine and JetSmartFilters plugins allow you to do that. This tutorial will show you how to add filters to the Gutenberg page and configure all the necessary settings.

1 Step — Add the items grid

First of all, you need to create a grid that will be filtered by one of the JetSmartFilters widgets. Be aware that when used in Gutenberg, those filters can only work with JetEngine listing grids and WooCommerce shortcodes. Go to the page or post where you would like to add the grid and filters and click the “Edit” button.

If you want to place a listing grid to the page and need a hint, go through our tutorial on how to use JetEngine widgets in Gutenberg.

And if you’d like to display the WooCommerce products list on this page, learn more about WooCommerce shortcodes.

2 Step — Create and add a filter block to the page

When you are done creating the items grid, open the dashboard and go to Smart Filters > Add New. Create the filter you need. For more information, check out this filter creation tutorial.

After that, turn back to the page or post with the item grid, click the “Add block” button (it has the icon of a cross in a circle), and find the Jet Smart Filters blocks tab. Choose the filter you need and click on it. In our case, it will be Checkboxes filter.

Jet Smart Filters blocks

3 Step — Define the general settings

Click on the filter block and look at the General settings menu on the right side of the page. That menu is almost the same as the one you can see in Elementor. Let’s take a closer look at each feature.

  • Select filter. In this drop-down menu, you have to choose the filter you created for the grid on this page;
  • This filter for. There are two options here – “Listing Grid” and “WooCommerce Shortcode.” Choose the one matching your items list;
  • Apply type. This feature defines how the sorting results will be presented to the user. “AJAX” means that the sorting results will appear without reloading the page. “Page reload” option will reload the page to show the filtering results. And if you choose the “Mixed” option, the page won’t reload but the URL of the page will change;
general settings
  • Apply on. Here you can choose if the results will be shown after the user changes the value or once the Apply button is clicked;
  • Show apply button. If you have chosen the “Click on apply button” option in the previous feature, turn this toggle on to show the button;
  • Apply button text. The text you will type in here will be placed on the button;
  • Show filter label. This option will be useful if you have several filters to apply. When enabled, it shows the filter label.
general settings

4 Step — Set the Indexer Options

The indexer is a feature that shows how many items match every sorting option. The number of items is shown near the option in brackets. If you would like to enable that option, it is not enough to turn on the toggle in the menu.

First of all, you have to open the Dashboard and go to JetPlugins > JetSmartFilters Settings > Indexer. Turn on the Enable Indexed filters functionality toggle, click on the proper post type and click the “Save” button.

JetSmartFilters settings indexer enabling

After that proceed to SmartFilters, open the list of filters, and hit the “Index Filter” button.

Now you can turn back to the page with the grid and filters and continue with the settings. Unfold the Indexer Options menu tab and turn the Apply Indexer and Show Counter toggles on. After that, you can choose whether to show the counter with zero value when the option is empty and when to change counters.

index filters button

After you’re done with all the settings, click the “Update” or “Publish” button and go to the frontend to see how it will look like.

If you have JetStyleManager installed, you can also customize the appearance of the filter block. In that case, after clicking on the filter block you will see a “Block Style” button next to the “Settings” button. Hit it and you will see a set of sections that contain design settings of the block elements. You will be able to choose alignments, sizes, colors, fonts, gaps, and other features of the filter design. Play with the settings to achieve the result that will fit your taste.

Block Style button

That’s it. You now know how to apply a filter to the grid without editing it in the Elementor page builder. Enjoy!