Reference
Plugin Settings AJAX and Loading Reference
Global AJAX selectors, loader, overlay, debounce, and loading strategy settings.
Search all docs pages.
This Reference page covers the AJAX tab in Plugin Settings. It is a manual draft for the full option Reference, not a standalone public release of the whole Reference set.
AJAX settings are integration-sensitive. Selector changes should be tested on the actual theme or page-builder output because they determine which parts of the page are replaced during filtering.
Selectors
Products Container Selector
- Public label: Products Container Selector
- Location: Plugin Settings > AJAX > Selectors
- Type: Text
- Default value:
.products - Shown when: Always.
- Availability: Free
- What it does: Defines the CSS selector for the main product-list container that AJAX filtering should replace.
- When to use: Change it when the theme or page builder uses a different wrapper around the product grid.
- Side effects / performance notes: A wrong selector can prevent product updates or replace the wrong part of the page.
- Related options: Product Container Selector, Pagination Selector, Theme Compatibility Mode.
Product Container Selector
- Public label: Product Container Selector
- Location: Plugin Settings > AJAX > Selectors
- Type: Text
- Default value:
.product - Shown when: Always.
- Availability: Free
- What it does: Defines the CSS selector for individual product items inside the product list.
- When to use: Change it when the theme uses custom product-card markup.
- Side effects / performance notes: Incorrect product-item selectors can affect animations, counts, and placeholder behavior.
- Related options: Products Container Selector, Show Placeholder While Loading, Product Card Template.
Pagination Selector
- Public label: Pagination Selector
- Location: Plugin Settings > AJAX > Selectors
- Type: Text
- Default value:
.woocommerce-pagination - Shown when: Always.
- Availability: Free
- What it does: Defines the CSS selector for pagination that should update with filtered results.
- When to use: Change it when the theme customizes WooCommerce pagination markup.
- Side effects / performance notes: A wrong selector can leave stale pagination after filtering.
- Related options: Products Container Selector, Result Count Selector, Browser Back Button.
Result Count Selector
- Public label: Result Count Selector
- Location: Plugin Settings > AJAX > Selectors
- Type: Text
- Default value:
.woocommerce-result-count - Shown when: Always.
- Availability: Free
- What it does: Defines the CSS selector for the result-count element updated by AJAX filtering.
- When to use: Change it when the theme moves or renames the WooCommerce result count element.
- Side effects / performance notes: Incorrect selectors can leave stale count text even when products update correctly.
- Related options: Pagination Selector, Show Counts in Filters, Count Display After Filtering.
OrderBy Selector
- Public label: OrderBy Selector
- Location: Plugin Settings > AJAX > Selectors
- Type: Text
- Default value:
.orderby - Shown when: Always.
- Availability: Free
- What it does: Defines the CSS selector for the product ordering control that should stay synchronized with AJAX results.
- When to use: Change it when the theme or builder customizes the sort dropdown.
- Side effects / performance notes: A wrong selector can break sorting after filters update the product list.
- Related options: Disable Plugin Sorting, Sort By Title After Filtering, Products Container Selector.
Loading Feedback
Loader Type
- Public label: Loader Type
- Location: Plugin Settings > AJAX > Loading Feedback
- Type: Select
- Default value:
Spinner / Dots / Bars / Skeleton / Custom - Shown when: Always.
- Availability: Free
- What it does: Chooses the global loader style used during AJAX filtering.
- When to use: Use a simple loader for general catalogs, skeleton when layout stability matters, or custom when the storefront has a branded loader.
- Side effects / performance notes: Advanced loader values can require extra styling or availability confirmation in the active product package.
- Related options: Custom Loader, Overlay Background, Enable Loader.
Custom Loader
- Public label: Custom Loader
- Location: Plugin Settings > AJAX > Loading Feedback
- Type: Text
- Default value: None
- Shown when: Loader Type is Custom.
- Availability: Pro
- What it does: Defines the custom loader content used by AJAX filtering.
- When to use: Use it when the store has a branded loading animation or custom loading markup.
- Side effects / performance notes: Custom loader content should be lightweight and tested for layout stability and accessibility.
- Related options: Loader Type, Enable Loader, Custom CSS.
Overlay Background
- Public label: Overlay Background
- Location: Plugin Settings > AJAX > Loading Feedback
- Type: Color picker with alpha
- Default value:
rgba(255,255,255,0.7) - Shown when: Always.
- Availability: Free
- What it does: Sets the overlay color used during AJAX product updates.
- When to use: Adjust it when the default overlay is too faint or too strong for the theme.
- Side effects / performance notes: Heavy overlays can obscure products; very light overlays may not communicate that loading is in progress.
- Related options: Enable Overlay, Wait Cursor During AJAX, Don't Remove Products While Loading.
AJAX Debounce
- Public label: AJAX Debounce
- Location: Plugin Settings > AJAX > Loading Feedback
- Type: Number
- Default value:
300 ms - Shown when: Always.
- Availability: Free
- What it does: Sets the delay before AJAX filtering runs after a change.
- When to use: Increase it when rapid selections create too many requests, or reduce it when filtering feels sluggish.
- Side effects / performance notes: Too little debounce can overload large catalogs; too much debounce can make the UI feel delayed.
- Related options: Update Products on Selection, AJAX Timeout, Show Live Suggestions.
Wait Cursor During AJAX
- Public label: Wait Cursor During AJAX
- Location: Plugin Settings > AJAX > Loading Feedback
- Type: Toggle
- Default value: None
- Shown when: Always.
- Availability: Free
- What it does: Shows a wait cursor while AJAX filtering is running.
- When to use: Use it when pointer users need extra feedback that the page is busy.
- Side effects / performance notes: Cursor changes do not help touch users, so pair them with visible loaders or overlays.
- Related options: Loader Type, Overlay Background, Enable Loader.
Loading Strategy
Filter Loading Strategy
- Public label: Filter Loading Strategy
- Location: Plugin Settings > AJAX > Loading Strategy
- Type: Select
- Default value:
Standard / Deferred / On-demand - Shown when: Always.
- Availability: Free
- What it does: Chooses when filter assets or filter content load.
- When to use: Use Standard for predictable behavior, Deferred or On-demand when initial page performance needs improvement.
- Side effects / performance notes: Deferred loading can delay filter availability and must be tested with page-builder layouts.
- Related options: Show Placeholder While Loading, Minify JS/CSS, Cache Filter Results.
Show Placeholder While Loading
- Public label: Show Placeholder While Loading
- Location: Plugin Settings > AJAX > Loading Strategy
- Type: Toggle
- Default value: Off
- Shown when: Filter Loading Strategy is Deferred or On-demand.
- Availability: Free
- What it does: Shows a placeholder while filters or products are loading.
- When to use: Use it when deferred content would otherwise leave a blank area.
- Side effects / performance notes: Placeholder dimensions should match the final layout to avoid page jumps.
- Related options: Filter Loading Strategy, Loader Type, Product Container Selector.