PluginUs.Net - Business Tools for WooCommerce and WordPress

[realize your idea - make your dreams come true]
Botoscope is currently in early access

Support Forum

You need to log-in to create request (topic) to the support

Need help with filter chips, loading text and broken product grid after filtering.

The support doesn work on Saturdays and Sundays, so some Friday requests can be answered on Monday. If you have problems with registration ask help on contact us page please
If you not got email within 24~36 business hours, firstly check your spam box, and if no any email from the support there - back to the forum and read answer here. DO NOT ANSWER ON EMAILS [noreply@pluginus.net] FROM THE FORUM!! Emails are just for your info, all answers should be published only here.
The support doesn work on Saturdays and Sundays, so some Friday requests can be answered on Monday.

Hi,

I have several issues I need help with. Here is my setup for context:

- WordPress + Elementor Pro + WooCommerce
- I have TWO separate pages:
1. A SHOP PAGE at /shop/ (default WooCommerce shop)
2. A PRODUCT LISTING PAGE at /product-category/all/ (a WooCommerce category archive page built via Elementor Theme Builder)
- The [woof] shortcode is placed inside an Elementor Off-Canvas widget on the product listing page
- Category navigation tabs link to individual subcategory pages (e.g. /product-category/chairs-all/, /product-category/sofa-all/ etc.)

---

ISSUE 1: Filter refresh redirects to Shop page instead of staying on Product Listing page

When I apply filters on my product listing page (/product-category/all/) and then refresh the page, I get redirected to my Shop page (/shop/) instead of staying on the product listing page with filters applied. This happens on all subcategory pages too. Is there a way to make [woof] dynamically use the current page URL as the redirect target instead of defaulting to the shop page?

---

ISSUE 2: Active filter chip has a red X button that I cannot override with CSS

When a filter is applied, the active chip shows a red circle X button. I want to remove this completely and replace it with a simple clean text × character using CSS. However despite multiple CSS attempts targeting .woof_remove_ppi, the red X icon persists and cannot be hidden. What is the correct way to remove or replace this icon?

https://imgur.com/k6nqYQZ

---

ISSUE 3: 'Clear All' button has red colour and border that I cannot remove with CSS

