How to change image size in the search suggestions?

Table of Contents

Change the product image

FiboSearch registers a custom image size that is used for the images in the search suggestions. This size is called dgwt-wcas-product-suggestion and is 64 px-wide with dynamically adjusted height. The image is inside a 50 px-wide container. You can change the resolution of the image and the size of the container to make the images larger.

Change the product image in FiboSearch Pro

Add the following code to your theme’s functions.php file or use the Code Snippets plugin:

add_filter( 'dgwt/wcas/tnt/indexer/readable/product/data', function($data, $product_id, $product) {
  $thumbnail_url = wp_get_attachment_image_src(get_post_thumbnail_id($product_id), 'medium' );
  if ( is_array( $thumbnail_url ) && !empty( $thumbnail_url[0] ) ) {
    $data['image'] = $thumbnail_url[0];
  }
  return $data;
}, 10, 3 );

This code will set the image size to medium, which is 300×300 px by default. You can change it to any size registered in your WordPress. The default WordPress sizes are:

thumbnail 150×150 px (cropped)
medium 300×300 px
medium_large 768×768 px
large 1024×1024 px
full (original size of the uploaded image)

The sizes can be viewed in Settings -> Media in the WP dashboard.

There are also sizes registered by WooCommerce. Please refer to https://docs.woocommerce.com/document/image-sizes-theme-developers/. Also, your theme and plugins can register their own sizes.

After adding the code, go to WooCommerce -> FiboSearch -> Indexer (tab) and rebuild the index.

Change the product image in FiboSearch Free

Add the following code to your theme’s functions.php file or use the Code Snippets plugin:

add_filter( 'dgwt/wcas/product/thumbnail_src', function($src, $product_id) {
  $thumbnail_url = wp_get_attachment_image_src(get_post_thumbnail_id($product_id), 'medium' );
  if ( is_array( $thumbnail_url ) && !empty( $thumbnail_url[0] ) ) {
    $src = $thumbnail_url[0];
  }
  return $src;
}, 10, 2);

Make the image container larger

Changing the image size is not enough – you’ll also need to make the image container bigger. Add the following code to Appearance -> Customize -> Additional CSS:

span.dgwt-wcas-si {
  width: 150px !important;
}

Change the category image (FiboSearch Pro only)

This applies only to FiboSearch Pro. FiboSearch Free does not provide category images.

Add the following code to your theme’s functions.php file or use the Code Snippets plugin:

add_filter( 'dgwt/wcas/term/thumbnail_src', function($src, $term_id) {
  $imageID = get_term_meta( $term_id, 'thumbnail_id', true );
  if ( ! empty( $imageID ) ) {
    $imageSrc = wp_get_attachment_image_src( $imageID, 'medium' );
    if ( is_array( $imageSrc ) && ! empty( $imageSrc[0] ) ) {
      $src = $imageSrc[0];
    }
  }

  if ( empty( $src ) ) {
    $src = wc_placeholder_img_src( $size );
  }
  return $src;
}, 10, 2 );

After adding the code, go to WooCommerce -> FiboSearch -> Indexer (tab) and rebuild the index.

Just like in case of the products, you need to make the image container larger. Add the following CSS to your website:

span.dgwt-wcas-si {
  width: 150px !important;
}