I'm create a car post type with ACF and ı'm show cars on a loop grid. But ı must be filtering this car with acf fields (not taxonomies must be work with acf fields data). I have 5 value. Brand, Fuel Type, Transmission Type, Deposit Price and Rent Price (there is be more filter in the future). Price filter must be number slider and this filters must be apply with ajax.

I'm want to just change loop grid query using filters and apply with ajax. so if i choose Fiat brand i want to see just fiat cars in the loop grid without refreshing page.

By the way, if I create a special cars display card, I can show it filtered cars in the field. So if I were to filter without a loop grid, there would be no problem, but I don't want that. What I want is to use the loop grid template that I made responsive for desktop, tablet, mobile devices one by one. As you know, elementor assigns a special id information to everything and assigns css's based on this id. That's why I want elementor to be its own elementor.

So i tried many things. In this time; I'm crate filter section with html/css in function.php and add this filter with elementor html widget. I select one or two brands and ı can see in the debug log current query is correct. (tested on db)

So far, no problem, but right now I can't instantly change this query to the loop grid query. So what I want to do is change the query I see in debug.log to the loop grid query, and show the cars returned from the query on the loop grid.

If you want to see my codes i can send my codes.

I'm create a car post type with ACF and ı'm show cars on a loop grid. But ı must be filtering this car with acf fields (not taxonomies must be work with acf fields data). I have 5 value. Brand, Fuel Type, Transmission Type, Deposit Price and Rent Price (there is be more filter in the future). Price filter must be number slider and this filters must be apply with ajax.

I'm want to just change loop grid query using filters and apply with ajax. so if i choose Fiat brand i want to see just fiat cars in the loop grid without refreshing page.

By the way, if I create a special cars display card, I can show it filtered cars in the field. So if I were to filter without a loop grid, there would be no problem, but I don't want that. What I want is to use the loop grid template that I made responsive for desktop, tablet, mobile devices one by one. As you know, elementor assigns a special id information to everything and assigns css's based on this id. That's why I want elementor to be its own elementor.

So i tried many things. In this time; I'm crate filter section with html/css in function.php and add this filter with elementor html widget. I select one or two brands and ı can see in the debug log current query is correct. (tested on db)

So far, no problem, but right now I can't instantly change this query to the loop grid query. So what I want to do is change the query I see in debug.log to the loop grid query, and show the cars returned from the query on the loop grid.

If you want to see my codes i can send my codes.

• wordpress
• advanced-custom-fields
• elementor

• You should share your code on here. – Howard E Commented Mar 8 at 11:44

1 Answer 1

I couldn't solve this problem as I wanted. In other words, my goal was to change the active query of the loop grid and trigger it with ajax to perform instant filtering without refreshing the page, but I couldn't do it. Because I didn't have enough time.

So the solution I made was as follows.

I ran the query on funciton php using the filter fields and got the data with ajax. In other words, I got the data from the database with Wordpress functions. I got the html vs css codes of the template I prepared to fill the loop grid on my Elementor page (by right-clicking on the page and doing an inspect and getting the codes of a loop item). Then I used these codes to create a vehicle card in function.php.

Thus, when the page is first opened, all the cars come to the loop grid naturally. When I run the filter, I put the car cards prepared in function.php into the container of the loop grid items. Thus, I manually changed the content of the loop grid a little.

Since I didn't have enough time to go into more detail, I solved this process in this way.