Ajax Filter widgets

You are here:
Estimated reading time: 5 min

To add filter widgets, access Appearance > Widgets and add them in one of the following sidebars:

  • Shop Sidebar . Plain simple sidebar eg: Amsterdam Demo
  • Filter Panel. Filters will be shown in a side panel that opens on clicking the FILTER button on the top right side of the products eg: London Demo .
  • Filter Top Bar . Will show the filters (as dropdowns) before the product listing eg: Melbourne Demo .
The 3 built-in Sidebar types.

For WordPress’ 5.8+ Block layout here’s a quick screenshot https://d.pr/i/6TqTbV .

All the sidebars above will be shown in the frontend automatically only when they have widgets inside them.

Rey Filters widget types:

  • Filter by Attribute . Displays attributes, styled depending on their attribute type. Read more on Variation Swatches.
  • Filter by Category;
  • Filter by Price;
  • Filter “In Stock” items;
  • Filter “On Sale” products;
  • Filter “Featured” products;
  • Filter by Tags;
  • Filter by Keywords (Search);
  • Filter by Custom fields (Meta data) . How to work with this widget;
  • Filter by custom taxonomy. Used when you use a plugin that uses a custom taxonomy and want to make it available for filters;
  • Active Filters . Displays the active filters that are in use, along with a reset button.

All of the above widgets have the option to either display as a list (and depending on the type, either as colored boxes or buttons) and as dropdowns.

Rey’s built-in widgets have a “Rey Filter” in their title so they can be found searching.

For WordPress’ 5.8+ Block layout here’s a quick screenshot https://d.pr/i/4EqHKj .

WooCommerce built-in filter widgets:

  • Filter Products by Attribute
  • Filter Products by Rating
  • Filter Products by Price
  • Product Categories (not a filter widget but good enough to use)

Customize the functionality and appearance of the filters:

Mobile “Filter” button

By default, this button is shown and will try to open the Shop Sidebar, as an off-canvas panel.

To change which sidebar to open, access Customizer > WooCommerce > Ajax filters and make sure to pick the choice you want eg: https://d.pr/i/6ccCM2 .

Show “Apply filters” button

By default filtering is triggered when a filter item has been chosen. You can change this by showing an “Apply filters” button which will wait the visitor to pick multiple items and then by hitting the button, will show results.

To enable, access Customizer > WooCommerce > Ajax filters and make sure to enable the option eg: https://d.pr/i/9179t6 .

Show or hide a widget for a specific product category

To hide a widget on a specific product category, try editing the Rey Filter widget and in the Advanced tab, locate the Show/Hide option eg: https://d.pr/i/cFeDEY .

How to add filtering widgets into an Elementor built page

Usually filtering widgets are limited to WooCommerce catalog pages, which are auto-generated. Elementor edited pages are not, they’re just pages. This is an important difference between them. So to make possible the use of filtering widgets into an Elementor page, please follow these steps:

1. Enable filtering in Product grid element.

While editing the page in Elementor, you’ll likely end up using the Product Grid element. Make sure to enable the “Page uses filters” option, eg: https://d.pr/i/vL8nnC (you’ll need to enable Transform to Archive option first) .

This will add a meta flag to this page to let it know that it’ll be used as a product catalog and it’s ok to load the filters.

The purpose of this switcher is to prevent some code from running at anytime, thus improving load performance.

2. Use the Sidebar element

First, please access Appearance > Widgets and make sure to add filtering widgets in one of the sidebars positions.

Now back in Elementor, make sure to create a new column, and inside it add the Sidebar element and choose the Sidebar position you added the widgets into.

*In the future i will try to make adding the widgets directly, but at the moment only Sidebar is possible.

If you want to create custom sidebar positions, you could use this php snippet https://d.pr/n/5oZ2rV and register as many sidebar positions as you want.

How to work with Filter by Custom Fields (Meta data)

Access Customizer > WooCommerce > Ajax Filters and at the very bottom please register the queries eg: https://d.pr/i/ncwB2F . You will need to label it and add a meta_key, meta_value and comparison operator.

