This tutorial explains how to enable Ajax search by custom WooCommerce attributes using the JetSearch WordPress plugin and the Search by Custom Attributes addon. Register the custom attributes via the code snippet.
Before you start, check the tutorial requirements:
- Elementor (Free version), Block editor (Gutenberg), or Bricks
- WooCommerce plugin installed and activated
- Search by Custom Attributes addon installed and activated
- JetSearch plugin installed and activated
Attributes are categorized into two types: global and specific. Global attributes are available for the Ajax Search by default. However, to support attributes for individual products, the Search by Custom Attributes addon is required. It allows you to add custom attributes to the Search in taxonomy terms option of the Ajax Search manually using a filter.
For more details, you can refer to the WooCommerce Product Attributes Explained: Features, Possibilities, Use Cases article.
Create a Custom Attribute
To set a specific attribute to an individual product, go to the WordPress Dashboard > Products > All Products tab and select the product you want to edit.
Scroll down to the Product Data section and click the Attributes tab. Here, press the “Add new” button and enter the attribute Name (e.g., “Season”, “Brand”, etc.).
Enter the Value(s) for this product (e.g., “Fall, Spring”). Optionally, check the boxes to make the attribute visible on the product page or to use it for variations. Then, save the product.
Add a Snippet
To include a custom attribute in the search results, you should add code either via a custom code snippets plugin (like Code Snippets) or directly in your theme’s functions.php file (preferably a child theme to prevent overwrite on updates).
For example, we install and activate the Code Snippets plugin, then proceed to the WordPress Dashboard > Snippets tab and click the “Add New” button.
We type the hook name into the title bar (e.g., “Adding custom attribute in the search result”) and enter such code into the Functions (PHP) textarea:
add_filter( 'jet_search/custom_attributes_list', function() {
return [
'season' => 'Custom: Season',
];
} );
where “season” is the attribute Name and “Custom: Season” is a label that will be displayed in the Ajax Search widget/block/element settings.
Add a piece of code for every custom attribute and press the “Save Changes and Activate” button to save the snippet.
Adjust the Ajax Search widget/block/element
Open a page or template with the Ajax Search widget/block/element. In our case, we edit a site header in the Elementor editor.
In the widget settings, we expand the Search Query tab and enable the Search in taxonomy terms toggle. In the Taxonomies drop-down menu, we set our “Custom: Season” attribute.
Then, we save the changes by pushing the “Publish” button.
Check the Result
Finally, we navigate to the front end and enter a custom attribute Value in the search bar (“Fall” in our case). It shows the product associated with it in the search results.
That’s all. Now you know how to enable Ajax search by custom WooCommerce attributes using the JetSearch WordPress plugin and the Search by Custom Attributes addon.
