Skip to main content

Multilingual Search

Clonable Multilingual Search

Clonable Multilingual Search adds a fast, multilingual search function to your WordPress or WooCommerce website.

The search widget searches directly in the visitor's browser and shows results while typing. On clones, the search results are shown in the language of the relevant clone, provided the corresponding JSON keys have been added to the clone.

Beta

Clonable Multilingual Search is currently a beta feature. Behaviour, labels and settings may still change in future versions.

How does the search function work?​

The plugin builds a search index of the selected content (posts, pages, products, taxonomies and metadata). This index is made available to the search widget via an API.

In the browser, the widget searches the index using fuzzy search. This means results are also found for small typos or partial search terms, without a new request to the server being needed for every keystroke.

Key features:

  • Instant results — results appear while typing (from 3 characters).
  • Multilingual — on clones, results are shown in the language of the clone, provided the JSON keys are configured.
  • WooCommerce support — for products, SKU, price and stock are also included.
  • Optional caching — when you enable caching, the search feed is cached per language so the search function stays fast.
info

Caching is disabled by default. When you enable Enable search results caching, the search feed is stored per language: all clones with the same language then share the same cached index, so a single translation round serves multiple clones at once.

Enabling​

The settings for the search function can be found on the Multilingual Search tab. The settings are divided into three sections: General, Styling and Advanced.

  1. Open the Multilingual Search tab.
  2. Enable Enable Clonable Multilingual Search.
  3. Save the settings.

Once the feature is enabled, the front-end assets are loaded and the search widget is available via a shortcode.

Placing the widget​

Place the search widget at the desired location using the shortcode (click to copy):

You can use this shortcode:

  • on pages and in posts;
  • in widget areas;
  • within page builders;
  • at a custom position within your theme.
tip

The settings page has a button to copy the shortcode straight to your clipboard.

General​

Enables Clonable Multilingual Search. When enabled, the search index is built and searches on clones are translated into the language of the clone.

Search widget shortcode​

Shows the shortcode you use to place the search widget on your website.

Search widget placeholder text​

Determines the placeholder text in the search field. The default value is Search....

Enabled post types​

Select the post types that should be included in the search index, for example pages, posts or WooCommerce products.

The fields for included items, excluded items and taxonomies only become available after you have selected at least one post type here.

Enabled taxonomies​

Select which taxonomies (such as categories and tags) are included in the search index.

When this field is left empty, all taxonomies linked to the selected post types are included automatically.

Search results enabled item fields​

Determines which fields are shown per result. The available fields are:

  • Thumbnail
  • Title
  • Description
  • SKU
  • Price
  • Stock

When no fields are selected, all fields are shown. Fields that do not apply to a result (for example a price for a blog article) are hidden automatically.

info

The WooCommerce prices shown are indicative. The search feed is built without a customer session, so the price in the search results may differ from the price an individual customer ultimately sees.

Styling​

The appearance of the search widget can be fully customised.

Disable default search widget styling​

When enabled, the default CSS styles of the search widget are not loaded. Use this when you want to style the widget entirely with your own CSS.

Enable custom search widget styling​

When enabled, a CSS editor appears that lets you override the default styles. Your changes are saved to a separate file and do not affect the default stylesheet.

Custom search widget styling​

The CSS editor in which you enter your own styles. This editor is only visible when Enable custom search widget styling is enabled. When the field is empty, the default CSS is used as a starting point.

Commonly used CSS classes​

/* Outer wrapper of the widget */
.clonable-search-widget-wrapper {
}

/* The search field including icon */
.clonable-search-input-wrapper {
}

/* A single result row */
.clonable-search-result-row {
}

/* Text part of a result */
.clonable-search-result-text {
}
.clonable-search-result-title {
}
.clonable-search-result-meta {
}
.clonable-search-result-price {
}

/* Image of a result */
.clonable-search-result-image {
}

/* Message shown when there are no results */
.clonable-search-no-results {
}

