Refers only to FiboSearch Pro

How to display extra text in search suggestions?

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

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

Table of Contents

Implementation (don’t skip it)

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

Running snippets

The snippet includes [SHORTINIT MODE]:

  1. Create a new empty file asfw-filters.php in the root directory of your child-theme and paste the snippet there

The snippet doesn’t include [SHORTINIT MODE]:

Apply it like a normal WordPress snippet e.g. in function.php in your child theme or via the CodeSnippet plugin.

Hooks to display custom content

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

As you can see there are the following hooks:

  • title_before
  • title_after
  • content_after
  • meta_before
  • meta_after

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

<?php
// [SHORTINIT MODE] Run this snippet in the SHORTINIT mode (asfw-filters.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;
});

Real-life examples

There are 3 snippets you can use for different cases. Use it 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 suggestion. They created the 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 be useful later for searching. Add this snippet to function.php in your child theme or use the CodeSnippet 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 finishing this process.

Step 3 – Display authors while searching

This snippet allows you to read the book’s author from the storage while searching and display it in the place of content_after.

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

<?php

// [SHORTINIT MODE] Run this snippet in the SHORTINIT mode (asfw-filters.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 a product name.

Step 1 – Add EAN code to the search index

This snippet allows you to save EAN code in the memory which will be useful later for searching. Add this snippet to function.php in your child theme or use the CodeSnippet plugin.

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 finishing this process.

Step 3 – Display EAN code while searching

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

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

<?php

// [SHORTINIT MODE] Run this snippet in the SHORTINIT mode (asfw-filters.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 taxonomy.

Step 1 – Find taxonomy name

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

Alternatively, you can check the URL address when you are on attribute listing in the WordPress dashboard. Go to WooCommerce -> Attributes and 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 product stock status to the search index

This snippet allows you to save product stock status in the memory which will be useful later for searching. Add this snippet to function.php in your child theme or use the CodeSnippet plugin.

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 finishing this process.

Step 3 – Display stock status while searching

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

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

<?php

// [SHORTINIT MODE] Run this snippet in the SHORTINIT mode (asfw-filters.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: