Trying to recreate default woocommerce shop archive layout so I can restyle it

[etah]

Im trying to recreate the default woocommerce shop layouts so i can restyle them using layout builder

The default archive page for my woocommerce shop shows both catagories/subcatogories and products

Attached a screen shot of the default view showing 2 archives and 4 products

I then created a wc -archive layout using the default template and add a condition of shop but now it only shows products and not the categories

I’m sorry I know I’ve asked similar question before but am really stuck on how to display catagories using the layout builder

[friech]

Hi @etahross,

Thank you for writing in, you need to create a new section for the categories, and new Looper Provider type All Terms and Product Categories as taxonomy.

Loopers: Provider Types

Hope it helps,
Cheers!

[etah]

Yes that’s got me closer. I am now getting the category titles to loop in but I cant seem to get the category image that is set up in the product categories to loop in, tried featured image but that didn’t seem to work.

Is it possible to use the thumbnail pic as the featured image as it does in the default woocommerce shop layouts see first image in this post

[prakash_s]

Hello @etahross,

To display the Product category thumbnail you need to go to the Products —>Category —>Edit any category —>Upload the category featured image here.

Since you are using Looper for product category —>You need to add Image element —>Click on the dynamic contact icon—>Term meta—>add “thumbnail_id” in the key. Please have a look at the given screenshot below.

Complete dynamic content code would be like this

{{dc:term:meta key="thumbnail_id"}}

Hope it helps
Thanks

[ruenel]

Hey @etahross,

Is your issue resolved already? Kindly let us know.

Thanks.

[etah]

Hi sorry for the delay in getting back.

Yes I am making progress I now have a section that displays categories.

I now have two sections on the page. One displays products, and one displaying categories.

Is it possible to hide the product section if only categories are set to display and the category section if only products are set to display.

Also is there a way to assign separate pagination to the category section… or do i need a separate layout for both - what is best practice to set this up using layout, I feel like i am guessing, is there a guide specifically for woocomerce setup.

[ruenel]

Hello Lain,

It seems that you are on the right track. You just need to fix the featured images so that it will display properly. With regards to the separate pagination, that is not possible. The pagination will only work to display the product items. It will not work with the categories.

Best Regards.

[etah]

So I’ve changed track a little, I now have a shop page which displays latest products ( i have set this to a count of 8 in theme options) I the added another row that displays products on sale and products featured. The problem i have is that products on sale or featured don’t display if they are above the 8 latest products displayed and are affected by the pagination of the row above. How can i separate the two sections - see above secure note for login details
Thanks

[tristup]

Hi Iain,

The Looper Provider for the Sale and the Featured image needs to be investigated on this. I would suggest you please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[etah]

I am also separating the shop page from category pages by using 2 templates - One for the shop home page and one for the category/tag pages - could that be affecting it - see note

[ruenel]

Hello Lain,

The given credentials do not work for us. Please make sure that the username or password is correct.

Kindly double-check. Thanks.

[etah]

Reset the username and password and tested … please try again.

[ruenel]

Hello Lain,

You have two WC Archive Shop and it is assigned to the shop with the condition:

And you have these conditions:

Only assign the layout that you want to use for your shop and then remove the “Shop” condition if you want that layout to be used for the product category archives.

Hope this makes sense.

[etah]

So that didn’t really answer my initial question, For simplicity sake i have assigned one layout to both shop front and category pages for now
https://csds.flywheelstaging.com/shop/
https://csds.flywheelstaging.com/product-category/csds-gear/brand2/
On the sections CSDS On sale and CSDS Featured - I want to limit the count to 2 (show only 2 items that are on sale and 2 featured items)
at the moment I have set the main column as a looper provider to products with a count of all
then the inner product column is set as a looper consumer which works fine if i set it to “all” but if i set it to 2 all the content disappears.
I know i could probably assign a tag to the items i want featured on sale or featured, but that is another stage for the client to remember.
I know i could increase the number of items displayed in theme options/woocommerce /posts per page displayed from 8 but that would stop pagination working on the top section
Your help is gratefully appreciated.

[ruenel]

Hello Lain,

To assign a layout as your Shop page, you should have this condition:

To assign a layout to your Shop page and to the product category archives, you should have an OR condition:

Both the CSDS On sale and CSDS Featured Looper Providers are incorrect. You are using this:

When you set the Looper Consumer to 2, this means that it will only display two product items returned by the Looper Provider. In your case, nothing will display because the 1st and 2nd product items are not products that are On Sale.

Having to display the product items with the Query Builder does not display the products that are on sale or the featured products. What you should use is the Query String Looper Provider. Kindly check out this thread as @kory gave a more detailed explanation on how you can display the featured products which can also be done to display those products that are really “On Sale”.

• Looper Query String: Featured Products

Hope this makes sense.

[etah]

Thank you very much, I think I understand how it is working, though it is bit more complicated than i was thinking it would be. I’m more a designer than a coder, that’s why i love Theme pro.

One thing i did do was add this code “&posts_per_page=2&orderby=rand&order=asc” to the string so it randomises the two on sale products as it already does with featured… i did notice however is it doesn’t seem to be including products with variants on sale in the mix. Is it possible to include those?

[tristup]

Hi Lain,

Not sure what exactly you are trying to do here by adding the code you mentioned &posts_per_page=2&orderby=rand&order=asc. Can you please elaborate a bit more?

Thanks

[etah]

Hi Tristup. Before i added that code it was only displaying the latest 2 products on sale, by adding that code it now shows a random selection of any 2 products on sale.

But as I said above it isn’t including any products that are on sale that also have variations (only single products that are on sale). and it wasn’t even before i added the code even if that product had a variation and was on sale and was the latest product added.

[ruenel]

Hello Lain,

The Query String: post_type=product&meta_key=_sale_price&meta_value=0&meta_compare=%3E&posts_per_page=2&orderby=rand&order=asc will only display simple products. You would need a more complex Query String to include Variable products. Be advised that this is beyond the scope of our support.

Thank you for your understamding.