FacetWP Submit Button - WordPress Plugin
The FacetWP Submit Button is a plugin designed as an add-on redirect button for FacetWP, enhancing the platforms functionality. By integrating this feature, users can easily manage and customize the redirection process, ultimately improving the overall user experience. It provides a seamless way to direct users to specific pages based on their interactions with the filters, making navigation more intuitive and efficient.

Plugin Features
This plugin allows website administrators to configure the submit button according to their preferences, tailoring the redirection behavior to align with the sites objectives. With this tool, users can effortlessly set up redirection rules based on selected filters, providing a personalized and dynamic browsing experience. Moreover, it offers flexibility in directing users to relevant content, optimizing engagement and conversion rates.
One of the key advantages of this add-on is its ability to streamline the navigation process on websites powered by FacetWP, reducing the effort required for users to access desired information. By simplifying the redirection mechanism, it contributes to a more user-friendly interface, encouraging visitors to explore content effectively. This feature is particularly beneficial for websites with extensive data and multiple filter options.
The plugin seamlessly integrates with FacetWP, preserving the core functionalities of the platform while introducing a valuable enhancement to the user interface. This integration ensures that users can leverage the benefits of FacetWPs filtering capabilities in conjunction with the streamlined redirection offered. By combining these elements, website owners can create a cohesive browsing experience that promotes engagement and facilitates content discovery.
Overall, this tool is a practical addition for optimizing the user journey on websites utilizing FacetWP. Its ability to simplify the redirection process, customize button behavior, and enhance navigation efficiency makes it a valuable asset for any FacetWP-powered site. With this add-on, website administrators can improve user interaction, increase usability, and ultimately drive better results in terms of engagement and conversions.
Specifications:
| Release date: | 11-10-2020 | |
| Last updated: | 20-04-2021 | |
| Type: | Paid | |
| License: | GPL | |
| Subject: | Structure & Navigation for FacetWP | |
| Compatibility: | W5.x | |
| Includes: | Plugin | |
| Language packs: |
|
|
| Developer: | FacetWP | |
| Rating: | ||
Share with your friends!
How to Set Up FacetWP Submit Button for Search on a Separate Page
This guide to FacetWP Submit Button will help you decide when filters should send visitors to a separate results page, prepare a matching post listing, build a form with facets and a button, and verify that selected filters carry over correctly. You’ll follow a practical path from two WordPress pages to checking the URL, the results, and common caching conflicts.
The add-on handles a fairly specific but important task. Standard FacetWP facets update the listing where visitors select their options. Submit Button changes that flow: the first page becomes the place to choose filters, and a separate page displays the results. This approach works well for a services directory on the homepage, a real estate search, a professional directory, recipes, courses, or any archive where a compact search form should lead to a full listing.
The key is not the button itself. It carries selected facet values to the results page URL, so both pages need to work with the same set of posts. If the first page has a hidden listing of cars but the second page shows only a different post type or a different set of restrictions, the button may work technically while visitors get confusing or empty results. Matching the listings is what makes this setup work; without it, even a polished form may find nothing.
When to Use a Submit Button Instead of Live Filtering
FacetWP Submit Button isn’t the right fit for every filter. For a small catalog where visitors expect cards to change with each click, updating the current page is usually simpler. A separate page makes sense when the first page serves as an entry point to search: it introduces the search options, collects two or three key filters, and stays free of a long grid of cards. A visitor can choose a city, property type, and price range, then click the button to open a full listing with additional facets, sorting, pagination, and context for the results.
What Submit Button Actually Passes
When clicked, the button sends the visitor to a specified page. The selected facets become URL parameters, and FacetWP reads them on the destination page and marks the corresponding options as selected. This creates a continuous flow: visitors choose filters, then see those choices preserved alongside the results. It doesn’t create a separate request or send data to a third-party service. It manages search state within the site.
It helps to think of the setup in four parts. Facets give visitors options to choose from. The hidden listing on the starting page tells FacetWP which values are available for the selected content type. The button sets the destination and starts the transition. The results listing on the second page receives the same state and displays matching posts. This makes it easier to see why you can’t just add the button shortcode to an empty page: without a listing connected to the facets, FacetWP has no data to use when building the options.
Where This Setup Is Especially Useful
- Directories and classified listings where the starting page should stay compact, while the results page includes cards, a map, sorting, and pagination.
- Service websites where visitors first choose a specialty, city, or service type, then open a separate list of providers.
- Content websites where the homepage offers a quick search by topic, level, or format, while the results page has more advanced filters.
- Projects with different page layouts where the introductory page has its own design and the results archive needs a different width, sidebar, or more complex layout.
When to Keep the Default Behavior
Keep navigation simple when visitors benefit more from seeing changes immediately. For example, filters in a small product category are often easier to use without a separate page transition. The same applies when the first page already has the only listing visitors need to compare while choosing. Submit Button adds a step, and that step should serve a purpose: a cleaner landing page, a dedicated space for results, or a clear separation between searching and browsing.
The add-on doesn’t replace facet configuration. It doesn’t create taxonomies, custom fields, post cards, or an index. The site first needs filterable data and a working FacetWP listing. If the content structure hasn’t been decided yet, start there: determine which posts visitors will search and which values will actually help narrow the results before adding the button.
A practical rule of thumb. If visitors have to choose all their filters again after reaching the results page, the setup isn’t working as intended. Submit Button is useful because the selected state remains visible and applies to the listing that loads on the destination page.
Plan the Pages and Data Before Installing the Add-On
Before enabling the add-on, sketch out a simple page map, even for a small site. You need two pages and one logical listing. The first might be called Find a Specialist. It will contain the city and specialty facets, a hidden listing, and a button. The second might be called Search Results. It will contain the same facets, a visible listing, and, if needed, sorting or a reset option. You can use different page names, but it’s best to keep their roles separate.
Next, list the data each facet will use. For every facet, identify its source: a taxonomy, a custom field, or another supported source. Make sure the posts actually have values saved in those fields. A city facet won’t offer useful options if half the cards have no city or use several inconsistent spellings. At this stage, fixing the data is more useful than trying to solve the problem with styling.
| Component | Role | What to Check Before Launch |
|---|---|---|
| Starting page | Collects filters | Facets sit next to the button and apply to the right post type |
| Hidden listing | Connects facets to content | Its query matches the posts intended for the results page |
| Results page | Displays matching posts | It has one filterable listing and visible facets |
| Destination URL | Receives facet state | It matches the URL set on the button |
Also check that each page has only one active listing. FacetWP can appear alongside static blocks, but there should be only one listing on a given page that the facets control. This matters especially with page builders, where it’s easy to leave a second similar widget in a hidden column or archive template and get unpredictable behavior. You can keep static blocks, but make sure they don’t look like a second filterable catalog.
Install and Run the First Test Without Misdiagnosing Problems
Submit Button installs as an add-on to an existing FacetWP setup. In the admin area, install and activate the add-on first, then return to FacetWP configuration. Don’t judge it by activation alone. A sound first test involves three checks: a test listing exists, the facets show the expected options, and you’ve re-indexed after changing the data sources. Until all three are ready, testing the transition between pages is premature.
Prepare One Base Listing
The most predictable approach is to create a listing template under Settings > FacetWP > Listings. Give it a clear label, such as specialist_results, then open the Query tab and choose the post type and conditions for the catalog. You can style the listing later under the Display tab. First, make sure the query selects the posts you want to show on the second page.
A listing template has an internal name. Don’t rely on its display label alone: shortcodes and PHP use the saved name. Keep names short, unique, and easy to understand. If the site has several catalogs, avoid generic names like test or listing. A month later, it may be hard to tell which hidden listing belongs to the search form and which one belongs to the news archive.
Why the First Page Needs a Hidden Listing
A facet needs a connected listing to know which values to display and which ones match the current set of posts. The starting page doesn’t have to show cards, but the listing still needs to exist there technically. That’s why the template is placed inside a container with display:none. This isn’t a visual trick or a substitute for the actual results page. It gives FacetWP the context it needs to build the facets before the transition.
Hide only the listing output, not the facets or the button. If you hide their parent container, visitors won’t be able to choose anything. Also avoid adding unnecessary dynamic elements to the hidden container. The simpler this technical piece is, the easier it will be to identify which block handles the form and which one displays the results.
Create the Facets Before Adding the Button
Under Settings > FacetWP > Facets, create the facets needed on both pages. For a test setup, two are enough: a city selector based on a taxonomy and a specialty selector based on another taxonomy or a field. Choose a suitable control type. A toggle can work well for a short list; for a long list, consider autocomplete or a dropdown. There’s no single best option for every site. Choose a control that fits the way visitors will make their choices.
After saving, run Re-index. Indexing prepares the data FacetWP uses to display options and filter posts quickly. Repeat it after significant changes to a facet’s source, imports, or data corrections. If a facet suddenly appears empty, first check its source, confirm that values are saved, and make sure the index is current. Don’t change the URL, button, and theme all at once; that turns a simple question into a long chain of unrelated edits.
Build the Results Page Before the Starting Form
Open the future results page and make sure it works on its own first. Add the visible listing shortcode, facet shortcodes, and, if needed, sorting, a result count, or a reset control. Open the page in a private window, select a filter, and confirm that the listing responds. This order matters: if the results page doesn’t work by itself, Submit Button can’t fix it.
With Listing Builder, a typical setup has one listing shortcode and several facet shortcodes. In the block editor, you can place them in Shortcode blocks; in a page builder, use its appropriate shortcode elements. Don’t add a second filterable listing just for the design. Use a static block or place it in another template if you need an extra visual element.
[facetwp facet="city"]
[facetwp facet="specialty"]
[facetwp template="specialist_results"]
These names illustrate the setup; they aren’t ready to copy. Replace them with the internal names created on your site. After adding the shortcodes, check whether the selected facet state appears in the page URL. A URL change isn’t a problem: FacetWP uses URL parameters to preserve selections and let visitors reopen the same results. The problem is when parameters appear but the listing doesn’t change. In that case, check how the facets connect to the listing rather than the button.
Add Submit Button to the Starting Page
Once the results page works, build the starting page. Place the same facets in the appropriate block in the hero section. Below them, add the hidden listing template, then add a button with the destination URL. If the URL differs by even one part of its path, visitors may land somewhere other than the page with the matching visible listing. Use a permanent URL you’ve already tested manually, and repeat the test after changing permalinks.
[facetwp facet="city"]
[facetwp facet="specialty"]
<div style="display:none">[facetwp template="specialist_results"]</div>
[facetwp submit="/results/" label="Show Specialists"]
This shortcode illustrates the setup: two facets, a hidden listing, and a button that points to the results page. Use button text that describes the action and what visitors will see, rather than the generic Submit. For example, use Show Results, Find Specialists, or another short phrase that fits the catalog. Long labels are harder to read on narrow screens and don’t make the search any clearer.
Using a PHP Template
If you need to display the form from a child theme file, use FacetWP’s documented display function. Add it to a child theme or use a controlled custom-snippet method; don’t edit the original theme or add-on files. Make a backup first and test on a copy of the site. The code below places the elements; it doesn’t change the query.
<?php echo facetwp_display( 'facet', 'city' ); ?>
<?php echo facetwp_display( 'facet', 'specialty' ); ?>
<div style="display:none">
<?php echo facetwp_display( 'template', 'specialist_results' ); ?>
</div>
<button class="fwp-submit" data-href="/results/">Find Specialists</button>
After adding it, open the starting page with caching disabled, select a filter, and click the button. Rolling back is simple: remove the snippet or restore the saved version of the child template. Don’t change the button class, styles, and JavaScript handlers at the same time. Get the transition working first, then adjust the appearance.
Required check: The results should be visible on the second page before you connect the starting form. This lets you distinguish a listing problem from a problem passing filter state.
How FacetWP Submit Button Carries Filters to the Results Page
To set up FacetWP Submit Button reliably, it helps to understand the sequence of states, not just the interface steps. Visitors select values on the starting page. FacetWP matches them to the facets connected to the hidden listing. The button sends the visitor to the specified URL with the current parameters. The new page reads those parameters, applies them to its single active listing, and displays matching posts. It may look like one click, but the result depends on four parts working together.
Matching Queries Matter More Than Matching Layouts
The starting page and results page can look completely different. The first page can place its facets in the hero section, while the second puts them in a sidebar above the grid. But the queries behind them should select the same logical set of posts. If the first listing includes posts of type specialist but the second is unexpectedly limited to a different category, date, or post type, the same facet selections will produce different results.
You don’t have to use the same listing template on both pages. The important thing is for their query conditions to be identical or as close as possible. If the results page excludes technically hidden posts, the hidden listing on the starting page should use the same exclusion. If results should include published posts only, don’t leave drafts or another post status in one listing. These mismatches often look like a button problem even when the button passes the filters correctly.
Check the Flow One Step at a Time
- Check the data. Create a few test posts with different cities and specialties so each filter has something to return.
- Test the facets on the results page. They should filter the visible listing without Submit Button.
-
Check the hidden listing on the starting page. Temporarily remove
display:nonein a copy of the layout and confirm that it contains the same logical set of cards. - Check the destination URL. Select one filter, click the button, and confirm that it opens the expected page.
- Check that state is restored. The selected option should be marked on the results page, and the listing should change accordingly.
This order saves time. It helps avoid a false diagnosis where an editor changes the button, clears the cache, and rearranges blocks even though the original facet is connected to the wrong listing. For testing, use data with obvious differences: for example, one specialist based only in New York and another only in Chicago. That makes errors easy to spot instead of losing them among dozens of similar cards.
Configure the Search Form: Facets, Destination URL, and Button Text
Start by deciding how many filters to collect on the first page. A common mistake is to move every filter from the results page into the starting form. The first form should help visitors get started, not turn the homepage into a control panel. Two or three key facets are usually enough: location, type, category, specialty, or range. Leave the rest on the results page, where visitors can refine their search with the listing in view.
Assign a Role to Each Facet
Separate the facets into initial and refinement filters. Initial filters set the broad search criteria and work well with Submit Button. Refinement filters are useful after the transition, when visitors can see the cards and decide what else they need to narrow down. For a course catalog, for example, the initial filters might be subject and level, while refinements could include duration, format, language, and sorting. For a professional directory, the initial filters could be city and service, with price, experience, and availability as refinements.
This division reduces the chance of an empty results page. The more filters visitors set before the first transition, the more likely they are to rule out every post without understanding why. If the project needs many initial filters, add a short note explaining that some options can be left blank. Avoid hidden default values without a clear reason: visitors should understand why they see only part of the catalog after the transition.
Set a Stable Results Page
The URL in facetwp submit or the data-href attribute should point to the page with the visible filterable listing. Don’t use a temporary editor preview or a URL that still has parameters from an old test. Open the clean results URL first, then enter it as the path. If the site has localized pages, test each language separately: the button on a page in one language should lead to the corresponding results page with its matching listing.
After configuring the button, open the results page directly as well as through the form. The page shouldn’t depend on whether a visitor arrived from the form. With no facets selected, it should usually display the full set allowed by the query. This matters for search navigation, bookmarks, and return visits. If an empty results page looks like an error, add a clear heading and a useful starting listing instead of technical text.
Make the Button Clear and Accessible
The button label should describe what visitors will see next. For real estate, use Show Properties; for a knowledge base, Find Articles; for a service directory, Find a Provider. Search can work too, if visitors know what to expect. Use clear contrast, a comfortable hit area, and a visible keyboard focus state. The button shouldn’t look like an ordinary link or a decorative label.
If the design calls for a button on the same row as the facets, test it on a narrow screen first. Don’t rely on fixed widths when option labels vary in length. Let the form wrap naturally. The priority is making it possible to select a filter and click the button, not keeping every control in a perfectly even row at one screen size.
Using Elementor
If the Elementor add-on is installed, use the FacetWP Button widget. In Choose Type, select Submit button, then set the results page in Listing Page. You can build the form with facet widgets and display a Listing Builder listing with its listing widget. The button widget saves you from writing the shortcode manually, but the underlying setup is the same: the starting page still needs a connected hidden template, and the results page still needs a compatible visible listing.
With a page builder, it’s especially easy to leave an extra listing in a section, archive template, or responsive layout. After publishing, review the layout and test the form in every mode where the builder shows different blocks. If it works on desktop but not on mobile, compare which blocks are present, not just the CSS. The mobile version may be missing the hidden template, or its button may point to a different URL.
Using Beaver Builder and Mobile Flyout
Beaver Builder has a FacetWP button module with the same type and destination page settings. If you want the standard facet handoff, don’t replace it with a generic button. With Mobile Flyout, you can place the button inside a slide-out panel. This can work well for a long mobile form: visitors select filters in the panel, confirm their choices, and continue browsing the catalog on the results page.
After adding the form to a flyout panel, test more than its appearance. Select a value, close and reopen the panel, then click the button. The goal is to move to the results page with the filter preserved, not just to show a polished animation. If mobile visitors can’t tell which filters are selected, use the layout’s built-in options to display a brief count or the selected values. Don’t duplicate the filtering logic in custom JavaScript.
In short. A good starting form limits the initial choices to the main criteria, points to one stable URL, and passes state to a compatible listing. Polish comes after this basic flow works.
Example: A Homepage Search Form for a Professional Directory
Let’s walk through a complete example to connect the setup to what visitors will see. Imagine a site with a custom post type called specialist. Each post has a city and a service category. The homepage lets visitors choose a city and a service. After they submit the form, they land on a separate page with specialist cards, a result count, and additional filters. The same approach can work for other catalogs if you replace the content types with products, courses, properties, or articles.
Set the Goal and Prepare the Data
The goal isn’t simply to send visitors to another page. It’s to show only cards that match their selections. Before you start, create at least four test posts. Put two specialists in the same city but in different specialties, and put the other two in another city. Keep the data consistent across all fields. If the city is stored in a taxonomy, don’t save some city values in a custom field. If the service type comes from a field, don’t use a similar taxonomy for some posts. Each facet needs a consistent data source.
Create a listing template called specialist_results. Set the post type to specialist and choose the required post status in the query. If the results page should exclude posts without a city, apply that rule to both connected queries. Then create the city and service facets, set their data sources, and re-index. Only then move on to the cards and button color.
Build a Complete Results Page
On /find-specialist/, start with a clear heading, then add the facets, reset control, and visible listing. This is a continuation of the search, not just a technical destination for parameters. Visitors should be able to refine their choices rather than start over. It can help to explain near the listing that the number and selection of cards change as filters are applied. Don’t put an exact number of results in static text; that depends on the current data.
Arrange the facets so selected values are easy to spot. If the homepage only asked for a city and service, the results page can add sorting, a range, and other refinements. Make sure they all work with the same single filterable listing. A reset control helps when visitors narrow the results too far by mistake. Don’t use Submit Button to reset the filters: these are separate actions, and a dedicated reset control makes the interface clearer.
Build the Starting Form
On the homepage, add a heading that describes the task, then two facets and the button. You can add a short note below the form explaining what visitors can find. Place the hidden listing template in the same logical area as the facets. It doesn’t need to look like a visible section, and you don’t need to add cards manually. It’s there so FacetWP can identify the available options and match visitors’ choices to the specialist posts.
<h3>Find a Specialist</h3>
[facetwp facet="city"]
[facetwp facet="service"]
<div style="display:none">[facetwp template="specialist_results"]</div>
[facetwp submit="/find-specialist/" label="Find a Specialist"]
If you use a template file, keep the same order with facetwp_display(). Don’t run PHP from a website article or add the snippet to WordPress core files. Use a child theme, a custom project template, or a trusted snippet manager. After publishing, confirm that /find-specialist/ exists in the same language version and environment as the form.
Test It as a Visitor, Not as an Editor
Open the homepage in a private window. Select a city but leave the service blank. Click the button and confirm that the same city is selected on the results page and that the list contains only posts from that city. Go back, select only a service, and repeat the test. Then select both filters and compare the results with your test posts. If any test returns the wrong set, hold off on styling. Record which combination failed and where the first mismatch appears.
Also test the reverse path. On the results page, change one facet and refresh the browser. The search state should remain clear and match the listing. Open the resulting URL in a new tab. This confirms that the page is using URL parameters to restore the search, rather than relying on a temporary state in one browser widget.
Verify the Setup: URL, Selected Filters, and Listing
After configuring the form, verify its behavior by checking what visitors can see. It’s not enough to confirm that the browser changed pages. At a minimum, the destination page should open, the selected filters should appear selected, and the visible listing should match those filters. If one of these checks fails, identify where the expected state was lost. This is much more reliable than drawing conclusions from a screenshot of the admin panel.
Use Test Posts with Distinct Values
Keep a small reference table in a document or on paper showing which test post should appear for each pair of filters. For example, Jane is a designer in New York, Marcus is a developer in New York, and Olivia is a designer in Chicago. A search for New York and design should return Jane only. If Jane and Olivia appear, the city filter isn’t working. If Jane and Marcus appear, the service filter isn’t being applied. This check doesn’t depend on guesswork and quickly narrows down the problem.
| Starting Page Selection | What Should Appear After the Transition | What a Failure May Indicate |
|---|---|---|
| City only | The city is selected, and all posts from that city remain | If other cities appear, the facet and query may not be connected |
| Service only | The service is selected, and all providers for that service remain | If the listing doesn’t change, check the data source and index |
| City and service | Only posts matching both filters remain | If the listing is unexpectedly empty, compare the queries on both pages |
| No filters | The default results listing opens | If it’s empty, look for a hidden restriction or an incorrect query |
What to Look for in the URL
FacetWP uses URL parameters to represent facet state. You don’t need to construct these parameters by hand when using the standard button. Still, it’s useful to check them while testing: after selecting a filter, the URL should reflect that choice, and a second selection should add or change another parameter. If the destination URL is correct but the parameters are missing, go back to the starting page and check that the facet is working with the hidden listing.
Avoid putting specific test URLs in editor instructions while the permalink structure is still changing. Describe the test steps instead. That keeps project documentation from going stale and avoids tying the test to one domain. What matters to visitors is not the internal parameter format: the selected filter should be visible and match the cards.
Test the Empty Results State Separately
An empty listing can be correct. If a visitor selects a rare combination, the page shouldn’t look broken. Set a clear no-results message in Listing Builder or in an appropriate listing output method. It should explain what to do next: remove a filter, choose another city, or use the reset control. Don’t blame the visitor or show FacetWP technical terms on the public page.
Test this case on purpose. Select a combination you know won’t return any posts, confirm that the facets stay visible, and check that resetting them brings the cards back. If the form disappears when the listing is empty, visitors hit a dead end. For most catalogs, it’s better to keep the filtering controls available even when the current listing has no matches.
Ready to launch when: distinct test combinations return predictable cards, the selected state survives a page refresh, and an empty listing gives visitors a clear way to continue.
Usability, Caching, and Speed with a Separate Results Page
FacetWP Submit Button changes the visitor journey, so the WordPress environment affects what happens as well as the add-on settings. The form may be set up correctly, but cached content, overly aggressive script deferral, or competing listings can still make the results look wrong. You don’t need to turn off every optimization in advance. Check the specific page with facets and change only the setting confirmed to be causing a conflict.
Start with an Observable Symptom
When diagnosing a caching issue, start with what you can observe. If the button doesn’t respond at all, check whether the required JavaScript loads and whether deferred script loading is interfering. If the transition works but the options or cards are outdated, compare the page in a private window and after clearing the cache. If unrelated posts suddenly appear on the results page, check whether persistent object caching is being used with a query FacetWP needs to identify and update.
Use particular care with persistent object caching in FacetWP. It can interfere with query detection and reuse, leading to incorrect cards, counts, or pagination. Don’t assume that every cache is incompatible. Start by excluding only the pages with facets or testing on a copy of the site. If an exclusion solves the problem, document it for the project and don’t apply the change across the whole site without a reason.
Re-index After Data Changes
After importing a catalog, changing a facet’s data source, or editing posts in bulk, visitors may see incomplete options or unexpectedly empty results. Re-indexing is the safest first step in these cases. The FacetWP index stores the data needed for fast queries. If the data in WordPress has changed but the index still reflects the old state, the form may lead to the right page but show outdated results.
Give editors a short checklist: check the post in the admin area, make sure the required field or term was saved, run Re-index, clear the page cache, and repeat a test with distinct values. This is more useful than editing shortcodes every time a result looks wrong. Shortcodes usually don’t change when the data changes, so an arbitrary markup edit can introduce another problem.
Keep the Form Predictable on Mobile
On a small screen, Submit Button can make a long results list easier to browse by separating filter selection from the listing. But the button has to remain accessible. Check keyboard focus order, the hit area, line wrapping, and the form state when visitors return from the results page. Don’t hide the button just to achieve a minimalist look. If the form opens in Mobile Flyout, visitors should be able to see how many filters they’ve selected and understand how to get to the cards.
Don’t automatically submit after every choice in a form with several facets. Visitors won’t have time to select a second filter before being sent to the results page. Automatic submission can work for a single choice, such as a radio button or autocomplete selection, when that choice alone clearly determines the destination. For two or more filters, an explicit button usually gives visitors more control and makes the transition clear.
Safe Improvements Without Editing Core Files
Once the basic transition works, you can make the wait feel more responsive. One of the safest changes is to dim the button while facets refresh. This doesn’t change the query or replace the standard redirect behavior. Visitors can see that the form is processing their selection and are less likely to click repeatedly. Add the snippet only if you can actually see a pause after changing a facet on the test site.
Place the code in a child theme or a trusted plugin for custom snippets. Save a working copy before publishing, then test an initial selection, a second selection, and the transition. The code uses a FacetWP event: it adds a class while the refresh is in progress and removes it when the refresh completes.
add_action( 'facetwp_scripts', function() {
?>
<script>
(function($) {
$(document).on('facetwp-refresh', function() {
if (FWP.loaded) {
$('.fwp-submit').addClass('is-waiting');
}
});
$(document).on('facetwp-loaded', function() {
$('.fwp-submit').removeClass('is-waiting');
});
})(jQuery);
</script>
<?php
}, 100 );
Add a small amount of CSS in a supported location in your theme or custom styles:
.fwp-submit.is-waiting {
opacity: 0.6;
pointer-events: none;
}
The check is simple: change a facet and confirm that the button briefly changes appearance, then becomes available again when the refresh is done. If it stays dimmed, remove both snippets and first check that FacetWP’s events are working as expected. Rolling this back doesn’t require changing data or the index because the snippets affect only the button’s wait state.
A Careful Approach to the Enter Key
The add-on can be configured to submit when visitors press Enter. Not every form needs this. Consider it when visitors type in an autocomplete field or expect to confirm a selection from the keyboard. In a multi-field form, don’t intercept Enter without testing: the key may be pressed before the visitor has selected the intended values, leading to empty or overly broad results.
A safe approach is to first confirm that at least one facet has a selection, then let FacetWP process the state before triggering the standard button. This doesn’t replace a visible, accessible button. Keep the button in the layout for mouse and touch users, and to make the next action clear. If the site has no field where visitors would naturally expect to press Enter, don’t add this behavior just to demonstrate it.
Pair a Separate Results Page with Search Analytics
Separating the form from the results makes it easier to analyze the visitor journey, but it doesn’t require sending data to external services. At the site level, you can review which facets visitors choose most often and which combinations return no results. You can do that by comparing visits to the results page with activity in your existing analytics setup, as long as it meets the project’s privacy requirements.
Don’t include sensitive values in reports if the facets represent personal characteristics. First decide which parameters can be analyzed in aggregate. The goal is to improve the categories, identify missing cards, and help visitors find relevant results more quickly, not to collect unnecessary information about them.
Things to Check When Using Page Builders
Elementor, Beaver Builder, and other supported display methods make it convenient to build forms without writing the markup by hand. But they don’t remove the rule about one active listing. A page template, popup panel, and responsive layout shouldn’t contain several active listings controlled by the same facets. If the problem occurs in only one layout, review its sections and compare the widgets in the working and nonworking versions.
When moving a form between templates, move the complete set of connected elements: facets, hidden listing, and button. Copying only the polished facet section can leave visitors able to select options without correctly passing their state to the results page. After each move, repeat all four tests with distinct values instead of checking only the first option.
A practical rule. An improvement is safe if you can disable it by removing one snippet, it doesn’t change the data structure, and rolling it back restores the button’s original behavior.
Why the Transition or Results May Not Work as Expected
When troubleshooting Submit Button, start with the visible symptom and work toward a specific check. Don’t begin by reinstalling add-ons or changing several layers at once. First, save the facet combination that causes the problem, then repeat it in a private window. This helps rule out an old URL, a user session, or scripts that have already loaded.
The Button Opens the Page, but the Selection Isn’t Marked
The most common cause is that the results page doesn’t have a facet with the same internal name, or the facet is connected to a different active listing. Open the results page directly and confirm that the required facets are there. Then make sure the starting form and destination page use the same internal names, rather than two similar facets with different data sources.
Next, compare the queries for the hidden and visible listings. If the first has an extra restriction, the selected state may pass correctly but find no matches in the second listing. The fix is to align the queries, not add the button again. To roll back, restore the last working query and repeat the test with distinct values.
The Facets on the Starting Page Are Empty
Empty options usually point to the facets’ context, not the button. Check that the hidden listing template is present, that the facet has the right data source, and that your test posts have values saved. Then run Re-index. If that doesn’t help, temporarily show the hidden listing on a test copy of the page. If it doesn’t contain the expected posts, the issue is in the template query or the data, not the form’s appearance.
Don’t use more complicated logic to hide the listing until you’ve confirmed that a regular container with display:none works. Start with a setup that’s easy to inspect. After fixing the problem, hide only the listing output, and don’t change the facet’s data source at the same time.
The Results Page Shows Too Many or Too Few Cards
Compare the specific filter combination with your reference test posts. If one filter works and the other doesn’t, check the second facet’s data source and value type. If each filter works on its own but the combined results are unexpected, the two queries probably differ, or the post data isn’t consistent. Also check whether a post has multiple terms, in which case it may correctly appear under more than one filter.
Re-index FacetWP after correcting the data. If visitors still see old results afterward, clear the cache for the page you’re testing and review script optimization settings. Re-enable caching one setting at a time so you can identify what’s interfering without reducing performance across the site unnecessarily.
The Button Doesn’t Respond or Fires Twice
First, check whether the page has two copies of the form, especially in a mobile template or flyout panel. A duplicated widget might create two buttons with the same class or two active listings. Then temporarily disable custom click handlers and any snippets that submit the form automatically. The standard button should work without additional behavior first.
If only the interactivity stopped working after optimization, check deferred JavaScript loading and minification on FacetWP pages. To roll back, exclude the specific page or script from the optimization causing the problem rather than turning off every site-wide feature. Repeat the same test after each change and clear the cache.
The Transition Leads to Empty Results After Caching Is Enabled
This can happen when caching interferes with query detection or serves an outdated state. First, compare the results with the suspected caching layer disabled in a test environment. If the results return, set an exclusion for pages with facets or for the relevant cache group, if your setup supports that rule. If you can’t define a reliable exclusion, ask the system administrator to configure it. Don’t try to hide the problem with arbitrary JavaScript delays.
When to roll back a change. Restore the previous snippet or setting if the basic transition breaks, a facet selection disappears, or you can no longer reproduce the cause of the issue. Get the basic flow working again, then add improvements one at a time.
FacetWP Submit Button Setup FAQ
Does the Starting Page Need a Hidden Listing?
Yes, in the standard setup it provides the context the facets need. Visitors don’t have to see the listing, but the facets need a suitable listing to identify the available values for the selected content.
Can I Use the Same Listing Template on Both Pages?
Yes. This is often the simplest and most reliable option. You can also use different templates if their queries select the same logical set of posts and the results page has just one active filterable listing.
Do I Need to Re-index After Adding the Button?
Adding the button alone doesn’t change the facet data sources. But after creating or changing a facet, importing cards, or editing fields, update the index so the options and results reflect the latest data.
Why Shouldn’t the Form Submit Automatically After Every Selection?
With several facets, automatic submission takes away visitors’ control: they may not have time to choose a second filter. It makes sense only when one unambiguous selection determines the next step and matches what the visitor expects.
Can I Add the Button Through Elementor?
Yes. If the relevant add-on is installed, use the FacetWP Button widget, choose Submit button, and set the Listing Page. The hidden listing and compatible results page are still required by the FacetWP setup.
What Should I Check if Results Don’t Update After the Transition?
Check the destination URL, facet internal names, matching queries, index, and cache. First make sure the results page works on its own, then check the hidden listing on the starting page, and only then troubleshoot the button.
Is the Add-On Right for Every Catalog?
It works best when it’s useful to separate filter selection from browsing results. For a small grid that’s easier to update in place, the standard FacetWP flow is often shorter and clearer.
When FacetWP Submit Button Is a Good Fit
FacetWP Submit Button works well when the starting page should help visitors choose their search criteria and the full listing needs a dedicated page. Build and test the results page first, then connect the facets to it through a compatible hidden listing, set the destination URL, and run tests with distinct values. This gives you more than a working button: it creates a clear foundation for expanding the catalog.
If this setup fits your needs, make a backup, test the form with several data combinations, and then download FacetWP Submit Button to add it to your planned catalog. After installation, hold off on cosmetic changes until you’ve confirmed that state carries over, the listing shows the right posts, and caching works safely.
FacetWP Submit Button Setup Video
This video complements the guide with a product walkthrough. Watch it after completing the basic setup to compare the interface and sequence of steps.


