WooCommerce advanced (product attribute) search

I couldn’t find answers why Googling, how to make search work with product attributes of WooCommerce products.
Wrote the code, but it was always 404 page. URLs with /taxonomy/term_slug (example.com/radius/16/) were working, but example.com/?s=&post_type=product&pa_radius=TERM_ID&pa_width=TERM_ID&pa_manufacturer=TERM_ID wasn’t outputing any products.

header.php

 <form action="<?php echo site_url( '/' ); ?>" class="search2">
 <input type="hidden" name="s" value=""/>
 <input type="hidden" name="post_type" value="product"/>
 <img src="<?php echo get_template_directory_uri(); ?>/img/box_holder.png">

 <div class="search_box">
 <h3 class="search_title">Search by attribute</h3>
 <select class="selectBox" name="pa_season">
 <?php echo pf_get_filter_options( 'Season', 'pa_season' ); ?>
 </select>
 <select class="selectBox" name="pa_radius">
 <?php echo pf_get_filter_options( 'Radius', 'pa_radius' ); ?>
 </select>
 <select class="selectBox" name="pa_height">
 <?php echo pf_get_filter_options( 'Height', 'pa_height' ); ?>
 </select>
 <select class="selectBox" name="pa_width">
 <?php echo pf_get_filter_options( 'Width', 'pa_width' ); ?>
 </select>
 <select class="selectBox" name="pa_speedindex">
 <?php echo pf_get_filter_options( 'Speed index', 'pa_speedindex' ); ?>
 </select>
 <select class="selectBox" name="pa_manufacturer">
 <?php echo pf_get_filter_options( 'Manufacturer', 'pa_manufacturer' ); ?>
 </select>
 <button class="search-button" type="submit">Search ➤</button>
 </div>
 </form>

functions.php

/**
 * Output for specified taxonomy ( product attributee)
 *
 * @return string  list
 */
function pf_get_filter_options( $title, $taxonomy ) {

    global $wp_query;

    $options = '' . $title . '';

    $data = get_terms( $taxonomy );

    foreach ( $data as $term ) {

        // Skip some weird terms
        switch ( $taxonomy ) {
            case 'pa_radius':
                if ( in_array($term->slug, array('13c','14c','15c','1616c','16c')) )
                    continue( 2 );

                break;

            case 'pa_width':
                if ( in_array($term->slug, array('195205','255265')) )
                    continue( 2 );

                break;
        }

        $selected = isset( $wp_query->query_vars[$taxonomy] ) && $wp_query->query_vars[$taxonomy] == $term->term_id ? ' selected="selected"' : '';
        $options .= '<option value="' . $term->term_id . '"' . $selected . '>' . $term->name . '</option>';

    }

    return $options;

}

So I decided to watch https://www.youtube.com/watch?v=v7Uj3pLQseM to free my mind a bit.
In the talk Debug Bar was mentioned that I tried before, but I’m used
to watch errors in OSX Console.app so I wasn’t using Debug Bar.

What catched my attention was the SQL queries log so I added
define('SAVEQUERIES', true); to my wp-config.php and installed Debug Bar
to give it another try.

So I clicked Debug, went over the queries and found the solution.

Debug Bar Queries
Debug Bar Queries

Solution

The problem was that as value I was using $term->term_id instead $term->slug by which the queries search in code.

Advertisements

Author: Michal Zuber

Full stack developer, biker and rollerblader. Owner and developer at https://nevilleweb.sk/ Co-founded http://neville.sk/ Blog at https://michalzuber.wordpress.com/

9 thoughts on “WooCommerce advanced (product attribute) search”

  1. I wonder if you got the whole think to work? I’m working on a similar project at the moment. Used your code. The problem is the search results only taking the first parameter under consideration (in my case the width) ignoring the rest. The address box shows all the parameters correctly but they are just being ignored… Any suggestions?

      1. It’s working fine for drop-down but i also need that the user can search attributes by key words…
        Can you help me??

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s