Refers to FiboSearch Pro only

How to display extra text in search suggestions?

You can display a few things in a search suggestion: the product name, image, SKU, a short description, and the price. Sometimes it’s not enough. If you sell wine, you may want to display the producer. If you sell books, you might want to display the author.

The following guide introduces a few tricks on how to display extra things like custom fields, attributes, or custom taxonomies in the search suggestions. 

Table of Contents

Implementation (don’t skip it)

Below you will find some examples of snippets. Here is how to implement these snippets. Some snippets must be running in a special WordPress SHORTINIT mode and some as normal WordPress snippets like in a functions.php file. Every snippet includes comments with information in which mode you should run it. You should find [SHORTINIT MODE] or [NORMAL MODE]

Running snippets

If the snippet includes [SHORTINIT MODE]:

  • Create a new empty fibosearch.php file in the root directory of your child theme and paste the snippet there

If the snippet doesn’t include [SHORTINIT MODE]:

  • Apply it like a normal WordPress snippet e.g. in functions.php in your child theme or via the Code Snippets plugin.

Hooks to display custom content

Every search suggestion has 5 places you can use to display custom content. See the image below:

As you can see, there are the following hooks:

  • title_before
  • title_after
  • content_after
  • meta_before
  • meta_after

You can use the following filters to add extra info to products, variations, posts, pages or taxonomies:

  • dgwt/wcas/tnt/search_results/suggestion/product: for products
  • dgwt/wcas/tnt/search_results/suggestion/product_variation: for product variations (since FiboSearch 1.28.0)
  • dgwt/wcas/tnt/search_results/suggestion/post: for posts (since FiboSearch 1.28.0)
  • dgwt/wcas/tnt/search_results/suggestion/page: for pages (since FiboSearch 1.28.0)
  • dgwt/wcas/tnt/search_results/suggestion/tax_{tax_slug}: for taxonomies (since FiboSearch 1.28.0)

Note: post, page and taxonomy filters do not support the content_after, meta_before and meta_after hooks.

Here is some sample code that adds extra text after a product name:

<?php
// [SHORTINIT MODE] Run this snippet in the SHORTINIT mode (fibosearch.php file). Take a look at the Implementation section above.

add_filter( 'dgwt/wcas/tnt/search_results/suggestion/product', function ( $data ) {

	$data['title_after']   = 'This text will be displayed next to product title';

	return $data;
});

Here’s another example for product categories:

<?php
// [SHORTINIT MODE] Run this snippet in the SHORTINIT mode (fibosearch.php file). Take a look at the Implementation section above.

add_filter( 'dgwt/wcas/tnt/search_results/suggestion/tax_product_cat', function( $data ) {

	$data['title_before']  = '(title_before)';

	return $data;
} );

Real-life examples

There are 3 snippets you can use for different cases. Use them as samples. Remember to replace the taxonomy name or custom field. 

[Example 1] – Display book authors (custom taxonomy)

The book store wants to display authors in the search suggestions. They created a custom taxonomy book_author and assigned books to the terms of this taxonomy.

Step 1 – Add book authors to the search index

This snippet allows you to save book authors in the memory, which will come in useful later for searching. Add this snippet to functions.php in your child theme or use the Code Snippets plugin.

add_filter( 'dgwt/wcas/tnt/indexer/readable/product/data', function ( $data, $product_id, $product ) {

	$term = $product->getTerms( 'book_author', 'string' );

	if ( ! empty( $term ) ) {

		$html = '<span class="suggestion-book-author">';
		$html .= $term;
		$html .= '</span>';


		$data['meta']['book_author'] = $html;
	}

	return $data;
}, 10, 3 );

Step 2 – Rebuild the search index

Go to WooCommerce → FiboSearch → Indexer (tab) and rebuild the search index. Wait for this process to finish.

Step 3 – Display authors while searching

This snippet allows you to read the book’s author from the storage while searching and then display it in the place of content_after. This snippet has to be added to the special fibosearch.php file. Scroll up to the Implementation section, and read about running snippets in SHORTINIT WordPress mode.

<?php

// [SHORTINIT MODE] Run this snippet in the SHORTINIT mode (fibosearch.php file). Take a look at the Implementation section above.

