In this tutorial, you will learn how to have the Elementor taxonomy filter automatically load a specific filter item on page load.
We are going to be using the default URLs Elementor create for this, as they might add the functionality natively at some point, so you will already have the proper URLs in place.
See it working by visiting this page.
To get great looking circle image taxonomy filters like in my demo, see this tutorial: Elementor Horizontal Scroll Menu, Taxonomy, Tabs With Extra Features
Elementor Taxonomy Filter on Page Load Code
The first thing you will need is to add this in a HTML element, on the same page as your taxonomy filter.
Add this code in the HTML element:
<script> /* Please login to get the code * The code will be for the Elementor Taxonomy Filter Preselected On Page Load tutorial * Found at this URL https://element.how/elementor-taxonomy-filter-on-page-load/ */ </script>
Getting the URL for each Elementor Taxonomy Filter
Now you can just go on the front end, click on a filter, and the link in your browser URL bar will automatically update with the URL you need.
It will look like this:
Visiting that URL should now open the proper filter on page load.
On other pages, you can link directly to these URLs as needed.
Improving performance
Having a query string ?xx=xx in the URL will generally results in your servering sending an uncached page to your visitor.
To prevent this (and thus have a faster loading page), add exclusions for your query parameter. It will be unique to your URL, but it's easy to find: everything after the ? but before the first =
So in my case:
https://templates.element.how/elementor-taxonomy-filters-on-page-load-template/?e-filter-ed66912-variety=people-townships
This is the query parameter:
e-filter-ed66912-variety
With WP Rocket (for example), I would go under Advanced Rules > Cache Query String, and enter this there:
Finally, enjoy your Elementor filters prefiltered on page load
I really hope you found this tutorial useful.
Cheers!
8 Responses
Could this also be applied to a multiple gallery with each gallery as a "filter" in the Filter Bar?
Greetings Market!
Not with this tutorial. I might create another one for the Gallery Pro element.
Cheers!
That would be so great! I have a current customer I'd love to implement this for. It feels like it's so close to working for Gallery Pro, but I know nothing about JS (which is why I'm signed up here lol). Thanks for all you do and create!
Hey Market!
Here it is: https://element.how/elementor-gallery-pro-filtered-from-url-on-page-load/
Cheers!
Incredible. Thanks so much!
Welcome!
OK so if I understand the steps correctly it's:
1) Add script to page using HTML widget.
2) Publish.
3) Go to frontend and load the page where you added the script.
4) Use the Taxonomy Widget .
5) The URL should change based on my taxonomy choices.
6) The URL is a direct link to the page with a preselected taxonomy filter.
7) Remove script from page? Or keep script there?
Either way on step 7, what happened was as soon as I clicked on a taxonomy, the page reloaded in a loop about 20 times - it went totally crazy - it messed up my cache, and in the end the resulting URL doesn't work, taxonomy is in default state.
What might I be doing wrong? I double-checked the copied code was correct. I do have 2 taxonomy filters on the page that filter by 2 terms. Is that maybe the issue?
Greetings Martin!
I added my live demo to the tutorial, as well as instructions to improve performance.
I'm not certain about the reload loop though. Probably the JS was running too early. Try changing this line:
}, 600);
to this:
}, 900);
Keep increasing until there is no loop issue.
Cheers!