Dynamic Content: category list and featured category image

Hey there,

I’m stocking in two problems in myLayout project for a online shop.

  1. When I do an archive Lyout for a specific product Category in the Layout Bulider, how can I display all the products in a list ramaining to this category?

  2. Is there a string for dynamic Images to show up the Category Foto of the current woo categry?

Thank you for helping out

Hello @ArtOfSpring,

Thanks for writing in!

1.) You will need to create a WC Archive layout. It must be the WC Archive layout and not just the Archive layout. You will only need to have a Looper Consumer in the WC Archive layout so that the pagination will work. You can make use of the WC Archive template available in the Template Manager or in the Design Cloud as your base reference.

2.) You can use the dynamic content {{dc:term:meta key="thumbnail_id"}} as the dynamic image source to display the Product Category Image.

Kindly let us know how it goes.

Hello @ruenel,

thank you for helping me out .

  1. I took now the WC-Archive bt don’t realize the difference between both archive types. I stil don’t now how to odisplay every Product of the category below the Image. Wich Element can do this task?

  2. This Works out fine thanks!

Thank you for your help

Best,

Hendrik

Hello Hendrik,

You can use the Terms (Cloud) element for example and then modify the Looper Provider switching from All Terms to “Current Terms” and also the Taxonomy from categories to product categories.

By the way, you need to run Looper Consumer in your WC archive layout so that you can display the products. I have made a demo in your layout.

Please check your layout now.

Hello @ruenel,

thank you for helping out.
Your Dem shows all the products of the category now bt it’s not possible for me to bulit the same thing using the Term (cloud). When I use this Element it just shows me some Bubbles with all categories and the number of Products including this category.
But I want to build the Same as you did that I just see every product int the category displayed on he side.
How does this works?

Thank you for your help.

Hendrik

Is it that I have to put te Row on and paste in the this code {{dc:post:permalink}} to display all products?
Another Question: Wich task has the container in your Demo. Can I do the Product List also without it?

Best wishes,

Hello @ArtOfSpring,

To display the Product Category you need to follow these steps.

  1. Add the element Terms element
    Test-Page-Builder-Pro (33)
  2. Click on the List Items
    Test-Page-Builder-Pro (34)
  3. Set the Looper Provider as Current Posts Terms and Taxonomy as Product Categories

  1. Edit the styling as per your design.

Hope it helps
Thanks

1 Like

Hi,

that’s what I told you. When I do this I don’t see all the Products of a specific category.
I just see this:


But I need to display all the products of a secific categroy

Thanks

Best,

Hello @ArtOfSpring,

I checked your layout it seems that you can see the product by category on the separate category archive page. At the moment your layout is been assigned for a specific category only. You need to change the assignment condition like this to render this layout for all the categories and shop pages as well. You remove any condition from here as well.


If you assign the layout like the given above condition you can be able to render this layout for all the product categories where you can see the product of a specific product category.
EG: https://your_dmain_name.co/produkt-kategorie/your_product_category_name/

Now if you want to display any specific category product on the product category archive page with the current product category products in that case you need to run the Looper.

  1. Add one more section or Row/column
  2. Run the Looper
  3. Set the Looper Provider as Query Builder
  4. Select the Post type as Product
  5. Select the Taxonomy as your product category name.

Tesxproduct-Layout-Builder-Pro (10)

Hope it helps
Thanks

1 Like

Hey guys,

thank you so far for your help. I guess now it workes out more or less.
But this brings me to a new issue. When I just want to show 2 Product for example and the rest in other pages the user can go by using pagination it’s not working.
The pagination Element is not connecting with the posts/ articles. We had the prblem in the past too and it seems that this problem is still there in the PRO theme.

Now i wanted to integrate an Demo Tamplate where the pagination is already working but it do not work out neather. Can you check it for me where is the Problem?
I integrated it on this archive:

Hello @ArtOfSpring,

You do not need to run a Looper Consumer in an archive layout because the archive layout will just use the default WordPress loop. The pagination will only work if you do not have a Looper Provider in your archive layout.

Also, the pagination does not work with the Item number option in the Looper Consumer.
Screen Shot 2022-04-18 at 8.07.43 AM

The pagination works with the total number of items set in Cornerstone > Theme Options > WooCommerce > Post per Page which the default value is 12.

This means that if in a particular category there are more than 10 items, you will expect to see the pagination at the bottom. If you only have less than 10 items, the pagination will not display.

In your Solar category archive, there are only 5 items. The first one is displayed as the hero item:

The rest of the 4 items will be displayed at the bottom. Now, if you want to enable the pagination, you will have to go to Cornerstone > Theme Options > WooCommerce > Post per Page and set it to 3 so that the pagination will display.

Hope this makes sense.

1 Like

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