[Closed] How to create a Woocommerce sub-category sidebar in Woocommerce Product Archive

[Author]

Posts

[KeithM7209]

Tell us what you are trying to do?
I am using the Toolset Woocommerce Views plugin to create my Woocommerce layouts (for individual product pages and for category pages / archives). What I want is to be able to create a sidebar in my archives layout for example, which shows all of the sub-categories (children) of the current selected category page.
I can see that there is in fact a 'Widget' which seems to achieve most of what I want, which is called 'Product Categories', however I am unsure how I could load this widget into my Tooolset 'View' that I am building. Please can you help?
Or is there an easier way to achieve what I want to do already built into Toolset Woocommerce Views plugin? Many thanks

Is there any documentation that you are following? I've tried looking through toolset docs and forum but couldn't find anything which solved this.

Is there a similar example that we can see? You will see this style of category navigation on most good e-commerce websites

What is the link to your site? N/A, currently being developed

Thank you very much for your assistance 🙂

[Christian Cox]

Hi, Toolset Views are not designed to display WordPress Widgets internally, so you would need to recreate this functionality in your View if you plan to use a View to display child terms. To display a list of terms that are children of of the current archive term, you would create a View of the Product Category taxonomy terms and add a "taxonomy parent" Query Filter. You can configure the filter to display terms whose parent term is the same as the current archive - see the attachment here for an example of that Query Filter configuration.

You mentioned that you are creating layouts. Are you referring to Layouts created with the Toolset Layouts plugin, or are you using the term layout more loosely to refer to designs created in the Block Editor or in a classic Content Template? If you are referring to the Toolset Layouts plugin, you can insert a Widget block in your Layout if you'd like to display the Product Category widget. You can configure the Widget block to show only terms that are children of the current archive term. That would remove the need for another View.

[KeithM7209]

Hi Christian, many thanks for your help it's greatly appreciated.
I have tried what you have mentioned above, but it doesn't seem to work (I created a view, Content Selection 'Taxonomy' > 'Product Categories' and then setup a Query filter for 'current taxonomy archive'), but the front end just shows nothing. I am creating this is 'toolset > views', and I am then adding the shortcode for this view, into my Products > Archive template.
I have attached a number of screenshots to this, which hopefully explain to you what I am doing, and what the problem is
***(my apologies in advance for the nature of the products on the website, I am building an adult sex toy website for my client, so the products are a little 'sensitive' shall we say haha!)

It seems that even though when I look at the website on the front end, the taxonomy view appears to be blank, when I look at the code in the dev tools, I can see that

elements are being loaded, but they seem to be empty (even though in my template I have requested each loop to display the 'Taxonomy Title' field.

So I'm really confused as to why this isn't working?
I have included one extra screenshot (entitled 'showing-the-product-categories-widget') which shows the 'Product Categories' widget which comes bundled with Woocommerce. Although this widget displays what I want, I don't want to use this widget (I want to be able to achieve that, but using Toolset, because I have more control over how I want to display it etc.
Please can you explain how to achieve that display, but using Toolset.

If you need any more information from me then please let me know (I can supply you with a login to the back end for example).

Thank you very much for your help,

Keith

[Christian Cox]

I am creating this is 'toolset > views', and I am then adding the shortcode for this view, into my Products > Archive template.
Right, the solution I was describing would work in a Product Categories Archive template, not in a Products Archive. There are no child terms of a Products Archive. Your original comment said "What I want is to be able to create a sidebar in my archives layout for example, which shows all of the sub-categories (children) of the current selected category page."

Now you're saying you want to show something in the Product Archive. What do you want to show - top-level terms with no children, or all terms?

[KeithM7209]

Sorry but I don't really understand the difference between a 'Product Categories Archive' and a 'Products Archive', I just want to be able to create a category menu. I'm still quite new to using Toolset and have never used it with Woocommerce before.

What I want to achieve is a sidebar menu which allows a user to easily navigate through the different categories and sub-categories. I thought I could do that if I added a wordpress widget into my Toolset view which would make it easy, but you say that isn't possible to do with Toolset, so now I'm asking how to achieve that with only Toolset (inserting a view into a view). I'm doing my best to explain it but it's very confusing (I had hoped that the images would explain what I am trying to achieve with the annotated file names too, so I apologise if they don't).

I will try and explain in 'non-toolset' terminology what I need to achieve:

- If a user goes into ANY category of product on the front end of the website (whether it is a top level category, or a child category, or a child of a child category), that they can see a vertical list of categories, in a sidebar, to the side of the product grid.

- In the sidebar category list, the active category path needs to be open, and to show the next level of child categories available. So lets say we have 4 top level categories (1, 2, 3 and 4) and the user clicks on Category 1, the sidebar menu will still show 1,2,3,4, but also now inbetween 1 and 2 now all of the children categories of Category 1 also show, lets say 1a, 1b, 1c.
Then if I click on 1a, all of the child categories of 1a then also become visible in the sidebar, so I would also see 1aa, 1ab, 1ac etc (as well as the parent level sub categories)
At no time would I see any child categories of 2, 3, or 4, UNLESS I clicked on one of them, in which case the visible child categories of Category 1 would then NOT be visible.

Does this make sense now? You will see one of these category menus on probably 99% of e-commerce websites, and seeing as Woocommerce and Toolset are compatible together, I'm assuming this is something that pretty much all of your customers who use Toolset for Woocommerce, also want to achieve - but I guess maybe I am not explaining it very well.

Many thanks,

Keith

[Christian Cox]

Sorry but I don't really understand the difference between a 'Product Categories Archive' and a 'Products Archive'
The Product Archive is usually just referred to as the Shop page in WooCommerce. It's a listing of all available products at hidden link. Product Category Archives are similar in that they also show your Products listings, but the list is automatically filtered by the Product Category terms you assign to each Product. The URLs for Product Category archives are structured by default like https://yoursite.com/product-category/{term-slug}, so that only Products assigned to the term with slug {term-slug} are shown at the corresponding URL.

In Toolset, you create WordPress Archives to design the content shown on the Shop page and those Product Category Archive URLs. You can assign the same WordPress Archive design to both Product and Product Category Archives, or you can create separate WordPress Archives for the Product Archive and Product Category Archives.

- If a user goes into ANY category of product on the front end of the website (whether it is a top level category, or a child category, or a child of a child category), that they can see a vertical list of categories, in a sidebar, to the side of the product grid.
When you say "goes into ANY category of product" I assume you mean they are visiting a Product Category Archive like /product-category/{term-slug}. These pages are all designed by the same WordPress Archive, applied to the Product Category archive type. This is where the View I originally described should be displayed.

On the other hand, to display a similar menu of terms on the Product Archive (Shop page), the same View will not work because the Query Filter you created assumes it will be placed on a Product Category Archive. Therefore, you need to create two separate WordPress Archives - one for the Product Archive, and another separate one for the Product Category Archive. This will allow you to display two different Views of terms on each of those two archive types. The View in the Product Category Archive would be filtered such that the parent term is set by the current archive (again, this is the View originally described here). The View in the Product Archive should be filtered such that the parent term is "None". This will produce a list of top-level terms. To display the child terms underneath each top-level term, you need a nested View of terms. I don't want to confuse you on that yet, so let's try to get the two archives set up first, and include separate Views in each archive - the Product Category archive View is filtered by term parent set by the current archive, the Product archive View is filtered by term parent is "none". This will create a one-level list of terms in each archive. Then we can tackle the nested child terms once those two archives are functional. Make sense?