Help displaying products grouped by category using Loopers

Hi,

I need help setting up a page in the Pro theme that lists all product categories, each with a headline, followed by the products in that category. Specifically:

  • I want to loop through product categories (each category with its own headline).
  • Under each category, I want to loop through and display the products in that category, in a grid layout (4 columns per row: image, title, price).
  • I managed to set up the first Looper for the categories , but I’m having trouble setting up the nested Looper to show only the products from the current category in the loop .

Could you guide me on how to properly configure the nested Looper Consumer (or whatever setup is required) so it filters the products based on the current looped category?

Thanks in advance!

Hi Sebastian,

Thanks for reaching out.
If you want to show the Category Name and the Product just under that, you need to follow the below steps.

  1. Add a Looper Provider to the Column with All Terms and select the Product Categories as taxonomies

image

image

  1. Set the Looper Consumer to that Column.
  2. Use {{dc:term:name}} to show the Term Name in the Text element.
  3. Add a DIV element under it with the Looper Provider set to Query String and add the following Query String.

post_type=product&tax_query%5Btaxonomy%5D=product_cat&tax_query%5Bterms%5D={{dc:term:id}}

  1. Set the Looper Consumer to that DIV element.
  2. And add the {{dc:post::title}} to the Text element to show the post title under the DIV element

image

Hope it helps.
Thanks

Hi, Tristup

Thanks for the solution but now it displays all products (from all categories) under each category, rather than only the products from the current category. From what I see in the your final screenshot, it’s happening to you too.

Looks like the the terms%5D={{dc:term:id}} from the query string has no effect.

Thanks

Thanks for the update.

What happens when you replace the Query String value with the following ?

post_type=product&tax_query[taxonomy]=product_cat&tax_query[terms]={{dc:term:id}}

If this is still not working, please create a test page, then provide the login details in the secure note.

Best regards,