Quote from Pablo Borysenco on October 8, 2025, 19:12

Hello

To be compatible with Ajax mode, the product template must have standard hooks: woocommerce_before_shop_loop  woocommerce_after_shop_loop

Quote from erennnn on October 9, 2025, 19:48

Dear HUSKY Support Team,

Thank you for your guidance. I have successfully added the woocommerce_before_shop_loop and woocommerce_after_shop_loop hooks around my Elementor Loop Grid widget.

However, I am still facing a critical issue. When the AJAX filter is used for the first time, it correctly replaces my custom Elementor Loop Grid with the default WooCommerce product template. This results in an unstyled list of products appearing above my original grid.

Crucially, after this default product list is loaded, the filter stops working. Any subsequent filter selections do not update this new list or the original one. Both the filter and the newly loaded products become unresponsive.

I have also tried wrapping my Loop Grid in a container with the standard WooCommerce CSS class products, but the issue remains.

My question is: How can I ensure that the HUSKY AJAX results are rendered using my custom Elementor Loop Grid template, and not the theme's default archive-product.php template?

Is there a specific setting, function, or JavaScript event I need to use to force HUSKY to re-render the Elementor widget and keep the AJAX functionality alive after the first filter?

Thank you for your help.

Best regards,

Zaid

Quote from Pablo Borysenco on October 10, 2025, 21:19

Hello Zaid

Can you drop me exact link to the issue?

What plugin version number  are you using?

Our plugin, during an AJAX request, cuts out what was between these two hooks and inserts the current product template.

At this stage, you need to assign your elementor as a product template. I'm not sure, but it seems like it can be done easily with Elementor Pro.

If you have a different version of Elementor, try to solve this by overriding templates:

add_filter('template_include', function($template) {
if (is_shop() || is_product_taxonomy()) {
$new_template = get_stylesheet_directory() . '/archive-product-elementor.php';
if (file_exists($new_template)) {
return $new_template;
}
}
return $template;
});

OR  use the shortcode in the previous code

OR you can use this hook - https://products-filter.com/woof_template_part  - But this is more suitable for custom templates than for implementing existing ones.

After this, a problem with initializing JS scripts in the template may arise - https://products-filter.com/actions-ajax-filtering-done

My recommendation is to make a custom template, it might be easier to implement in Ajax search

Quote from erennnn on October 15, 2025, 23:34

Hello Pablo,

Thank you for your quick and detailed response. I truly appreciate your help.

To answer your questions:

• Plugin Version: I am using HUSKY - Products Filter Professional for WooCommerce v.1.3.7.1.

• Link to the Issue: You can see the problem live on my shop page here: https://ulockey.com/shop/

Let me re-explain the exact situation to be perfectly clear:

My goal is to use your excellent HUSKY plugin for AJAX filtering alongside Elementor Pro's native Loop Grid widget. The Loop Grid is essential to my design because it allows me to use a custom-built Loop Item template for my product cards, which is a core part of my site's unique aesthetic.

As you suggested, I have already added the woocommerce_before_shop_loop and woocommerce_after_shop_loop hooks around my Elementor Loop Grid widget.

The problem, as you correctly guessed, is that when an AJAX filter is used, HUSKY is replacing the content between those hooks with the theme's default WooCommerce product template, not my custom Elementor Loop Grid. This breaks the design and also breaks any further AJAX filtering.

Based on your last message, my core question is this:

How can I tell the HUSKY plugin to use my existing Elementor Loop Grid (and its custom Loop Item template) as the "product template" for its AJAX rendering?

Thank you again for your time and expert guidance. I look forward to your advice on how to correctly assign my Elementor widget as the AJAX template.

Best regards,

Zaid

Quote from Alex Dovlatov on October 16, 2025, 12:42

Hello Zaid

Problem of AJAX filtering is compatibility with templates, its doesn work well, because of redrawing and javascript actions which should be applied to the template element, I see here in your case only one way - redirection mode which works fine https://ulockey.com/shop/swoof1/genre-casual/ - absolutely all found and layout is good.

But I see you are developer, and if you are insist you can make custom work for AJAX request https://share.pluginus.net/image/i20251016133239.png - you need to find this code in HUSKY js, then by javascript take link which assembled after and do your own AJAX request, on the server where should be applied use function https://www.php.net/manual/en/function.file-get-contents.php and take data from link which you got using AJAX, https://ulockey.com/shop/swoof1/product-type-subscriptions/instock/ for example this one, you will get exact page which should be get ib redirection mode, but user still see ajax query, then using lib DOMDocument parse it for products block and back it to the js, which will replace ptoduct block for the customer, here is code example on te backend:

$html = file_get_contents('https://ulockey.com/shop/swoof1/product-type-subscriptions/instock/');

$dom = new DOMDocument();
libxml_use_internal_errors(true);
$dom->loadHTML($html);
libxml_clear_errors();

$xpath = new DOMXPath($dom);

$nodes = $xpath->query('//div[contains(@class, "elementor-widget-container-CUSTOM")]');

$result = '';

foreach ($nodes as $node) {
$result .= $dom->saveHTML($node);
}

echo $result;
exit;