Filter products with Rey’s widgets

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 .

For WordPress’ 5.8+ Block layout here’s a quick screenshot screenshot .

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.

For WordPress’ 5.8+ Block layout here’s a quick screenshot screenshot .

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)

Modify 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 Settings › WooCommerce › Features › Product Filters and make sure to pick the choice you want eg: screenshot .

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 Settings › WooCommerce › Features › Product Filters and make sure to enable the option eg: screenshot .

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: screenshot .

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: screenshot (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 below and register as many sidebar positions as you want.

add_action( 'widgets_init', function(){
	$sidebars = [
		'custom-sidebar-1' => 'Custom Sidebar 1',
		'custom-sidebar-2' => 'Custom Sidebar 2',
	];
	foreach ($sidebars as $id => $title) {
		register_sidebar( [
			'name'          => $title,
			'id'            => $id,
			'description'   => esc_html__('This sidebar will be used for different purposes.' , '@@textdomain'),
			'before_widget' => '<section id="%1$s" class="widget %2$s">',
			'after_widget'  => '</section>',
			'before_title'  => '<h3 class="widget-title">',
			'after_title'   => '</h3>',
		] );
	}
} );

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

Access Settings › WooCommerce › Features › Product Filters and at the very bottom please register the queries eg: screenshot . You will need to label it and add a meta_key, meta_value and comparison operator. This is needed for security purposes.

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: screenshot .

Creating custom sidebars

Please head over to Settings › WooCommerce › Catalog › Grid Components › Sidebar and make use of the Custom Sidebars control eg: screenshot, which can support multiple sidebars assigned for different categories or attributes and inherit an existing sidebar properties.

Renaming URL parameters for friendly readability

Starting with Rey 2.7.0 some of Rey’s filtering widgets have new controls where you can specify if you want to rename the default filtering key, to something custom. Also, another feature for ID based filtering, is to choose wether to filter by slug.

The new options can be found under the Advanced tab in their settings ex: screenshot .

The supported widgets at the moment are: Filter by Category, Filter by Attributes, Filter by Taxonomy and Filter by Custom Fields.

Troubleshooting

Product attribute filtering performs weird or doesn’t show proper results.

Starting with WooCommerce 6.0, there’s a new database table which stores an optimised format of the products attributes.

This technique brings more performance to the attributes filtering, however sometimes it can be unstable and requires periodic Regeneration in WooCommerce > Status > Tools > Regenerate lookup tables eg: screenshot .

So to troubleshoot this problem, first trying to Regenerate the lookup tables as described above.

Or an alternative is to try enabling or disabling it in WooCommerce, access WooCommerce > Settings > Products > Advanced, ex screenshot . Some stores have this setting enabled, some don’t so it’s best to test in both cases.

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, screenshot , 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 below , 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.

add_action( 'set_object_terms', function ( $object_id, $terms, $tt_ids, $taxonomy )
{
    // Lets make sure we run this only once
    remove_action( current_action(), __FUNCTION__ );
    // Lets only target the category taxonomy, if not, lets bail
    if ( 'product_cat' !== $taxonomy )
        return;
    // Make sure we have terms to avoid bugs
    if ( !$tt_ids )
        return;
    // Get all the terms already assinged to the post-
    $post_terms = get_the_terms( $object_id, $taxonomy );
    if ( $post_terms ) {
        $post_term_ids = wp_list_pluck( $post_terms, 'term_id' );
        // Bail if $post_term_ids === $tt_ids
        if ( $post_term_ids === $tt_ids )
            return;
    }
    // We are busy with the category taxonomy, continue to execute
    $parent_ids = [];
    // Lets loop through the terms and get their parents
    foreach ( $tt_ids as $term ) {
        // Get the term object
        $term_object = get_term_by( 'id', $term, $taxonomy );
        // If top level term, just continue to the next one
        if ( 0 ===  $term_object->parent )
            continue;
        // Our term is not top level, save the parent term in an array
        $parent_ids[] = $term_object->parent;
    }
    // Make sure we have parent terms, if not, bail
    if ( !$parent_ids )
        return;
    // Make sure we do not have duplicate parent term ID's, if so, remove duplicates
    $parent_ids = array_unique( $parent_ids );
    // Make sure that our parent id's not in the $terms array, if so, remove them
    $parent_ids = array_diff( $parent_ids, $tt_ids );
    // Make sure we still have parent ID's left
    if ( !$parent_ids )
        return;
    // Lets add our parent terms to the object's other terms
    wp_set_object_terms( $object_id, $parent_ids, $taxonomy, true );
}, 10, 4 );

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

add_action( 'wp_loaded', function() {
    
	$args = array(
        'post_type' => 'product',
        'numberposts' => -1
    );
    $all_products = get_posts($args);
    foreach ($all_products as $single_product){
        $single_product->post_title = $single_product->post_title . '';
        wp_update_post( $single_product );
    }
} );

• 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: screenshot .

Out of stock variations are shown

• Access WooCommerce > Settings > Products > Inventory and make sure Out of stock products are hidden screenshot .
• Access WooCommerce > Status > Tools and regenerate lookup tables eg: screenshot . This will refresh the data stored in Woo’s lookup DB tables.

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 below and make sure to modify the categories IDs array.

add_filter('reycore/ajaxfilters/terms_args', function($parent_args, $args){
	if( $parent_args['taxonomy'] === 'product_cat'){
		// categories IDs inside the array
		$parent_args['exclude'] = [ 19, 24 ];
	}
	return $parent_args;
}, 10, 2);

Excluding “uncategorized” category from the list

To exclude the “Uncategorized” category from the widget list, please use this code snippet below , without any extra changes.

add_filter('reycore/ajaxfilters/terms_args', function($parent_args, $args){
	if( $parent_args['taxonomy'] === 'product_cat'){
		if( $uncategorized = get_option( 'default_product_cat' ) ){
			$parent_args['exclude'] = (array) $uncategorized;
		}
	}
	return $parent_args;
}, 10, 2);

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 below .

add_filter('reycore/ajaxfilters/terms_args', function($args){
	if( $args['taxonomy'] === 'product_cat' && is_tax('product_cat') ){
		$id = get_queried_object_id();
		$ancestors = get_ancestors($id, 'product_cat');
		if( empty($ancestors) ){
			$args['parent'] = $id;
		}
		else {
			$args['parent'] = $ancestors[0];
		}
	}
	return $args;
});

Excluding specific attributes from the list

If you want to excclude a specific attribute from the list, please copy this code snippet below and paste it into the child theme’s functions.php .

add_filter('reycore/ajaxfilters/terms_args', function($args){
	// will check if the attribute is set for Color
	if( $args['taxonomy'] === 'pa_color'){
		// terms IDs inside the array
		$args['exclude'] = [ 19, 24 ];
	}
	return $args;
});

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.