Advanced​

The advanced settings determine which content is included in the search index and how the search feed is processed.

caution

Only change these settings when you understand which content you want to include or exclude from the search results.

Included items​

Limits the search index to specific items. When one or more items are selected here, only those items are included in the index.

When this field is left empty, all items of the selected post types are included.

Excluded items​

Excludes specific items from the search index. Excluded items are never included in the index, even if they belong to the selected post types or appear in the included items.

Only show Clonable Multilingual Search on clones​

When enabled, the search widget is only shown on clones and not on the original website.

Enable search results caching​

Enables server-side caching of the search feed. This option is disabled by default. When enabled, the built search feed is cached so the search function stays fast; the cache has a lifespan of 1 week.

See Managing the search cache for refreshing the cache manually.

Include ALL meta fields in search feed​

Determines how much post meta is included in the search feed. By default, only the clonable_search_terms meta field is included (see Adding custom search terms).

When you enable this option, all post meta fields are included in the search feed.

caution

Including all meta fields can significantly increase the size of the search feed and memory usage. Only enable this when you really need it.

Adding JSON keys in the Clonable dashboard​

The search widget fetches the search index via a JSON endpoint (/wp-json/clonable/v1/search). For the search results on clones to be translated correctly, this JSON structure also needs to be known to Clonable's translation engine.

Add the following JSON keys to the JSON translations settings of the clone (see JSON translations):

  • clonable_search.posts.title
  • clonable_search.posts.short_description
  • clonable_search.posts.description_excerpt
  • clonable_search.posts.categories.title
  • clonable_search.posts.tags.title
  • clonable_search.posts.meta.clonable_search_terms
  • clonable_search.posts.attributes.**
tip

You can find these keys under clone → Advanced settings → Json translations.

Adding custom search terms​

You can add extra search terms per item that the item should be found on. To do so, add a post meta field named clonable_search_terms with comma-separated values:

term1, term2, term3

These terms are included in the search index and receive a high weight in the search results.

By default, this is the only meta field included in the search feed. If you want to index more meta fields, use the Include ALL meta fields in search feed option.

Managing the search cache​

The search feed can be cached so the search function stays fast. Caching is opt-in: enable Enable search results caching under the Advanced section. When caching is active, the feed is cached for 1 week.

After changing content or settings, you can refresh the cache straight away:

  1. Open the Multilingual Search tab.
  2. Go to the Advanced section.
  3. Under Cache Management, click Clear search cache.

The cache is then rebuilt automatically on the next visit to the website.

info

The cache is also refreshed automatically after it expires (after 1 week). Refreshing manually is mainly useful right after making changes.

Frequently asked questions​

I don't see the search widget​

Check the following:

  • whether Enable Clonable Multilingual Search is enabled;
  • whether the shortcode [clonable_search_widget] has been placed on the page;
  • whether Only show Clonable Multilingual Search on clones is not unintentionally enabled while you are viewing the main website;
  • whether a caching plugin is serving an old version of the page.

Why aren't any results appearing?​

Results appear from 3 characters typed. Also check that at least one post type is selected under Enabled post types, so that content is present in the index.

Does the search function work with WooCommerce?​

Yes. For products, SKU, price, stock and product images are included, among other things. Which fields are visible is determined via Search results enabled item fields. Keep in mind that the prices shown are indicative and may differ per customer.

Are search results translated?​

Yes, provided the corresponding JSON keys have been added to the clone. On clones, the search results are then shown in the language of the clone. If you also enable Enable search results caching, the translated index is cached per language, so all clones with the same language make use of it.

Can I fully customise the appearance?​

Yes. You can disable the default styles and add your own CSS with Enable custom search widget styling. The HTML structure and CSS classes of the widget are available to fully override.

My changes are not visible in the search results​

When Enable search results caching is enabled, the search feed is cached. Click Clear search cache under Cache Management to apply the changes immediately.

Last updated on