Elementor Taxonomy Filter Preselected On Page Load

Elementor Taxonomy Filter Preselected On Page Load

Element.How also offers premium tutorials! Check them here:

Table of Contents

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.

Elementor Taxonomy Filter Preselected On Page Load 1

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:

https://templates.element.how/elementor-taxonomy-filters-on-page-load-template/?e-filter-ed66912-variety=people-townships

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:

Elementor Taxonomy Filter Preselected On Page Load 2

Finally, enjoy your Elementor filters prefiltered on page load

I really hope you found this tutorial useful.

Cheers!

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2927 Elements right here:

Checkout the Elementor Addon Finder directly

8 Responses

      1. 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!

  1. 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?

    1. 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!

Leave a Reply