Problem filtering with multiple taxonomies and showing results in grid

Anonymous

#13622

I’m trying to use this plugin for my woocommerce shop and wish to have something like this http://demo.designsandcode.com/sfpro-woo-mystile/product-search/

1. I’ve getting help from https://support.searchandfilter.com/forums/topic/and-or/ and https://support.searchandfilter.com/forums/topic/and-filtering-not-working/#post-9913 but pretty much stuck.
Basically, I’m trying to filter for certain products that has two custom taxonomies.
I used CPT UI plugin to add 2 new taxonomies “product types” and “model types”. I went into one product post and added new category for both of of them. “product types” – “leather” , “model types” – “iphone 6”
I created a new search form with 2 new fields,
Taxonomy: product types (change to OR)
Taxonomy: Model types (change to OR)
Change “field relationships” to AND in “tags, Categories& Taxonomies”
Then, I add shortcode to page and result shortcode to page widget. When I click on only “leather” or “iphone 6”, “no results found” appear. Same if both selected.

2. I tested using “product categories” in the form, and it returns results in posts form, unlike the shop grid results here http://demo.designsandcode.com/sfpro-woo-mystile/product-search/
How do I do that?

Anonymous

#13659

Ok, so I figured out my problems with filtering using AND with 2 taxonomies.
– custom taxonomies don’t work well with spaces in their names and slugs (or capital letters too…?). It’s filtering perfectly right now.
– also shouldn’t use categories and custom taxonomies together, otherwise the product count is wrong.

So my only problem is showing the results in grid like your demo woocommerce shop http://demo.designsandcode.com/sfpro-woo-mystile/product-search/

How is that done? I can’t seem to find the solution in support threads. Hope you can help. Thanks.

Ross Moderator

#13682

Hey Khao

You’re right about the taxonomies – I believe taxonomies should not have spaces in their name if we are using WordPress conventions.

The grid like you mention is a layout that comes with woocommerce – that we must take the code from –

http://demo2.woothemes.com/?name=mystile

To create the search results screen I created a new template (based on page.php), then I replaced the loop with code from woocommerce – templates/product-archive.php which has the grid template:

 <div id="content" class="col-full">

	        <!-- #main Starts -->
	        	        <div id="main" class="col-left">

		<?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>

			<h1 class="page-title"><?php woocommerce_page_title(); ?></h1>

		<?php endif; ?>

		<?php do_action( 'woocommerce_archive_description' ); ?>

		<?php if ( have_posts() ) : ?>

			<?php
				/**
				 * woocommerce_before_shop_loop hook
				 *
				 * @hooked woocommerce_result_count - 20
				 * @hooked woocommerce_catalog_ordering - 30
				 */
				do_action( 'woocommerce_before_shop_loop' );
			?>

			<?php woocommerce_product_loop_start(); ?>

				<?php woocommerce_product_subcategories(); ?>

				<?php while ( have_posts() ) : the_post(); ?>

					<?php wc_get_template_part( 'content', 'product' ); ?>

				<?php endwhile; // end of the loop. ?>

			<?php woocommerce_product_loop_end(); ?>

			<?php
				/**
				 * woocommerce_after_shop_loop hook
				 *
				 * @hooked woocommerce_pagination - 10
				 */
				do_action( 'woocommerce_after_shop_loop' );
			?>

		<?php elseif ( ! woocommerce_product_subcategories( array( 'before' => woocommerce_product_loop_start( false ), 'after' => woocommerce_product_loop_end( false ) ) ) ) : ?>

			<?php wc_get_template( 'loop/no-products-found.php' ); ?>

		<?php endif; ?>

	</div><!-- /#main -->

The rest you will need to have a play with to get nice integration.

Thanks

Anonymous

#13735

Hi Ross,

So I take my theme’s php file for displaying page content, remove the loop in it with the code u posted and create a new php file. Then I use this in the “display results” template section, right?

Ross Moderator

#13742

Yeah pretty much – but the thing is, the example I’m giving is for a theme that works with WooCommerce – and this guidline is really a rough guide to duplicating your shop page with woocommerce for use with S&F results…

WooCommerce has a lot of its own template files –

http://docs.woothemes.com/document/template-structure/

And usually the one for your shop is called product-archive.php – so I would look at this file,

What I did was –

Duplicate page.php – call it search-filter.php – edit this.

Then, in the part where you have The Loop –

<?php 
if ( have_posts() ) {
	while ( have_posts() ) {
		the_post(); 
		//
		// Post Content here
		//
	} // end while
} // end if
?>

I would replace this with the code from product-archive.php – the parts from <!-- #main Starts --> to <!-- /#main --> – like the code I pasted above.

I’m afraid this is a pretty loose guideline and if your not using WooCommerce it won’t work, its also completely dependent on how your theme is setup – you might not see the code I mention above for example – you’ll have to play around with this, and possible reorganise some of the html to fit in with your theme properly.

Thanks

[Author]

Posts