After you registered the queries, please access Appearance > Widgets and create a new Filter by Custom Fields widget.

You will need to choose which registered queries to display eg: https://d.pr/i/cR4ro5 .

Creating custom sidebars

Please head over to Customizer > WooCommerce > Product catalog – Content and make use of the Custom Sidebars control eg: https://d.pr/i/p8BD5r , which can support multiple sidebars assigned for different categories or attributes and inherit an existing sidebar properties.


Troubleshooting

Sometimes parent categories show 0 results in their counter

This happens because products need to have the parent categories selected as well. For example in this screenshot, https://d.pr/i/CyzhP4 , as you can see Men is also checked.

I tried making this automatic but unfortunately at the moment it’s not doable and it would involve extra queries to determine the parent and child categories which would slow down filtering.

What i propose instead is to make use of this code snippet https://d.pr/n/HHF14l , which can be added into the child theme. This code is executed when a product is saved and it will grab the current selected categories parents and check them.

If you want to force a re-save/update of all products in the store, you can make use of this code here https://d.pr/n/hdt4xU , but it’s very, very, very important to:

  • make a database backup first
  • after adding the code, refresh the backend and wait to load, and then make sure to remove it. This code is only meant to run once because it iterates all products and forces an update. 

Sometimes filtering shows products that don’t have variations existing with a specific attribute

This most likely happens because when the attributes were selected in the product, they were all added, while only just a few are actually used in Variations.

Try to keep only the attributes that will be used eg: https://d.pr/i/M5SZ1m .


Out of stock variations are shown
  • Try accessing Customizer > WooCommerce > Ajax filters and enable Fix Out of stock variables eg: https://d.pr/i/aWf0aI
  • Access WooCommerce > Settings > Products > Inventory and make sure out of stock products are hidden https://d.pr/i/z3R82G .
  • Access WooCommerce > Status > Tools and regenerate lookup tables eg: https://d.pr/i/kucqXE .

Some Out of stock variations are still showing up

Rey has the built-in option to fix Out of stock variables display when filtering (check the previous point). However in case of large stores with lots of products which may contain lots of out of stock variations, i suggest adding this code snippet https://d.pr/n/sgn8DC into the child theme’s functions.php . This will slightly slow down the query, however it will fix the issue.


How to use WordPress’ 5.8 block layout?

Access Rey Theme > Settings > Misc options and enable “Widgets Page – Blocks Layout”.

Code Customisations

Excluding categories from the list

To exclude specific categories from the Categories widget list, please use this code snippet https://d.pr/n/87QZYC and make sure to modify the categories IDs array.

Excluding “uncategorized” category from the list

To exclude the “Uncategorized” category from the widget list, please use this code snippet https://d.pr/n/1ngsMs , without any extra changes.

When inside a top level category, hide sibling parents

When in a top level category, if you need to hide the sibling top level categories, try using this php snippet https://d.pr/n/sv0CeP .

Excluding specific attributes from the list

If you want to excclude a specific attribute from the list, please copy this code snippet https://d.pr/n/aUnfwS and paste it into the child theme’s functions.php .

Inside it, please adjust the attribute taxonomy slug eg: “pa_color”. Usually it’s “pa_” + the_attr_name .

Also, make sure to adjust the terms (attribute) ids array.

Was this article helpful?
Dislike 0
Views: 3027

16 Replies to “Ajax Filter widgets”

  1. dianam

    Hello, how can I change the filter panel header “RESET FILTERS”?

    Thank you!

    1. mariushoria[ Post Author ]

      Hey Diana!

      There isn’t any option, nor the text has any hooks on it to be edited. So the most basic and fastest solution is to use Loco Translate plugin, scan Rey Core plugin and search & edit the “RESET FILTERS” text.

      Hope it helps!
      Marius

  2. Jan

    Hi!

    I am trying to add to add filter for sizes in my Shop Sidebar. When I inspect the page, I can see the title is there but it is hidden by style.css.
    I have the variations set properly and they are displaying well in the product pages. Why cannot I get the filter in my side panel working? Is it because I need pro version of swatches plugin after all?

    Site is https://wordpress-544040-1742860.cloudwaysapps.com/ but will be moved to rovimoda.cz soon.

    Thank you!

    1. mariushoria[ Post Author ]

      Hi Jan,

      No, the pro version of the swatches plugin is not needed for this purpose. I may need to take a closer look at how the attributes and variations are added. Please try creating a temporary admin account for me. Thanks!!

      1. Jan

        Is the ticketing support system ok? I logged a ticket 2nd time. Once about a monh ago – got no reply, no ticket number. Now I logged a new one, still confirmation of the ticket creation.

  3. Zain Alam

    Hi!

    my client purchased “Rey Theme” and I’m creating a website for my client but the problem is,

    1-> How can I create a sidebar like this https://prnt.sc/100ch1t also when I’ll click on the filter then the filter will show. currently, it shows like this https://prnt.sc/100crq7

    2-> how can I add “Paypal Checkout” and “Recent Viewed” option in the cart like this https://prnt.sc/100cjxz

    3-> I want my product page to look like this one https://prnt.sc/100clz9 but right now it shows like this https://prnt.sc/100cmjr

    Please help me to solve these problems……………………………..

    1. mariushoria[ Post Author ]

      Hey there!

      Let’s see:

      1) Try accessing Appearance > Widgets and place the filtering widgets into the Shop Sidebar eg: https://d.pr/i/yY9pIG . Afterwards access Customizer > WooCommerce > Product catalog – Layout and make sure the Sidebar is placed on the left side eg: https://d.pr/i/JmG4ss .

      2) A recent viewed option is not available, but i just love the idea. I will try to prioritize it in the upcoming update, but i can’t make any exact promise as i’m struggling with some tasks. Onto the Paypal Checkout, you will need to use a plugin such as Stripe or Paypal Express Checkout to implement it.

      3) For the Paypal, please check 2) . For the Buy Now button, it’s only possible through code. Try adding this php code from here https://d.pr/n/CWbFQl into the child theme’s functions.php .

      One request please, try using https://support.reytheme.com/new/ to create a new ticket so i can verify the purchase and also to manage tickets better.

      Thanks!
      Marius

      1. Zain Alam

        Hi!

        I created a ticket to get support but no one replied to me, can please check it?

        And please notify me also to my email.

        Please delete this comment after reading this.

        Thank you

  4. Zain Alam

    Thank you so much for your response.

  5. Niklas Poulsen

    Hi, How to use the sidebar – responsive? So the filters for shop page will be working correctly in mobile view?

    1. mariushoria[ Post Author ]

      Hi Niklas,

      Problems usually occur when trying to publish filtering widgets in multiple Sidebars. Try accessing Customizer > WooCommerce > Ajax Filters eg: https://d.pr/i/Kqzkvm and make sure to pick the sidebar that you want to be opened by the filtering button. Hope it helps!

      Marius

  6. Kuba

    Hi,
    1. Is it possible to add option field to product tag filter widget to choose tags to be used in a filter, instead of using all product tags?

    2. I would like to make few tag filters i.e.:
    – filter 1 with tagA, tagB, tagC
    – filter 2 with tagD, tagE
    to select products which have f.e. tagB AND tagD

    I realize it is programming related but maybe You would give me some hint related 1 or 2, or both 🙂

    thanks in advance

  7. Carolina Graterol

    Hello,
    Please, how can I disable the button REVIEW YOUR ORDER from Order received after checkout from REy page?
    I am not creating an account for my customers, they can see the order on ¨the ORDER received¨. I want to keep the continue shopping button only.

    1. Marius H[ Post Author ]

      Hi Carolina,

      Please try adding this php snippet from here https://d.pr/n/zsuGxf into the child theme’s functions.php file.

  8. Shimon Yehonatan Shavit

    Hi! is it possible to show in a product archive only the categories that are relevant to the product in the specific archive?

    1. Marius H[ Post Author ]

      Hey,

      Yes, it should be possible. There’s a Structure list option in the Cat. widget eg: https://d.pr/i/eJbN50 . Try switching to Show ancestors and current sub-cat. Hope it helps!

Join the conversation