Dynamic AJAX Product Filters for WooCommerce includes compatibility support for WooCommerce Blocks and modern block-based themes. This helps the filter work not only with classic WooCommerce shop templates, but also with product grids and product archive layouts built using the WordPress Site Editor, Gutenberg blocks, and WooCommerce block templates.
This documentation explains how the plugin works with WooCommerce product blocks, product template blocks, and pagination blocks.
What Are WooCommerce Blocks?
WooCommerce Blocks allow store owners to build product layouts using the WordPress Block Editor or Site Editor.
Instead of using only classic WooCommerce PHP templates, a store may display products through blocks such as:
- Product Collection
- Product Template
- Product Grid
- Query Loop
- WooCommerce pagination blocks
- Product archive block templates
Dynamic AJAX Product Filters for WooCommerce is designed to detect and update these product areas when filters are applied.
WooCommerce Product Grid and Block Filtering
When a customer applies a filter, the plugin updates the product query and refreshes the product results.
For WooCommerce Blocks, the plugin can apply filter parameters to product grid/block queries so the displayed products match the selected filters.
This means customers can filter products displayed through block-based product layouts, not only traditional WooCommerce shop loops.
Supported filtering behavior may include:
- Category filtering
- Tag filtering
- Attribute filtering
- Price filtering
- Rating filtering
- Brand filtering
- Stock status filtering
- Sale status filtering
- Featured product filtering
- Search/title filtering
- Custom taxonomy filtering
- Custom field filtering
- Sorting and pagination support, depending on the block layout
Product Template Block Support
The plugin includes support for WooCommerce product template blocks.
Product template blocks are commonly used in WooCommerce block themes and full-site editing layouts to render product lists.
To improve detection, the plugin automatically adds a stable class to product template block output:
plugincy-filter-products
This class helps the plugin identify the product container that should be updated after filtering.
Why plugincy-filter-products Matters
AJAX filtering needs to know which section of the page contains the product results.
In classic WooCommerce themes, this is usually the default product loop:
ul.products
In block themes, the product list markup may be different. It may use a div, section, ul, or block-generated wrapper instead of the classic WooCommerce structure.
The plugin adds:
plugincy-filter-products
to make the product area easier to detect across different theme structures.
This helps prevent issues such as:
- Products not updating after filtering
- Filters applying but product results staying unchanged
- Product grids disappearing after AJAX updates
- The wrong section of the page being replaced
- Product results updating in classic templates but not block templates
Pagination Block Support
WooCommerce block themes may use pagination blocks instead of classic WooCommerce pagination.
The plugin includes pagination normalization support for block-based pagination, including WooCommerce pagination blocks and WordPress query pagination blocks.
The plugin can add a stable pagination class:
plugincy-filter-pagination
This helps the plugin detect and update pagination links after filtering.
Why plugincy-filter-pagination Matters
AJAX pagination needs to know which pagination area belongs to the product results.
Classic WooCommerce pagination usually uses:
.woocommerce-pagination
However, block themes may use different markup, such as:
.wp-block-query-pagination
or WooCommerce block pagination wrappers.
The plugin normalizes pagination markup by adding:
plugincy-filter-pagination
This improves compatibility with:
- WooCommerce pagination blocks
- WordPress query pagination blocks
- Product collection pagination
- Product archive block templates
- Themes that customize pagination wrappers
- Pagination lists using
page-numbers - Pagination containers using
nav-links
Recommended Selectors for Block Themes
For classic WooCommerce themes, the default selectors usually work:
Product Selector: ul.products
Pagination Selector: .woocommerce-pagination
For block themes, you may need to use the injected classes:
Product Selector: .plugincy-filter-products
Pagination Selector: .plugincy-filter-pagination
These selectors are often more reliable when the product layout is generated by WooCommerce Blocks or the Site Editor.
When Should You Change Selectors?
Change the product or pagination selector only if the filter does not update the correct area.
You may need to change selectors if:
- You are using a block theme.
- Products are displayed using WooCommerce Blocks.
- The default product selector does not match your layout.
- Filtering works but the product grid does not refresh.
- Pagination reloads the full page instead of working through AJAX.
- Pagination disappears after filtering.
- Your theme uses custom wrappers around WooCommerce blocks.
Product Template Block Example
A block-based product layout may not use the classic WooCommerce ul.products wrapper.
In that case, use:
.plugincy-filter-products
as the product selector.
This helps the plugin locate the product grid generated by the product template block.
Pagination Block Example
If your pagination is generated by a WooCommerce block or Query Pagination block, use:
.plugincy-filter-pagination
as the pagination selector.
This helps AJAX pagination continue working after filters are applied.
Compatibility with Full Site Editing Themes
Full Site Editing themes may control product archive pages through block templates instead of classic WooCommerce template files.
This can affect:
- Product grid markup
- Pagination markup
- Sorting dropdown markup
- Result count markup
- Sidebar/filter placement
The plugin improves compatibility by injecting stable classes into important WooCommerce areas, but some custom block layouts may still require selector adjustments.
Troubleshooting
Filters apply, but the product grid does not update
Change the Product Selector to:
.plugincy-filter-products
Then test the filter again.
Pagination does not work with AJAX
Change the Pagination Selector to:
.plugincy-filter-pagination
Also make sure Pagination via AJAX is enabled from Advanced Settings.
Product results update, but pagination does not update
Check that the pagination block is inside the same product archive layout and is not controlled by another third-party pagination script.
Then use:
.plugincy-filter-pagination
as the pagination selector.
Products disappear after filtering
This usually means the plugin is replacing the wrong section of the page.
Use a more accurate product selector, such as:
.plugincy-filter-products
If the issue continues, inspect the block wrapper and use the most stable parent container for the product grid.
Filtering works in classic shop pages but not in block templates
Your block template may use different product markup than the classic WooCommerce loop.
Use the injected classes:
.plugincy-filter-products
and:
.plugincy-filter-pagination
in Advanced Settings.
Best Practices
Use the default WooCommerce selectors for classic themes.
Use injected Plugincy classes for WooCommerce Blocks or block themes.
Keep the product grid and pagination in the same product archive template whenever possible.
Avoid using multiple product grids on the same page unless each grid has a clear and unique selector.
After changing selectors, test filtering, sorting, pagination, reset button, and active filter chips.
Summary
Dynamic AJAX Product Filters for WooCommerce supports WooCommerce Blocks and block themes by detecting and filtering block-based product queries and normalizing important frontend wrappers.
For block-based layouts, these selectors are recommended:
Product Selector: .plugincy-filter-products
Pagination Selector: .plugincy-filter-pagination
The injected classes help the plugin identify the correct product grid and pagination area, making AJAX filtering more reliable across classic WooCommerce themes, WooCommerce Blocks, and modern block themes.