[Resolved] How do I link a filtered category link to a page other than a WP archive?

[Author]

Posts

[francesco-hirokiM]

Tell us what you are trying to do?
Hi, I am a happy user of toolset. To me, the learning curve is a bit steep (I'm not a professional developer), but thanks to Toolset I could accomplish things I could have never imagined (I have no formal education in the IT field).

I have WooCommerce shop main page who shows the main products categories and subcategories with their respective links (both, categories and subcategories, in the same grid).

If I click any of the above mentioned link, I am redirected to the related WordPress archive.
The filter works fine:
1-if I click a category, I am directed to a WP archive page which shows the subcategories (if those are present in the category link just clicked) and the list of the products that are inside that category.
2-if I click a subcategory, I am directed to a WP archive page which shows only the list of the related products.

Then, we are talking about a parent page (the shop main page with the category and subcategory grid) and child page which can show subcategories and products list or only products list. This depends whether the link clicked in the main shop page is a category (which of course should direct to a subcategory+Products list archive page) or a subcategory (which doesn't contain any sub-subcategory but should show the product list only).

The problem: I find difficult to customize the archive page and I am trying to figure out a way to create the child page or pages. The thing I cannot really figure out is how to link the category link in the main shop page (or the subcategory link in the child page) to another page I have designed.

Is there any documentation that you are following?

I've been spending the last two days going through previous tickets and I tried to create some nested views or work on query filters, but actually I couldn't find a complete tutorial about how to solve this issue.

Is there a similar example that we can see?

Actually, I think it is a quite common feature in many ecommerce sites. A main page with other linked child pages. The information I am looking for is "how to direct a link (in this case of a category) to a desired customized page with the already filtered items.

What is the link to your site?
The site is still in development but resides already on an on-line server. We are planning to go live in a week or so.
In case you need it, I can give you the credentials to log in the backend.

Thank you very much in advance for you support.

Hiroki

[Nigel]

Hi there

The solution rather depends on whether you want to work with the existing pages that WordPress understands (e.g. the product category archives) and modify what is shown on them, or whether you want to ignore those URLs and create static pages with different URLs where you then insert Views as required and link between them.

If you tell me which route you want to go down I'll think about the best solution.

[francesco-hirokiM]

Hi Nigel! Thank you for your kind reply.

Well, actually I can't tell which alternative is better.
Correct me if I am wrong: the first alternative you suggest is simpler, but less flexible;
the second alternative you mention is more customizable but needs some more work and the use of Toolset.

At first, as far as I am concerned, the second alternative looks more complete.
One reason is that I have a gap about how to work on WordPress archives and how to customize those pages (first alternative).
I jumped in on how to work with Toolset Views and Toolset Layouts and now it seems easier to me (second alternative).

What do you think?

If you agree with me about choosing the second alternative, please point me to the right direction.

Thank you again very much for the time!

Hiroki

[Nigel]

The benefit of the first approach is that you would be working with familiar URLs that are already used by WooCommerce, and things like breadcrumbs would still work.

So as you don't have a strong opinion about going with the second option, let me share with you how I would do it and if you don't like it we can change things.

First, you are going to want an alternative 'shop' page that lists product categories.

So you create a View, and for the Content Selection this View will display taxonomy terms (not posts), specifically Product Categories.

We only want to display top-level product categories here, so add a Query Filter that says the term should have no parent (see screenshot 1).

While setting up such a test I'm simply outputting the categories as text links etc., you may want to improve upon that visually.

So in the output section I simply have:

		<wpv-loop>
          <p>[wpv-taxonomy-link]</p>
		</wpv-loop>

I insert that View on a page. Visiting it, it lists the top-level product categories, and links to their product category archives.

Now if you click on one of the links and it takes you to the product category archive, that is going to display all the products for that category.

It makes sense to me (and is certainly is easier to implement) to display the matching products whether this top-level category has any sub-categories or not.

But if it *does* have sub-categories, then before showing any matching products, it should show links to the sub-category archive page first.

So, create a custom product category archive at Toolset > WordPress Archives.

(See https://toolset.com/documentation/user-guides/getting-started-woocommerce-views/ for what's involved creating custom archive pages for WooCommerce archives.)

Go ahead and make a custom product category archive that looks how you want it to.

Right now it will be displaying the matching products for a given category. But what about displaying the sub-categories first?

For that we will need another View.

This View should, like the first, display product category terms.

This time, though, the Query Filter should be "Select taxonomy terms whose parent is the current taxonomy archive."

It should otherwise be the same, outputting links to the product category archive for the found terms, with one important difference, that you will want to output nothing if there are no found terms (and not "No items found", i.e. delete what is between the wpv-no-items-found shortcodes).

Now go back and edit your custom product category archive.

Update the Loop Editor to insert this second View after the wpv-layout-start shortcode, something like this:

[wpv-layout-start]
<h2>Sub-categories</h2>
[wpv-view name="second-level-product-categories"]
[wpv-items-found]
	<!-- wpv-loop-start -->
		<wpv-loop>
          <h4>[wpv-post-link]</h4>
		</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

That should essentially achieve what you require, albeit outputting just simple links.

It should even work if you have more nesting of product categories (e.g. sub-sub-categories).

[francesco-hirokiM]

Hi Nigel!

thank you so much for your thorough explanation. Partly, I was already on the beginning of the route you explained. It's good you gave me a confirmation about the way I was developing this thing.
Anyway, I will try to deepen and implement your explanations and let you now!

[Nigel]

OK, well let me mark this as awaiting feedback from you so it is not sitting in my queue, and let me know how you get on.

[francesco-hirokiM]

My issue is resolved now. Thank you!