CS Forms, WC Archive and filtering not working

Support
#1

Hi there,
I’ve read as many posts as I can find on this forum about CS Forms and being able to filter products that are provided through a WC Archive layout template. I have

  • created the archive layout,
  • added the Form element with method set to GET and AJAX turned on along with “auto send changes”
  • added the correct change selector for the results row area,
  • made sure there is no looper provider working in the results row, only the single column acts as a consumer.
  • Added a search text input form element with the name “s”
  • Added a checklist item with the name “product_cat” and the items showing {{term.name}} / {{term.slug}} where appropriate.

The search bar returns the correct products as you’d hope but if any filters are applied (either with a search term or without) the form shows the lottie loader animation but the product entries do not change. I have tried lots of different combinations trying to get this to work - I’ve even tried creating a standard looper provider/consumer “all products” section with form on another page and the filtering on that page works fine, but there’s no pagination so that idea’s off the table.

If a staff member or dev could get in touch I’d be really grateful, I couldn’t find any proper solutions on this forum to this particular issue so here’s hoping we can get something fixed! Many thanks in advance,

#2

Hey Jonathan,

Here’s the reason why it fails natively on an Archive Layout

WooCommerce archive templates rely strictly on WordPress’s Main Query.

WordPress does not natively listen to ?product_cat=slug URL parameters on an archive page to filter products. WordPress only uses product_cat in URLs for taxonomy permalinks (e.g., /product-category/clothing/), not as a query string filter for archive results. That is why the AJAX call triggers, but the products never change.

The Native Solution: Use the Standard Page Setup (With Native Pagination)

The reason you abandoned the standard page setup was the lack of pagination. However, Cornerstone supports native pagination on standard Looper Providers without any custom code.

Here is how to set it up natively:

1. The Looper Provider (Row / Section)

  • Set the Provider Type to Query Builder:
    • Type: Products
    • Count: Number of products per page (e.g. 12)
  • Enable AJAX Pagination / Dynamic Querying if prompted, or use Cornerstone’s built-in dynamic parameters.

2. The Pagination Element

Cornerstone can natively paginate custom looper queries:

  • Add the Pagination element directly below your results row.
  • Under the Pagination element’s settings:
    • Set the Pagination Type to Looper Provider.
    • Point or associate it with the Provider row/section containing your products.

3. The CS Form Checklist

  • In your Checklist element, use:
    • Name: Set this to a custom parameter (e.g. product_cat or category).
  • In your Query Builder / Looper Provider:
    • In the Taxonomy filter section of the Query Builder, you can bind the taxonomy term directly to your form input using Dynamic Content:
      • {{dc:query:query_var key="product_cat"}} (or {{dc:url:param key="product_cat"}}).

When the form submits via GET and AJAX, it updates the URL parameters, the Dynamic Content reads the selected category natively into the Query Builder, and the built-in Looper Pagination updates the page count and controls.

#3

Hi, thanks for getting back to me - I’ve explored the pagination idea on a standard page but neither the ‘post pagination’ or ‘product pagination’ elements appear within the results grid on a live page. I’ve also searched all the settings for ‘pagination’ elements and couldn’t find anywhere to apply a pagination setting to looper provider. Any further insight into this would be hugely appreciated! Thanks again.

#4

Hey Jonathan,

Can you try out WooCommerce Archive instead of a regular page?

Thanks.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.