[Resolved] Set up Product Archive with Filter

[Author]

Posts

[Minesh]

I've escalated your issue for further debugging to check why top level term is displaying the default WC category archive rather the taxonomy archive we created using views.

Please hold on for further updates, I will get in touch with you as soon as I know more.

[Minesh]

Can you please check now: hidden link

The reason why on top level term/category the WP archive created using views was not showing because there was a option added to the wp_options table as you can see with the following screenshot:
=> hidden link
There was a option added "woocommerce_category_archive_display" to the wp_options table and the option value is set to "subcategories" and autoload "yes". Now, as you can see with the above screenshot, I've renamed the option to "woocommerce_category_archive_display111" and autoload set to "no".

I tried to check on your install but I do not able to find any GUI way from where the above option is set.

Then, I've done few modifications with the archive that displays the product categories.
=> hidden link
- I have changed the "Oputput Editor" section of above archive as given under:

<div class="row">[wpv-woo-breadcrumb]</div>
<div class="row archive-title"><h1>[wpv-archive-title]</h1></div>
[wpv-conditional if="( woo_has_product_subcategory() eq 0 )"]
<div class="row">
	<div class="col-md-3">[wpv-filter-meta-html]</div>
	<div class="col-md-9">[wpv-layout-meta-html]
 </div>
[/wpv-conditional]
  
[wpv-conditional if="( woo_has_product_subcategory() eq 1 )"]
<div class="row">
	 
       [wpv-view name="sub-category-product-view"]
 
 </div>
[/wpv-conditional]

</div>

- As you can see:
-- if woo_has_product_subcategory() == 0, it will display the filter and result
-- if woo_has_product_subcategory() == 1, it will display the "sub-category-product-view" that displays the subcategories. You can modify the output of this view as per your requirement to display sub-categories as per your need.

[Minesh]

Just an update, I've adjusted the archive's "Loop Editor" section as given under:
=> hidden link

[wpv-layout-start]

[wpv-items-found]
[wpv-conditional if="( woo_has_product_subcategory() eq 0 )"]
<div class="row pagination">
  [wpv-pager-archive-nav-links output="bootstrap" first_last_links="true" previous_next_links="true" force_previous_next="true"]
</div>
<!-- wpv-loop-start -->
	<wpv-loop>
		[wpv-post-body view_template="loop-item-in-archive-for-product-categories"]
	</wpv-loop>
	<!-- wpv-loop-end -->

<div class="row">
  [wpv-pager-archive-nav-links output="bootstrap" first_last_links="true" previous_next_links="true" force_previous_next="true"]
</div>
[/wpv-conditional]
[/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]
[wpv-conditional if="( woo_has_product_subcategory() eq 1 )"]
<div class="row">
	 [wpv-view name="sub-category-product-view"]
</div>
[/wpv-conditional]

And this is how the "Output Editor" section looks like:

 <div class="row">[wpv-woo-breadcrumb]</div>
<div class="row archive-title"><h1>[wpv-archive-title]</h1></div>
<div class="row">
	<div class="col-md-3">[wpv-filter-meta-html]</div>
	<div class="col-md-9">[wpv-layout-meta-html]</div>
</div>

I can see now the following page displays the sub-categories:
=> hidden link

And the following page displays the posts belongs to sub-category:
=> hidden link

[jamesW-26]

Thanks very much Minesh, great work.

So I can see that I can edit the View which displays the sub-categories by editing here: hidden link

But the pages is taking on the structur from the Loop Editor from here: hidden link

I need to be able to design the list of sub-categories without having any of the structure/content from the product list view.

Does that make sense? I've attached an image which shows the areas that I do not want in the view that shows the list of sub-categories.

Thanks,
James

[Minesh]

Ok - it that case I've a great solution for you where we need to use the Toolset hook: wpv_filter_force_wordpress_archive
=> https://toolset.com/documentation/programmer-reference/views-filters/#wpv_filter_force_wordpress_archive

So, I've created the following new archive that we will use to display only top-level terms.
=> hidden link
- As you can see with the above new archive that we will use to display only top-level terms, I've moved the view that displays the sub-categories to it's Loop Editor.

Now, I've added the following hook to "Custom Code" section offered by Toolset and added the following code:
=> hidden link

add_filter( 'wpv_filter_force_wordpress_archive', 'func_switch_to_top_level_term_archive', 30, 2 );
 
function func_switch_to_top_level_term_archive( $wpa_assigned, $wpa_loop ) {
    
    if ( $wpa_loop == 'view_taxonomy_loop_product_cat' and woo_has_product_subcategory() == 1) {
       $wpa_assigned = 13604;
        
    }
    return $wpa_assigned;
}

- As you can see with the code, the above code will be applied only when you are loading the product-category taxonomy archive and when product category has sub-categories. If the condition will be satisfied, we will ask to load the archive with ID 13604 (that is the archive we just created to display the top-level term).

