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 the dgwt-wcas-product-suggestion
and is 64 px-wide with dynamically adjusted height. The image fits 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.
![](https://fibosearch.com/wp-content/uploads/2022/01/fibosearch-change-product-image.png)
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; }
If you have enabled search history, use slightly changed CSS:
.dgwt-wcas-suggestion:not(.dgwt-wcas-suggestion-history-product):not(.dgwt-wcas-suggestion-history-search) span.dgwt-wcas-si { width: 150px !important; }
Change the category image (FiboSearch Pro only)
This only applies to FiboSearch Pro. FiboSearch Free does not offer category images.
![](https://fibosearch.com/wp-content/uploads/2022/01/fibosearch-change-category-image.png)
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 as in the 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; }
If you have enabled search history, use slightly changed CSS:
.dgwt-wcas-suggestion:not(.dgwt-wcas-suggestion-history-product):not(.dgwt-wcas-suggestion-history-search) span.dgwt-wcas-si { width: 150px !important; }