The Clear All button appears with a red colour and border by default. I want it to be plain text with no border and a neutral colour (#1B242C). I have tried targeting .woof_reset_search_button and .woof_products_top_panel_content a with CSS but the red styling persists. What is the correct CSS selector to override this?

https://imgur.com/k6nqYQZ

---

ISSUE 4: 'Loading...' overlay appears after filtering and is very slow

After applying or clearing filters, a 'Loading...' overlay appears on the page. Two questions:
1. How can I hide or style this overlay via CSS? (I have tried targeting .woof_overlay, .woof_loading, .blockUI.blockOverlay but none of these work)
2. Is there any way to improve the filter speed? I already have AJAX enabled but the filtering is noticeably slow. Are there any performance settings or recommendations?

https://imgur.com/rXm0WEe

---

ISSUE 5: Product grid layout breaks after filtering or clearing filters

After applying filters OR after clicking Clear All to reset filters, my product grid layout breaks — the gaps between product cards disappear completely and the grid collapses. The layout only returns to normal after a full page refresh. Is this a known conflict with Elementor or custom CSS? How can I prevent the layout from breaking after AJAX filtering?

Product grid before filtering: https://imgur.com/stENAXt
Product grid after filtering: https://imgur.com/M5WaZAb

---

Thank you so much for your help, I really appreciate it!

Hello

Thank you for the detailed report. Let me go through each issue.

ISSUE 1: This is a known behavior when using Elementor Theme Builder for category pages. Please add this snippet to your child theme's functions.php:

add_action('wp_footer', function() {
    echo '<script>
    jQuery(document).ready(function() {
        if (typeof woof_current_page_link !=="undefined") {
            woof_current_page_link = location.protocol +"//" + location.host + location.pathname;
        }
    });
    </script>';
});

This forces HUSKY to always use the current page URL instead of defaulting to the shop page.

ISSUE 2 and ISSUE 3: These are CSS specificity conflicts with your theme. Please try adding !important to your existing CSS rules. If the styles still do not apply, please share a direct link to the page so I can inspect the exact selectors in the browser console and give you the correct ones.

ISSUE 4: The Loading overlay is controlled by WooCommerce's blockUI library, not directly by HUSKY. Regarding speed — the filtering performance depends heavily on the number of products, server response time, and any caching configuration. Please check that you do not have any caching plugin interfering with AJAX requests, and also check HUSKY settings for the lazy load option which can help with performance.

ISSUE 5: Since you are using Elementor with custom grid blocks and complex layout initialization, AJAX filtering is likely to cause layout issues because Elementor's JavaScript does not reinitialize after HUSKY redraws the product grid. The most reliable solution in your case is to switch HUSKY to redirect mode instead of AJAX. In HUSKY settings find the option"Use AJAX" and disable it. This means the page will reload on each filter action, but your grid layout will always render correctly.

Hi Alex,

 

Thank you for the detailed instructions. However for Issue 1, I've plugged the code into functions.php of my child theme but it still doesn't seem to work.
Link: https://benelcomsg.kinsta.cloud/product-category/all/

So if I go into the filters to filter something, click refresh, I end up being redirected to the shop page again.

Thanks!

Hello

I tested this on my end and the snippet is working correctly — after applying a filter and refreshing the page, it stays on the same category page without redirecting to the shop. I recorded a short video showing this, please watch it: https://drive.google.com/file/d/1C1z9UwqwTtRhuFuMluk4iAI2qvjbZ5je/view?usp=sharing

Please try clearing your browser cache and any caching plugin cache, then test again. This is most likely a caching issue ...

 

Hi, thank you for the video and the fix! The redirect issue is resolved now, appreciate it.

However while testing I realised there is actually another issue that I think was the real problem all along — when a filter is applied, the URL becomes something like:

/product-category/all/swoof/some-filter-name/

On this filtered URL, WordPress seems to lose track of which category page it's on. Because of this, Elementor's Archive Title and Archive Description widgets show the wrong information — they display the Shop page title and description ("Shop" /"This is where you can browse products in this store.") instead of the actual product category name and description.

Is there a way to restore the correct category context in $wp_query for these filtered URLs, so that Elementor's archive widgets pick up the right category info?

Also just a heads up — we might upgrade to HUSKY Pro and change the search slug from /swoof/ to something else like /filter/. Would it be possible to write the fix so it works for any slug in that position, not just /swoof/ specifically?

Thank you so much!

Hello

Regarding the Archive Title and Description showing wrong info — there are a couple of things you can try.

First, go to HUSKY settings, open the Advanced tab and enable the option"Disable swoof influence". This option reduces how much HUSKY interacts with the main WP_Query and may resolve the Elementor widget context issue on its own.

If that does not fully solve it, you can also try adding this snippet to your child theme functions.php. It runs after all query processing and restores the product category context so Elementor's Archive Title and Description widgets can pick it up correctly:

add_action('wp', function() {
    global $wp_query;
    // Restore product category context after HUSKY's parse_query resets is_tax
    if (!empty($wp_query->query['product_cat']) AND !$wp_query->is_tax) {
        $term = get_term_by('slug', $wp_query->query['product_cat'], 'product_cat');
        if ($term) {
            $wp_query->is_tax          = true;
            $wp_query->queried_object    = $term;
            $wp_query->queried_object_id = $term->term_id;
        }
    }
}, 999);

This works for any category slug and any filter slug, so if you upgrade to Pro and change /swoof/ to something else it will continue to work without any changes (but will remain it is what tells HUSKY that a filtering is going).

Try the Advanced option first and let us know how it goes.

Welcome!