add_filter( 'dgwt/wcas/tnt/search_results/suggestion/product', function ( $data, $suggestion ) {

	if ( ! empty( $suggestion->meta['book_author'] ) ) {

		$html = '<div class="suggestion-book-author">';
		$html .= $suggestion->meta['book_author'];
		$html .= '</div>';

		$data['content_after'] = $html;
	}

	return $data;
}, 10, 2 );

[Example 2] – Display EAN code (custom field)

In this example, an EAN code is stored as a custom field with key EAN. We want to display the EAN code below the product name.

Step 1 – Add the EAN code to the search index 

This snippet allows you to save the EAN code in the memory, which will come in handy later for searching. You can do it in two ways: 

  1. Open the functions.php file in your child theme and add the code at the end
  2. Or install the Code Snippets plugin and apply this code as a snippet.
add_filter( 'dgwt/wcas/tnt/indexer/readable/product/data', function ( $data, $product_id, $product ) {

	$value = $product->getCustomField( 'ean' );
	if ( ! empty( $value ) ) {
		$data['meta']['ean'] = $value;
	}

	return $data;
}, 10, 3 );

Step 2 – Rebuild the search index

Go to WooCommerce → FiboSearch → Indexer (tab) and rebuild the search index. Wait for this process to finish.

Step 3 – Display the EAN code while searching

This snippet allows you to read the EAN code from the storage while searching and then display it in the place of content_after

This snippet has to be added to the special fibosearch.php file. Scroll up to the Implementation section, and read about running snippets in SHORTINIT WordPress mode.

<?php

// [SHORTINIT MODE] Run this snippet in the SHORTINIT mode (fibosearch.php file). Take a look at the Implementation section above.

add_filter( 'dgwt/wcas/tnt/search_results/suggestion/product', function ( $data, $suggestion ) {

	if ( ! empty( $suggestion->meta['ean'] ) ) {

		$data['content_after'] = '<br />EAN: ' . $suggestion->meta['ean'];
	}

	return $data;
}, 10, 2 );

[Example 3] – Display case pack size (product attribute)

In this example, we want to display the product size next to the product name. Size is a product attribute with key size. In WooCommerce product attribute is just a taxonomy. 

Step 1 – Find taxonomy name

The taxonomy name of an attribute has the form pa_{attribute_name}. In our case, we have an attribute with slug case-pack-size. This means that the taxonomy name is pa_case-pack-size.

Alternatively, you can check the URL address when you are checking the attribute listing in the WordPress dashboard. Go to WooCommerce → Attributes → go to a specific attribute view. Take a look at the URL address.

Step 2 – follow the steps from [Example 1] – Display book authors

The next steps are the same as in Example 1. Just replace book_author with your taxonomy.

[Example 4] – Display “in stock” or “out of stock” status

In this example, we want to display the stock status directly in the search suggestion.

 Step 1 – Add the product stock status to the search index 

This snippet allows you to save the product stock status in the memory, which will be useful later for searching. You can do it in two ways:

  1. Open the functions.php file in your child theme and add the code at the end
  2. Or install the Code Snippets plugin and apply this code as a snippet.
add_filter( 'dgwt/wcas/tnt/indexer/readable/product/data', function ( $data, $product_id, $product ) {

    $value = $product->getStockAvailability();

    if ( ! empty( $value ) ) {
        $data['meta']['stock'] = $value;
    }

    return $data;
}, 10, 3 );

Step 2 – Rebuild the search index

Go to WooCommerce → FiboSearch → Indexer (tab) and rebuild the search index. Wait for this process to finish.

Step 3 – Display stock status while searching

This snippet allows you to read stock availability from the storage while searching and then display it in the place of meta_after

This snippet has to be added to the special fibosearch.php file. Scroll up to the Implementation section, and read about running snippets in SHORTINIT WordPress mode.

<?php

// [SHORTINIT MODE] Run this snippet in the SHORTINIT mode (fibosearch.php file). Take a look at the Implementation section above.

add_filter( 'dgwt/wcas/tnt/search_results/suggestion/product', function ( $data, $suggestion ) {

    if ( ! empty( $suggestion->meta['stock'] ) ) {
        $data['content_after'] = $suggestion->meta['stock'];
    }

    return $data;
}, 10, 2 );

Step 4 – Add CSS for a better appearance

.dgwt-wcas-suggestion .dgwt-wcas-stock {
    margin: 3px 0 0 0;
    display: block;
    text-align: left;
}

Step 5 – Let’s see if it works

Check if the stock status shows up in an autocomplete. The results should look like this: