Back to Top

Guide for WooCommerce AI Image & Semantic Search

Updated 9 July 2024

WooCommerce AI Image & Semantic Search plugin provides the customers on the store to search for products through images and text.

The customers will upload images or enter phrases and prompts to search for their desired products.

The results are displayed based on the products listed in the WooCommerce store.

The AI algorithm uses NLP(Natural Language Processing) and Vector Databases thus providing accurate results for image and phrase product search both.

If you would also like to integrate a Chatbot powered by OpenAI LLM to your WooCommerce store, then you can check WooCommerce Chatbot Using OpenAI.

Searching for an experienced
Woocommerce Company ?
Find out More

Features

  • Product searching using images is utilized by the customers.
  • Customers can also use text like words and phrases to search for products.
  • Search results are displayed based on the products already listed on the store.
  • Products have to be synced for them to available for image and semantic search.
  • Admin can sync/unsync the products as the requirement.
  • Searching through images can be enabled/disabled by the admin.
  • Image and semantic searching will display accurate and related relevant products both.
  • Admin can override the default WooCommerce search bar to integrate semantic search in it.
  • Theme can be customized with theme appearance settings.
  • Plugin is also compatible with WooCommerce’s new High-Performance Order Storage(HPOS) feature.

NOTE:

  • API endpoint needs to be set for this extension.
  • Once you’ve purchased the extension, our team will configure the AI Model on your server.

Please contact us on our support at [email protected] to set up the AI Model on your server and further configuration.

Installation

The user will get a zip file which they have to upload in the “Add New Plugin” menu option in the WordPress admin panel.

For this, login to the WordPress Admin Panel, and under the dashboard click on the “Plugins” menu option. This brings out a Sub-Menu and then select the “Add New Plugin” option.

woocommerce add new plugin

After that, you will see an option on the top of your page which is “Upload Plugin“, click on it to upload the zip file,

After clicking on it, you will see the button “Choose File“, use it to upload the zip file,

woocommerce choose file

Once the zip file is uploaded, click on “Install Now” button to install the plugin as per the snapshot,

woocommerce install plugin

Now, when the plugin is installed correctly, you will see the success message. Additionally, an option to activate the plugin.

Click on “Activate Plugin” to activate the installed plugin,

woocommerce activate plugin

Module Translation

Know how to translate the module.

NOTE: To generate JSON from your translations, save your translation file in the default WordPress languages directly then run the following command in the same directory: Note xx_YY refers to the locale (eg. en_US)

wp i18n make-json wc_pos-xx_YY.po –no-purge

Flush Rewrite Rules

The admin has to flush the permalink by navigating to Settings>Permalinks so that links to the AI Image & Semantic Search work correctly.

wordpress woocommerce permalinks

Setup ChromaDB

Please follow the below given steps to configure ChromaDB.

  1. Install the following packages on your server.
    a) docker
    b) docker-compose
  2. Download the chromaDB zip (https://raw.githubusercontent.com/wpwebkul/chroma/master/chromaDb.zip ) and extract on your server on any location.
  3. Run the following command inside chromaDB folder (extracted folder).
docker-compose up -d --build

After successfully installing the WooCommerce AI Image & Semantic Search plugin, they have to navigate to Webkul WC Addons>AI Semantic Search.

The admin needs to configure the following,

Settings

General Configs

Under this section, the admin has to set the following fields,

  • Embedding Server: Enter the Embedding Server address.
  • Chroma DB Server: Enter the Chroma DB Server address.
  • Image Search: Enable or Disable to search via Image.
  • Override WooCommerce Search: Enable this to override the default WooCommerce search with Semantic search.
  • Default Listing Limit: Set the default items listing limit.
  • Search Result Limit: Field to manage the maximum search items.
woocommerce ai image & semantic search general configs

Theme Appearance

Under this section, the admin can personalize the theme. The changes done here will be visible on the storefront.

They can modify the appearance and make it suitable as per their requirement.

Under this section, the following configurations are available,

  • Product Style: Set the style of product.
  • Product Color: Set the product color either as “Fetched from Image” or “Primary Color
  • Primary Color: Select a primary color.
  • Background Color: Set a background color.
  • Text Color: Select a text color.
  • Product Text Color: Select the color of the product text.
  • Border Color: Set border color.
  • Border Radius: Adjust the border radius.
woocommerce ai image semantic search theme appearance

Shortcode Information for Semantic search

The shortcode is provided with the plugin to setup the AI Image and Semantic search. Options and range values are also provided.

Admin can utilize it to set the image and phrase searching as per the requirement.

woocommerce ai image and semantic search shortcode

Setup Semantic Search with Shortcode

With the help of the Shortcode provided with the plugin, one can setup the Semantic Search to be visible on the frontend.

Please follow the below steps to set it up,

  • From the WordPress Admin Panel dashboard navigate to Pages>Add New Page.
wordpess add new page
  • Now, Click on Add New Page to add a new page on the storefront.
  • Edit the page as per requirement, add the Shortcode provided and publish the page.
woocommerce ai image & semantic search add new page
  • Once the page is published, it will be visible on the frontend with the image and semantic search enabled.
woocommerce ai image and semantic search frontend enabled

Sync Products

AI product search through images and text will work on only those products which have been synced with the plugin.

The admin can sync, unsync and resync the products listed on the store as per the requirement.

Products can be synced and unsynced in Bulk. A search bar is also provided to search for the products.

woocommerce ai image & semantic search sync products

Customer Flow – Frontend

Once the AI Image and Semantic search for products has been setup, the customers can use it on the frontend.

They can either enter a phrase in the text bar or upload an image through the upload image button provided beside the search button.

They will get the option of searching though phrases and images as per the snapshot below,

woocommerce ai image and semantic search frontend

An example of a phrase search is provided below with the prompt,”Show me Blue Shirt” which will display all the relevant products.

woocommerce ai image and semantic search phrase search

Mobile View

The AI Image & Semantic search plugin for WooCommerce is also responive and works well in the Mobile View.

WooCommerce AI Image & Semantic Search in mobile view

So, that’s all for the WooCommerce AI Image & Semantic Search plugin.

Support

If you have any more queries or suggestions, kindly reach out to us through [email protected] or create a ticket through webkul.uvdesk.com

Current Product Version - 1.0.0

Supported Framework Version - WordPress - 6.5.2, WooCommerce - 8.8.2

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home

Table of Content