Now, whenever, you try to load the top-level term archive it will load the following archive:
=> hidden link

And, when you try to load the archive for your sub-category- it will load the following archive:
=> hidden link
- I've also removed the [wpv-conditional] shortcodes now from the above archive's Loop Editor section as its not needed now.

Now, you can freely design your top-level term archive. I hope you will be happy with the solution and service 🙂 Please let me know your feedback and feel free to close the ticket if everything is sorted out 🙂

[jamesW-26]

Hi Minesh,

Thanks for that. We are slowly getting there. I was actually hoping to be able to use blocks editor for this, but if that's not possible I'll have to figure out how to do what I want with code.

What I'm trying to achieve with this is the following: hidden link

All of the elements (except the sub-categories list) on that page are custom fields for the product category. How can I access those and style them to look the same?

Thanks,
James

[Minesh]

Can you please check now: hidden link

I've created another taxonomy view that we will use to display your single term information (like image, title, left-right content etc..etc.).
=> hidden link
- As you can see I already added all the fields you want to display, you just need to format it as per your requirement.

Then, I've added another filter hook to "Custom Code" section of Toolset:

add_filter( 'wpv_filter_taxonomy_query', 'func_include_currnt_archive_id', 10, 3 );
 
function func_include_currnt_archive_id( $tax_query_settings, $view_settings, $view_id ) {
  
global $wp_query;
  
  if ( $view_id == 13608) {
     $tax = $wp_query->get_queried_object();
     $tax_query_settings['include']  = $tax->term_id ;
  }
    return $tax_query_settings;
}

- The above hook is to assign the current term ID of the archive so the taxonomy view we created 13608 - that should load the current archive information.

Then, I've added the taxonomy view we created that displays the current archive information on the following archive:
=> hidden link
So, the archive "Loop Editor" will looks like now:

<div class="row">
	 [wpv-view name="tax-view-to-display-singe-term-archive-info"]
</div>
<div class="row"> Sub-Categories </div>
<div class="row">
	 [wpv-view name="sub-category-product-view"]
</div>

You just need to style the output as per your need. I hope you can manage this now 🙂

[Minesh]

Can you please let me know if everything is resolved now and I hope you will achieve the output what you were looking for 🙂

[jamesW-26]

Hi Minesh,

Thanks very much for that, and sorry for the delay in replying. I had meetings on then wanted to be sure I was able to style it. I've figured out how to use the custom field image as a background image and do things like make a whole div a link to the taxonomy term. So that's coming along great 🙂

However, with the image, category title and other fields, it is display the content from the "Professional Audio" taxanomy for all categories...

hidden link (this one is correct)

hidden link (not correct)

hidden link (not correct)

Also, if you remember before I mentioned some minor things that I can't figure out how to do with this setup .... Here they are:

1. Vertical Alignment of image on product archive. Check out this page: hidden link and scroll down to the 3rd product (Canon EOS C100 Mark II ...) - see how the image is sitting vertically in the middle of the containing box? I have tried all sorts of CSS but can't get it to vertically align to the top.

2. Price Filter order and setup. I'd like to set up custom price ranges. Can you please advise how to do this?

3. Product Sorting. I tried inserting the Sorting control and messed aroudn with it for a couple hours but can't get it to work. Can you please show me how to sort with controls as follows:
- Newest
- Price Low to High
- Price High to Low
- Brand A to Z
- Brand Z to A

Thanks very much,
James

New threads created by Minesh and linked to this one are listed below:

https://toolset.com/forums/topic/split-set-up-product-archive-with-filter-vertical-alignment-of-image/

https://toolset.com/forums/topic/split-set-up-product-archive-with-filter-price-filter-and-order-setup/

https://toolset.com/forums/topic/split-set-up-product-archive-with-filter-product-sorting/

[Minesh]

Lets finish the issue one by one.

However, with the image, category title and other fields, it is display the content from the "Professional Audio" taxanomy for all categories...
hidden link (this one is correct)
==>
Ok

hidden link (not correct)
==>
I can see that the main banner image is not set for this category - Can you please setup and it should work.
- hidden link

hidden link (not correct)
==>
With this category as well, I cn see the main banner image is not set:
- hidden link

I've disabled the cache for the taxonomy view that displays the current tax information - now you will see the custom field values associated with each term.

<div class="row">
	 [wpv-view name="tax-view-to-display-singe-term-archive-info" cached="off"]
</div>

Can you please let me know is this issue is resolved?

[jamesW-26]

Ahh crap, so sorry. I should have checked that they actually had images. My bad. But yes, it looks like that cached thing needs to stay there.

[Minesh]

Great - as your original issue is resolved with this ticket. I will open a new ticket with your each additional questions.

As per our support policy we entertain only one question per ticket but still we have done lots of work with this ticket. I will split the ticket with your every new question and we will handle the issue there.

Please feel free to resolve this ticket.

[jamesW-26]

Minesh, thank you for working through all of that with me. Much apppreciated!!