Display Selected Terms

Hi Tom (@tommyd17),

The “quick-deselect-*” classes are designed to be used on widgets that normally renders visible content. The easiest and most flexible option is a Heading widget, since it lets you control the HTML tag used for the quick deselect pills.

The part that usually causes confusion is that Elementor no longer renders completely empty widgets. If a widget has no initial content, it won’t display on the page, and the plugin has nothing to attach the pills to.

To make it work reliably, you can follow these steps:

1. Add a Heading or Text Editor widget
2. Important: Add some initial content to it (or just an empty space using  , to start visually empty)
3. Add the “quick-deselect-xxxxxx” class to that widget

Elementor will render the widget, and once filters become active, the pills will be displayed automatically. You can also style the pills directly using the Heading or Text Editor widget style settings.

Hope that clears things up. Let me know if you need any further assistance.

Best,
Dara

Hi Tom,

Glad that worked. I’ll admit that the special filter classes can be tricky to use, and I’ll be working on improving the messaging to make their usage clearer.

Regarding your other questions, you can trigger a filter via the URL using ?results=filter-XXXXXXX (replace XXXXXXX with the filter ID found at the bottom of the additional options). Once applied, interacting with the filter will automatically update the URL.

About the loading indicator, there’s a built-in loader, but it’s very discreet. For Elementor Pro widgets, it simply reduces the opacity of the post container. You can style it differently using the .load or .filter-initialized classes, which are applied while the filter is processing the query. If the results take a little too long to appear, you can tweak options in the “Performance Settings” section to adjust how the filter queries new posts.

Hope this helps!

Regards,
Dara

Hi Tom,

At the moment, ?results=filter-XXXX needs to be added manually, so users can decide if they want to use this feature. There is no global option to force this by default. This is intentional to avoid conflicts when multiple filters are present on the same page. For now, the recommended approach is still to link to the page with ?results=filter-XXXX already present if you want fully shareable URL.

The short delay you notice before .load or .filter-initialized is caused by the debounce mechanism. This prevents excessive AJAX calls while the user is still interacting with the form.

At the moment, I do not plan to change this behavior globally, but you can add your own class on interaction if you want visual feedback straight away.

// Add class while filter widget is being interacted with
$(document).on('change keydown input click', '.elementor-widget-filter-widget', function () {
	const $filterWidget = $(this);

	// Mark the filter widget itself. If not needed it can be commented out.
	$filterWidget.addClass('bpfwe-awaiting-input');

	// Mark the targeted post widget if specified.
	const targetSelector = $filterWidget.find('.filter-container').data('target-post-widget');
	if (targetSelector) {
		const $postWidget = $(targetSelector);
		if ($postWidget.length) {
			$postWidget.addClass('bpfwe-awaiting-input');
		}
	}

	// Optional: auto-remove after 700ms so the class is temporary
	setTimeout(() => {
		$filterWidget.removeClass('bpfwe-awaiting-input');
		if (targetSelector) $(targetSelector).removeClass('bpfwe-awaiting-input');
	}, 700);
});

This script will gives you instant feedback on click/input. In this case, the added class would be .bpfwe-awaiting-input and it would be auto removed after 700ms.

Please let me know if you need further assistance.

Regards,
Dara